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:

Monobooth_Ninja_Contact_Form

When you are in forms, go over to the left hand side and then click on import/export:

Import_Ninja_Form

You will see the following screen where you can select a form to import:

Select_Import_Form

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

demo contact form details

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:

email_and_actions_contact_form

You should update the email admin area, you can use the following options:

email_admin_contact_form

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:

contact_form_shortcode

It should look similar to the below:

CONTACT_US___Photo_Booth

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:

Forms_Add_New

Once you have done this you will have 3 tabs:

Contact_Form_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):

Contact_Form_Items

1. We use the basic text field, with the following options:

option_1_contact_form 2. Using the ‘list’ template field, we added the various options here for the services offered, for the user to select:

option_2_contact_form

3. Using the ‘First Name’ user information field:

contact_form_option_3

4. We use the ‘Phone’ option from user information (Alternatively this can be a textarea box if you are working internationally):

option_4_contact_form

5. ‘Email’ option from user information, this will verify if the entry is a valid email:

contact_form_option_5

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.

contact_form_option_6

7. We use the ‘submit’ option from template fields to create a submit button:

contact_form_option_7

You can make any of the above options a required field by selecting the drop down item ‘Restriction Settings’ and selecting the ‘Required’ option:

required_field_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:

Screen Shot 2015-06-02 at 10.05.46 AM

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:

email_and_actions_contact_form

You should update the email admin area, you can use the following options:

email_admin_contact_form

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:

contact_form_shortcode

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:Screen Shot 2014-11-21 at 12.14.32 PMYou can see below the available options for the Contact page template,  each layout has slightly different options:

Screen Shot 2014-11-21 at 12.21.23 PM

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: