Before you add this module to a page

You need to create a Contact Form 7 form first. The module uses that form to collect contact details and send the email notification.

Go to Contact → Add New and paste the following into the form body:

// Two fields per row using Bootstrap grid

<div class="form-group row">
  <div class="col-md-6"><label>First Name:* [text* first-name class:form-control]</label></div>
  <div class="col-md-6"><label>Last Name:* [text* last-name class:form-control]</label></div>
</div>

<div class="form-group row">
  <div class="col-md-6"><label>Email:* [email* email class:form-control]</label></div>
  <div class="col-md-6"><label>Phone:* [tel* phone class:form-control]</label></div>
</div>

<div class="form-group row">
  <div class="col-md-6"><label>Postal Code:* [text* postal-code class:form-control]</label></div>
  <div class="col-md-6"><label>Company: [text company class:form-control]</label></div>
</div>

// These two lines are required — do not remove them

[hidden appointment-date]
[hidden appointment-time]

[submit "Submit"]

The fields [hidden appointment-date] and [hidden appointment-time] are required. Without them, the selected date and time will not be included in the notification email.

Also configure the Mail tab to include
[appointment-date] and [appointment-time]
in the email body so you receive the booking details.

2 Content tab

CONTENT

• Anchor
  Optional. A short ID so other links on the page can jump directly to this module — e.g. book-appointment. Leave empty if not needed.
• Heading
  The large heading shown in the left column — e.g. Book now in three easy steps.
• Main Copy
  Body text in the left column. Explain what happens during the consultation, any conditions, links to other pages etc.
• Form
  Search for and select the Contact Form 7 form you created in the step above. This is required — the module will not display without it.
• Classes
  Optional. Extra CSS classes on the module wrapper. Leave empty unless instructed by a developer.

4 Labels tab

LABELS

Every text label visible on the form. Translate these into the site language. If you clear a field and leave it empty that text will simply not appear on the page.

• Step 1 / 2 / 3 label
  The names shown in the step indicator at the top — e.g. Information, Details, Confirm.
• Required fields note
  The small note above the form — e.g. Fields marked * are required fields. Clear to hide it.
• Next button text
  The button that moves from Step 1 to Step 2 — e.g. Next: Choose date & time.
• Date / Time heading
  Headings above the date picker and time dropdown in Step 2.
• Select one
  The default placeholder in the time dropdown before the visitor makes a selection.
• Summary heading / text
  A short message shown below the time picker — e.g. A local Culligan expert will contact you to confirm. Clear both to hide the section.
• Back / Submit button text
  The Back and Submit buttons in Step 2.