Creating a contact page with Contact Form 7 and the Customizr theme

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.

Contact Form 7 is a free, easy-to-use and extremely popular WordPress plugin which can be used with the Customizr theme for this purpose.

The Contact Form 7 plugin

The Contact Form 7 plugin is yet another forms plugin, but its most significant feature is that it is so simple and easy to use. Some of its features that make it a winner are

• Complete customizability using simple mark-up
• Simple interface and several options
• Useful and detailed documentation
• AJAX submission
• Submissions comes to mailbox

Installation of Contact Form 7

Installation of the Contact Form 7 plugin is the usual procedure. From the WordPress admin dashboard, click on Plugins > Add New and enter Contact Form 7 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 Contact > Contact 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 asking you to choose the language.

Once you choose the language, you are taken to the new contact form editor. The basic fields needed for any contact form are already present in the form - Name, Email, Subject, Message and Submit button. There is a simple mark-up format to be followed.

In the form editor, type in the title of the Form. You can add additional fields by clicking on the Form field buttons in the editor. A pop-up lightbox appears on clicking on one of the fields. Check against Required Fields if you want validation for required field to be done. The Name is filled-in by default. You can give a placeholder value in the Default Value field. Click on Insert Tag to insert this field into your form. You may have to add some simple html around the tag.

You can add a reCAPTCHA field for which you need to set up the keys.

After adding the fields you want from the available options, click on the Save button to save the form.

Adding email notifications

After creating the design of the form, you can set up the email in the next tab titled Mail. Edit the To field to contain the mail id of the administrator or any other email that you want the submissions to be sent to. The fields on the form can be used using their tags enclosed in square braces. The usable tags are listed on top.

Click on Save once you are done.

You can also customize the messages that are displayed. The default Messages can be seen in the next tab Messages.

Click on Save after finishing all customizations.

Now, to verify, click on Contact > Contact Forms and you should see your contact form listed as below.

An important step: Copy the Shortcode given against your contact form. This can also be seen in the form editor.

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. Paste the Shortcode that you copied in the previous section into the body of the page.

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 message was sent successfully. Thanks." (The default message, which can be changed in Messages tab), then your form works.

Head to the inbox of the administrator email that you provided. See if this submission reached your inbox.

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.

1. Create a menu, say newmenu by clicking on Appearance > Menus from the admin dashboard.
2. 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'
        )
    ).'' : '' );
}

3. From the customizer, Click on Menus > newmenu. Please note that instead of newmenu, you will choose the name that you gave your new menu.
4. Click on Add Items and the add the pages you want to your menu.
5. 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 !

Doc created by: Menaka S.