How to Add a Contact Form to your WordPress Website

Article sections

    In this tutorial, we will show you how to add a perfectly functional contact form on your newly created website.

    There are 3 easy steps to follow, plus a verification process – after the installation is in place.

     

     

    Step 1: Install a Contact Form plugin (e.g. Contact Form 7)

    Make sure you are in the WordPress admin dashboard.

    Plugin Installation:

    Go to Plugins -> Add New -> Search for “Contact Form 7”. Press Install Now. After the installation is finished, press Activate.

    Now the Contact Form 7 plugin is installed and active on your website.

    Configuring the contact form fields:

    You are still in the WordPress Admin dashboard. In the left-hand menu, a Contact section appears after the plugin installation. Click on Contact. Then click on Contact Forms.

    You are given a shortcode, under this form: [contact-form-7 id=”127″ title=”Contact form 1″]

    Keep it, as you will need it later.

    Next, you will be led to the editing options for your new contact form. Click Edit:

    In editing mode, there are several fields you can customize, according to your needs:

    Form tab – here, you are customizing the fields you want to display in the contact form

    Mail tab – Here, you can set the recipient mail to a professional address (not a Yahoo or Gmail email address). This professional email address will look something like this: [email protected]

    Messages tab – Here, you can customize the text that appears to the users when the message was successfully sent, or when the message failed to send, etc.

    Now let’s go to the theme customizer and set the placeholder for the newly created Contact Form.

    Step 2: Add a contact section within the webpage

    In the WordPress Admin dashboard, go to Appearance -> Customize -> One Page Express customizer.

    Next, go to Page Content -> Manage Page Sections -> Add Section.

    Search for a pre-defined contact section within the list of content sections available, then click Add Section:

    Place the mouse on the name of this content section (Contact) and you will be directed to the respective area in the customizer preview.

    Step 3: Link the contact section to the Contact Form

    Click on the pencil inside the placeholder for the contact form, and you will be required a 3rd party form shortcode.

    This time, you need the shortcode you saved earlier. In our case, the shortcode is: [contact-form-7 id=”127″ title=”Contact form 1″]

    Simply copy and paste it into the required section:

    Click Apply Changes.

    Here you are! The contact form has been put in place:

    All that is left to do is customize the title of the contact form and any additional text on the right (in this case). Simply click the pencil icon inside each sub-section and start editing the text:

    Step 4: Perform a verification to check that everything works ok

    To quickly check that the contact form is working, fill in the form and press Send Message.

    Check your inbox, to see if you have received a message from the contact form in the website.

     

    Related Articles