Table of Contents
How to Install and Set Up Contact Form 7
How to Make Two Columns on Contact Form 7 Without Plugins
-
- Adding Custom CSS to Your Website
- Applying CSS Classes to Your Form
- Adding Padding to a Two-Column Contact Form
Contact Form 7: Show Fields Side by Side
Testing Your Form
Best Practices for Multi-Column Forms
Conclusion
Introduction to Contact Form 7
Many WordPress users rely on Contact Form 7 to create forms for their websites. However, by default, Contact Form 7 arranges all form fields in a single vertical column. This can result in a long and unappealing form.
This guide will walk you through the process of creating a two-column layout in Contact Form 7 without using any plugins, making your form look more professional and user-friendly.
What is Contact Form 7?
Contact Form 7 is one of the most popular free WordPress plugins for creating custom contact forms. It allows users to add form fields, manage submissions, and integrate email notifications without needing to write complex code.
Why Use a Two-Column Layout?
A two-column form is more visually appealing and allows users to complete the form more efficiently. Here are a few benefits:
- Reduces form length
- Improves user experience
- Enhances mobile responsiveness
- Makes the form look more professional
How to Install and Set Up Contact Form 7
If you haven’t installed Contact Form 7 yet, follow these steps:
- Log into your WordPress Dashboard.
- Go to Plugins > Add New.
- Search for “Contact Form 7”.
- Click Install Now and then Activate.
- Navigate to Contact > Add New to create a new form.
- Click Save
- Copy the shortcode – it looks something like:
Error: Contact form not found.
How to Add the Contact Form 7 Shortcode to a Page
Now, decide where you want the form to appear.
Method 1: Using the Block Editor (Gutenberg)
- Navigate to Pages > Add New (or edit an existing page).
- Click the “+” (Add Block) button.
- Search for Shortcode and select the Shortcode block.
- Paste the Contact Form 7 shortcode inside the block.
- Click Publish or Update to save the page.
Method 2: Using WPBakery Page Builder
- Open your page in WPBakery Page Builder.
- Click Add Element.
- Search for and select Text Block.
- Paste the Contact Form 7 shortcode inside the text editor.
- Click Save Changes and update the page.
Method 3: Using Classic Editor
- Go to Pages > Add New (or edit an existing page).
- In the content editor, paste the shortcode where you want the form to appear.
- Click Publish or Update.
Preview Your Page
After adding the shortcode, visit the page to make sure the form displays correctly.
How to Make Two Columns on Contact Form 7 Without Plugins
Adding Custom CSS to Your Website
To make these fields appear side by side, you need to add custom CSS. Here’s how to do it:
- Go to Appearance > Customize in your WordPress Dashboard.
- Click on Additional CSS.
- Copy and paste the following CSS:
.one-half {
position: relative;
margin-right: 4%;
float: left;
margin-bottom: 20px;
width: 48%;
}
.last {
margin-right: 0 !important;
clear: right;
}
.clear {
clear: both;
}
@media only screen and (max-width: 767px) {
.one-half {
width: 100%;
margin-right: 0;
}
}
Applying CSS Classes to Your Form
Once you’ve added the CSS, your form fields will align properly in two columns.
- Ensure your form has the correct structure (as shown in the example code below).
- Test the form preview to verify that the fields align correctly.
Contact Form 7: Show Fields Side by Side
By default, Contact Form 7 arranges fields in a vertical layout. To display them side by side, you need to use HTML structure and CSS styling.
- Where to Place the Code
- Open your WordPress Dashboard.
- Go to Contact > Contact Forms.
- Select the form you want to edit or create a new form.
Paste the following HTML structure inside the form editor:
<div class=”one-half”>
<label> Your Name (required)
[text* your-name]
</label>
</div>
<div class=”one-half last”>
<label> Your Email (required)
[email* your-email]
</label>
</div>
<div class=”clear”></div>
<label> Your Message
[textarea your-message]
</label>
[submit “Send”]
Click Save to update your form.
Adding Padding to a Two-Column Contact Form (optional)
Once the columns are in place, you may notice that the spacing between fields is too tight. To fix this, add padding using CSS:
.one-half {
padding-right: 10px;
}
If you need additional spacing between form sections, modify the margins:
.one-half {
margin-bottom: 30px;
}
Testing Your Contact Form 7
After setting up the two-column layout, follow these steps to ensure it works correctly:
- Preview the form within Contact Form 7.
- Check on different devices to confirm responsiveness.
- Submit test data to ensure proper functionality.
Best Practices for Multi-Column Forms
- Keep It Mobile-Friendly: Ensure that on small screens, the columns collapse into a single column for better readability.
- Limit the Number of Columns: Avoid using more than two columns, as too many fields in a row can be overwhelming.
- Use Proper Labels: Always place labels inside or above fields for accessibility and ease of use.
- Test Your Form: Check the form layout on different devices to confirm that it appears correctly across all screen sizes.
Conclusion
By following this guide, even a beginner can create a sleek, easy-to-read two-column Contact Form 7 layout without using additional plugins. The provided CSS ensures that the form is mobile-friendly while maintaining a clean and structured appearance. Whether you’re building a simple contact form or a more complex inquiry form, this method provides flexibility while improving usability.
