How To Make Contact Form 7 Two Columns

by

Contact Form 7 stands out as a favored tool for designing contact forms on WordPress sites. It provides a simple way to craft personalized forms boasting a range of fields and choices. A frequent request among users is the ability to display the form in a dual-column layout rather than in a single extended column. Within this guide, we will demonstrate how to accomplish this utilizing Contact Form 7.

Step 1: Install and Activate Contact Form 7

If you haven’t already done so, install and activate the Contact Form 7 plugin from your WordPress dashboard. Once installed, go to Contact Form 7 and click on “Add New” to create a new form.

Step 2: Add Fields to Your Form

In the “Form” tab, add the fields you want to include in your form. You can choose from various field types such as text, email, phone, and more. Once you have added all the necessary fields, click on the “Mail” tab.

Step 3: Customize Your Email Template

In the “Mail” tab, you will see a section called “Message Body.” This is where you can customize the email that will be sent to you when someone submits your form. To make the form appear in two columns, we need to add some HTML code to this section.

Step 4: Add HTML Code to Your Email Template

In the “Message Body” section, add the following HTML code:

<div class="row">
    <div class="col-md-6">
        [your_name]
    </div>
    <div class="col-md-6">
        [your_email]
    </div>
</div>

Replace “your_name” and “your_email” with the corresponding fields from your form. This will create two columns in your email template.

Step 5: Save Your Changes

Once you have added the HTML code to your email template, save your changes by clicking on “Save” at the bottom of the page. Your form should now appear in two columns when someone submits it.

Conclusion

By following these simple steps, you can easily create a Contact Form 7 form that appears in two columns. This will make your form more user-friendly and easier to read for your visitors. Remember to always test your form before making it live on your website to ensure that everything is working correctly.