Contact Page

Creating a Contact Page

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Contact page

A contact page in Lambda requires the Contact Form 7 plugin to be activated, in order to be able to create a contact form. Make sure you have downloaded and installed the correct plugin from here.

Once the plugin is installed and you have already created your forms, use Visual Composer to add a Contact form to a page. If you wish to add a contact form to your page, follow these steps. Once you have created an empty row,

  • press the Add element button of the Visual Composer and choose the Contact Form 7 element. Now you can edit the shortcode

Contact Form 7

  • Form title: What text use as form title. Leave blank if no title is needed.
  • Select contact form: Choose previously created contact form from the drop down list.

Choose the contact form that you wish to show from the Select contact form select box option.

Adding a contact form

The Contact menu option on the left is where you add contact forms. To add a new contact form, select the Contact > Add New option from the left hand WordPress menu. From the next screen press the blue Add New button if you want to use the default English language, or choose one from the dropdown menu and press the Add New button next to it.

Contact Form

When you get to the next page, paste the following code into the Form field, after you have set a name for the contact form in the Untitled field.

<div class="row">
    <div class="col-md-6">
        <div class="form-group form-icon-group">
            <i class="fa fa-user"></i> [text* your-name class:form-control placeholder "Your name *"]
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group form-icon-group">
            <i class="fa fa-envelope" > </i> [email* your-email class:form-control placeholder"Your email *"]
        </div>
    </div>
</div>
<div class="form-group form-icon-group">
    <i class="fa fa-pencil"></i> [textarea your-message class:form-control placeholder "Your   message"]
</div>
[submit class:btn class:btn-primary "Send email"]

Form

For the next options, in the Mail panel, fill the To: field with the email account that you want the emails to be redirected to. Every time the contact form gets filled by a user and sent, this email account will be receiving an email according to the format defined in the Mail panel. For the rest of the fields, you can leave the default values. Contact Mail

Now press Save. As you can see in the image below, you should now have a shortcode to paste in your page's content, which will add the contact form you just created. Contact Save

Adding a booking contact form as in Restaurant Theme

In order to create a booking contact form you need to install the Contact Form 7 Datepickerplugin(depends on Contact Form 7)
Datepicker theme selection has been disabled to avoid inconsistencies with the theme style.

In order to add a booking contant form, you need to create a simple contact form first. To add a new contact form, select the Contact > Add New option from the left hand WordPress menu. From the next screen press the blue Add New button if you want to use the default English language, or choose one from the dropdown menu and press the Add New button next to it.
When you get to the next page, in the Datepicker Theme metabox, from the Theme select box choose the Disabledoption. Then, paste the following code into the Form field, after you have set a name for the contact form in the Untitled field.

<div class="row">
  <div class="col-md-6">
      <div class="form-group text-left">
          <label>Your email</label>
          [email* your-email class:form-control placeholder"Your email *"]
      </div>
  </div>
  <div class="col-md-6">
      <div class="form-group  text-left">
          <label>When would you like to book?</label>
          [date date-589 class:form-control]
      </div>
  </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group  text-left">
            <label>What time?</label>
            [select menu-133 "18:00" "18:30" "19:00" "19:30" "20:00" "20:30" "21:00" "21:30"]
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group  text-left">
            <label>Party Size</label>
            [select menu-164 "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]
        </div>
    </div>
</div>
<div class="form-group">
    <label></label>
    [submit class:btn class:btn-primary class:btn-lg "Book my table"]
</div>

The code [date date-589 class:form-control] creates a datepicker field, which looks like this Booking Contact

If you want to create a new datepicker of your own choice, click on the Generate Tagdropdown opton and select the Date fieldoption. Fill the rest of the options as you wish, in order to setup your own datepicker. Booking Contact

You can replace the [date date-589 class:form-control] code of the demo form with the new one that you have created, to replace the datepicker.
Similarly, you can create dropdown menus, by clicking on Generate Tagand selecting Drop-down menu.

Adding a booking contact form as in Hotel Theme

To create a booking contact form same as the Lambda Hotel theme, follow the same procedure as the Lambda Restaurant theme explained in the previous section, this time using the code for the form as shown below:

<div class="row vertical-middle">
    <div class="col-md-3 text-light">
        <div class="form-group text-left">
            <label>Check in Date:</label><div class="date-wrapper">[date date-754 class:form-control placeholder "Choose Check in date" ]</div>
        </div>
    </div>
    <div class="col-md-3 text-light">
        <div class="form-group  text-left">
            <label>Check out Date:</label><div class="date-wrapper">[date date-758 class:form-control placeholder "Choose Check out date"]</div>
        </div>
    </div>
    <div class="col-md-3 text-light">
        <div class="form-group  text-left">
            <label>Room type:</label>
            [select menu-147 "Single Room" "Double Room" "Triple Room" "Suite"]
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group  text-center">
            <label>&nbsp;</label>
            [submit class:btn class:btn-primary  "Book Your Room Now"]
        </div>
    </div>
</div>

The form with the datepickers should now look like this Booking Room

Adding a booking contact form as in Wedding Theme

To create a booking contact form same as the Lambda Wedding theme, follow the same procedure as the Lambda Restaurant theme explained in the previous section, this time using the code for the form as shown below:

<div class="row">
    <div class="col-md-6">
        <div class="form-group form-icon-group">
            <i class="fa fa-user"></i> [text* first-name class:form-control placeholder "First Name *"]
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group form-icon-group">
            <i class="fa fa-envelope" > </i> [text* last-name class:form-control placeholder "Last Name *"]
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="form-group form-icon-group">
            <i class="fa fa-file-text"></i> [text* email class:form-control placeholder" Email *"]
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group  text-left">
            <label>Guests</label>
            [select menu-133 "0" "1" "2" "3" "4" "5"]
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group  text-left">
            <label>Events</label>
            [select menu-164 "Bachelor Party" "Bachelorette Party" "Wedding Ceremony" "Wedding Party" ]
        </div>
    </div>
</div>
<div class="form-group text-center">
    <label></label>
    [submit class:btn class:btn-primary class:btn-lg "I'm Attending"]
</div>