Contact Page
Creating a Contact Page
Creating a 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,
Choose the contact form that you wish to show from the Select contact form select box option.
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.
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"]
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.
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.
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
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.
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.
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> </label>
[submit class:btn class:btn-primary "Book Your Room Now"]
</div>
</div>
</div>
The form with the datepickers should now look like this
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>