Contact Page
For Monobooth we wanted to create a more unique contact page, and for this we have used a great plug-in integration, thats completely free ‘Ninja Forms’ . To create the same look as we have you should download the plug-in, once active you can go to forms, on the left hand menu in your WordPress backend:
When you are in forms, go over to the left hand side and then click on import/export:
You will see the following screen where you can select a form to import:
Next you will want to locate your theme download, inside the zip file there will be a folder demo contact form, inside this there will be a flo-contact-form.nff you can select this file
Once you have imported the form, you can view the form. Now you will want to go to the second tab ‘Email and actions’ where you will see the following:
You should update the email admin area, you can use the following options:
The other options can remain as default.
Now you should go back to the main forms page, here you can copy the Ninja Forms shortcode and paste it in to your contact page:
It should look similar to the below:
You can also watch our video on how to set up the Ninja Form below:
You can also see below how to create a form with the same fields as our demo, although it doesn’t have the same styling and can also view Ninja Forms full documentation here if you wish to create your own unique contact forms.
Creating a form from scratch
You can select add new form:
Once you have done this you will have 3 tabs:
Firstly we will start with ‘Build your form’. If you wish to replicate the demo site, you will need to use the following settings (Otherwise you can use the built in forms shown below or create your own):
1. We use the basic text field, with the following options:
2. Using the ‘list’ template field, we added the various options here for the services offered, for the user to select:
3. Using the ‘First Name’ user information field:
4. We use the ‘Phone’ option from user information (Alternatively this can be a textarea box if you are working internationally):
5. ‘Email’ option from user information, this will verify if the entry is a valid email:
6. For additional notes we use the ‘textarea’ option, also note that for all our options we use the label position ‘Inside Element’ to give our forms a cleaner look.
7. We use the ‘submit’ option from template fields to create a submit button:
You can make any of the above options a required field by selecting the drop down item ‘Restriction Settings’ and selecting the ‘Required’ option:
8. Custom css classes.
This refers to more advanced users. But we’ve added support for a few classes that will help you easily create 2 columns forms like we did on our demo site.
The Following classes are supported by default:
flo-small – if this class is added to a field, then that field will have the width 50% of the parent container. Usually this is used when you want to have 2 fields in the same row.
right – right align the element
left – left align the element
center – center align the element
The custom css classes can be added from advanced settings:
Once you have done this you can save the form. Now you will want to go to the second tab ‘Email and actions’ where you will see the following:
You should update the email admin area, you can use the following options:
The other options can remain as default.
Now you should go back to the main forms page, here you can copy the Ninja Forms shortcode and paste it in to your contact page:
You can also view Ninja Forms full documentation here if you wish to create your own unique contact forms.
Alternatively Monobooth offers a page template for creating Contact pages, we offer the same page templates as our Crowd theme, you can view what they look like here. To create the contact page you can go to pages, add new, and then on the right hand side select ‘Contact Form’. Once you have select this you will have the option of 3 different contact forms layouts:You can see below the available options for the Contact page template, each layout has slightly different options:
Note that if you are using the Contact page template, it is mandatory to enter the ‘Contact email’ to make the page working.
Watch the video below on using the standard contact page template: