Creating a contact page with the Customizr theme and the Formidable Forms plugin

If you have a WordPress website, be it a blog or a static website, a contact form is a valuable addition to the site. Instead of asking your readers to contact you via mail, you can provide a contact form page and ask your users to give feedback or send queries via the form.

The Formidable Forms plugin

Formidable Forms is an excellent free contact form plugin for WordPress. It's beautiful and easy to use and inegrates seamlessly with the Customizr theme.

The plugin is a pleasure to use with a simple drag-and-drop interface to create custom forms. You can even generate forms from a template. There is a contact form template that the plugin comes with, but you can also create your own template.

The free version has all the features you'll need to create a nice contact form :

7 field types in the free version,
unlimited email notifications,
the visual form styler,
ability to view form submissions from the back-end.

And numerous other features, this plugin is a useful addition to every WordPress site.

Installation of Formidable Forms

Installation of the Formidable Forms plugins follows the usual procedure. From the WordPress admin dashboard, click on Plugins > Add New and enter Formidable Forms in the Search box. From the results, click on the Install Now button against the plugin.

After Installation, activate it and you are done with the installation.

Creating a Contact Form

To create a Contact Form, click on Formidable > Forms from the admin dashboard. There is a listing of the forms available which is none as of now.

Click on Add New. You get a screen with the form editor as below.

Now, the plugin comes with a predefined template for Contact Form. You can either use this or build a form from scratch.

Creation from a template

In the form editor, type in the title of the Form. In the body of the form, you will find a dropdown list with the text Or load fields from a template. From this dropdown list, choose Contact us and click on Load Template. Your contact form gets created from the template with a set of pre-defined fields. Click on Create at the bottom of the screen to finalize the creation of the form.

You may note that the captcha needs some setup. Either click on the link against the text next to Captcha or access it through Formidable > Global Settings from the admin dashboard. You will have to signup for a reCAPTCHA key.

After getting the reCAPTCHA key, enter the Site Key and Private/Secret Key to enable Captcha in your form.

Manual Creation

Alternately, you can create a contact form with your choice of fields from the available fields. Go to Formidable > Forms from the admin dashboard and click on Add New. In the Form Editor, type in the title. Instead of loading the fields from the template, drag fields from the panel on the right. You may need a Single Line Text for Name. Drag it and drop in the body of the form. Click on Single Line Text to change the label to Name.

In a similar fashion, add Email Address and Paragraph Text for email and Message respectively. Click on the asterisk (*) in front of the labels to make the field a required field.

Click on Create to finalize the creation of the form. That is a bare minimum Contact Form that you have created.

From the Settings tab (just next to the Build tab) of the Form editor, you can set up Form Actions like notifying by email of any new messages submitted. Click on Form Actions in the left panel and expand Email Notification. Substitute [sitename] with the Name field by placing the cursor there and click on the Name Key on the right side panel. Similarly, you can change the From email address. Click on Update to add this Email Notification Action to your form.

Creating a Contact Page

Now that the form is created, you have to place this form on a page on your site. So, go ahead and create a new page. Click on Pages > Add New from the admin dashboard. In the Page editor, type a title. Click on the Formidable button above the editor.

You will see a popup screen with Insert a Form. From the dropdown list against Select a form:, choose the contact form you created (from scratch or from template). Click on Insert into Post.

You will find a shortcode for your form pasted in the body of the page. If you have set up any options when you inserted the form, those options are also present in the shortcode.

Publish the page.

Adding Contact Page to Main Menu

You created a contact form and then placed it in a page. There is one last step. You will have to place it in your menu so that your users can actually use it. From the admin dashboard, go to Appearance > Menus, choose the header menu and add the page you created to this menu. Check against the page and click on Add to Menu.

Click on Save Menu. Visit your site to see if your Contact Page is present on your menu. Click on the menu item to see your Contact Page.

You can see your Contact Page in action.

Try using it to verify if it works. Enter a name, email and a message. On submission, if you get a message like " Your responses were successfully submitted. Thank you!" (The default message, which can be changed in the settings of the form), then your form works.

You can further verify by checking the entries for the form. Click on Formidable > Entries, from the admin dashboard. You will see a list of entries which are the message submitted.

Click on View below an entry to view the message.

That is great! Your work is appreciated. Your reader is able to communicate with you through the form.

Adding Contact Page to custom Footer Menu

In case you do not want the Contact Page to appear in the header menu, but prefer to have it in a footer menu, what should you do?

Just a few steps.

Create a menu, say newmenu by clicking on Appearance > Menus from the admin dashboard.
Add the following bit of code to your child theme's functions.php

add_action( 'init', 'register_footer_menu' ); // this registers your menu with WP
function register_footer_menu() {
    if ( function_exists( 'register_nav_menu' ) ) {
        register_nav_menu( 'footer-menu', 'Footer Menu' );
    }
}
 
add_action('wp_footer', 'display_footer_menu', 1000, 0);  
// display function for your menu:
function display_footer_menu() {
    echo ( has_nav_menu( 'footer-menu' ) ? wp_nav_menu (
        array (
            'theme_location' => 'footer-menu',
            'container_id'    => 'footer-menu',
            'container_class'    => 'footer-menu'
        )
    ).'' : '' );
}

From the customizer, Click on Menus > newmenu. Please note that instead of newmenu, you will choose the name that you gave your new menu.
Click on Add Items and the add the pages you want to your menu.
Check against Footer menu under Menu locations. Save and Publish.
Visit your site to see if your footer menu can be seen.

You will see something like this.

That's it.

What a breeze it is to customize your site using Customizr theme. Creation of a contact form and placing it in a standard menu or even a custom menu cannot get simpler than this. Can it? Try it!