How to Display Contact Form 7 Fields on 2 or More Columns

I get this question a lot. “How can I display my contact form on 2 or 3 columns?” or “What are my options to have a contact form with fields side by side?” You get it! The main idea is how to get those text fields like Name or Email Address displayed on the same line and not one under another. Why? Because it looks good, therefore it increases the user experience. Let`s see what options you have!


 

 

I will take the Contact Form 7 plugin as an example for this tutorial. I’ve been working with Contact Form 7 since ever, and it’s my first choice when it comes to using a free contact form plugin for a WordPress website.

By default, the markup of a contact form created with CF7 looks like this:

contact-form-7-default-markup

and the output on the website would be:

contact-form-7-on-twentyseventeen-theme
Contact Form 7 default form on TwentySeventeen Wp Theme

This is the default and you don’t want it. You want custom, tailored to your website’s look and feel. Good news is that the CF7 form builder allows HTML markup and we’ll use this to our advantage.

Next, I`m going to show you 2 ways to display those fields on multiple columns.

[thrive_leads id=’11852′]

 

Display Contact Form 7 Fields side by side with Column Shortcodes

By default, CF7 allows only HTML markup inside its editor. To use shortcodes, we need to tell WordPress that we want to enable shortcodes for CF7. There`s a plugin for doing it, called Contact Form 7 Shortcode Enabler. To use the plugin, go to Plugins->Add New, search for Contact Form 7 Shortcode Installer, install and activate the plugin.

Alternatively, you could do this by adding a filter via the functions.php of your WordPress child theme:

add_filter( 'wpcf7_form_elements', 'delicious_wpcf7_form_elements' );

function delicious_wpcf7_form_elements( $form ) {
$form = do_shortcode( $form );
return $form;
}

Column Shortcodes is a plugin which adds shortcodes to your WordPress website functionality for displaying content on multiple columns. You can use it not only for splitting contact form fields on single columns but for any other content on your website. That`s two rabbits hit with one shot!

There are big chances that your theme comes with shortcodes for columns built into it already. My themes do. So before installing the plugin, make sure you’re checking out or asking the developer of your theme if such shortcodes are available for use with the theme.

To use the plugin, go to Plugins->Add New, search for Column Shortcodes, install and activate the plugin.

column-shortcodes-plugin-installation

Once installed, you’ll find a new button on your WordPress editor from which you can generate a column shortcode. Let’s put the plugin to the test. I went to my contact page, generated shortcodes for a two-columns line and placed some content inside the shortcodes:

contact-form-content

Notice that to create a 2-columns line, you need to generate a shortcode for the first half and another shortcode for the last half. The output should be similar to this:

two-columns-text

This is how you split the content of a page on two columns. Now that you got those shortcodes, let`s go back to the Contact Form 7 editor(Wp Dashboard>Contact->Contact Forms: Your contact form) and use them with the fields.

The markup of my contact form becomes:

<label> Your Name (required) [text* your-name] </label>
<label> Your Email (required) [email* your-email] </label>
<label> Your Message [textarea your-message] </label> [submit "Send"]

And the output becomes:

contact-form-7-on-two-columns

Pretty neat! For having the fields displayed on 3 columns, you will adjust the Contact Form 7 markup to:

<label> Your Name (required) [text* your-name] </label>
<label> Your Email (required) [email* your-email] </label>
<label> Your Subject </label>
<label> Your Message [textarea your-message] </label> [submit "Send"]

…and the output will become:

contact-form-7-on-three-columns

So the takeaway for this method is:

  1. Install Column Shortcodes plugin to enable shortcodes for splitting content on multiple columns
  2. Install Contact Form 7 Shortcode Enabler plugin to allow the use of shortcodes in the CF7 editor
  3. Wrap Contact Form 7 fields with shortcodes like so
    ...cf7 field ...
    and
    ...cf7 field ...
    .

Did you know you can create your own shortcodes? Check out my tutorial for shortcodes.

 

Display Contact Form 7 fields on columns with HTML markup

Above, I show you how to use plugins to extend WordPress default functionality. The next method is about using default/basic HTML markup(like divs) and a bit of CSS to split content into columns. Let`s do this.

I`m going to create a series of classes for the columns: one-half, one-third, last. The CSS code for them is:

.one-half,
.one-third {
	position: relative;
	margin-right: 4%;
	float: left;
        margin-bottom: 20px;

}

.one-half { width: 48%; }
.one-third { width: 30.66%; }

.last {
	margin-right: 0 !important;
	clear: right;
}

@media only screen and (max-width: 767px) {
	.one-half, .one-third {
		width: 100%;
		margin-right: 0;
	}
}

You should insert this code in your child theme(learn more about child themes here) or you could use a plugin for code injection like the Simple Custom CSS plugin.

The .last class removes the margin-right value from the columns for perfect alignment to the container. Also, a media query specifies that if the screen is smaller than 768px(the width of a tablet screen), display columns one under another. In other words, the code creates responsive columns for Contact Form 7.

Edit the CF7 form and wrap it with divs like <div class="one-half"> ... </div>.

<div class="one-half">
<label> Your Name (required) 
     </label>
</div>

<div class="one-half last">
<label> Your Email (required)
    [email* your-email] </label>
</div>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

The output on the website will become:

contact-form-7-on-two-columns

Awesome!

To Conclude…

Whether you plan to show contact form fields or any other type of content on columns, solutions do exist. It`s your task to choose which method fits you well and how you`re going to implement it. Also, keep in mind that your current theme might come with all the tools you need.

Feel free to share in the comments below your thoughts and if you have more questions, you can bet that they will get answered! Cheers!

[Total: 26    Average: 4.7/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.

Join the discussion

  1. Magno Marketing on January 5, 2017 at 9:56 pm Reply

    Thanks! mate!

    1. Madalin Tudose on January 6, 2017 at 1:42 pm Reply

      You`re very welcome! 🙂

  2. Rob on February 9, 2017 at 7:08 pm Reply

    Awesome just what I needed, worked like a charm. Appreciate you posting the functions.php code to save me adding another plugin!

    1. Madalin Tudose on February 10, 2017 at 8:52 pm Reply

      Glad to hear it, Rob! 🙂

  3. Barrie Manners on March 8, 2017 at 1:12 pm Reply

    absolutely amazing work! CSS was so confusing, really appreciate you making the effort to share this!

    1. Madalin Tudose on March 10, 2017 at 7:53 pm Reply

      Hey, you`re very welcome! Thanks for your comment!

  4. Saud Razzak on March 20, 2017 at 11:36 am Reply

    Nice guide!

  5. Meera L on April 18, 2017 at 6:25 am Reply

    thank you

  6. Texo Technologies on April 19, 2017 at 5:46 pm Reply

    Thanks for sharing. How to put submit button in middle

    1. Madalin Tudose on July 21, 2017 at 11:01 am Reply

      Hey, you`ll have to use a class and a bit of CSS to center a button.

  7. Νίκος Καββαδάς on May 17, 2017 at 5:44 pm Reply

    Thanks for sharing!

  8. Barak Lieberman on May 29, 2017 at 7:47 pm Reply

    I used the CSS method and it appears great… BUT it doesn’t allow me to enter any input into the fields that were divided into columns.
    Any ideas to why?
    Thanks!

    1. Madalin Tudose on May 29, 2017 at 8:49 pm Reply

      There might be a z-index issue with your fields. Any chances to share with me a link to your contact page so I can check it out? Thanks!

        1. Madalin Tudose on May 29, 2017 at 9:01 pm Reply

          Here`s a quick fix for you:

          .cf7-style input {
          z-index: 2;
          position: relative;
          }

          Thanks!

          1. Barak Lieberman on May 29, 2017 at 9:03 pm

            You ROCK!!
            Worked like a charm.
            Can you explain to me what was the problem?

          2. Madalin Tudose on May 29, 2017 at 9:07 pm

            You`re very welcome! It`s all about stacking. The fields seemed to be “under” the form. Search more on google about z-index and what it does. Thanks!

          3. Barak Lieberman on May 29, 2017 at 9:12 pm

            Thanks… Now a gift from me…
            You’ve got a line missing in the code you wrote above (I marked the missing code in capital):

            Your Name (required)
            [TEXT* YOUR-TEXT]

            Your Email (required)
            [email* your-email]

            Your Message
            [textarea your-message]

            [submit “Send”]

  9. Sandra Hill on June 21, 2017 at 11:06 pm Reply

    I have more that one contact form on my website. In one of these forms I have checkboxes that have not styling to them, they just go one after the other on the form. I want these to go as two columns. Can you help me with this?

    1. Madalin Tudose on July 21, 2017 at 11:01 am Reply

      Hey, sure, I can help! Please share with me a link to your website/page with the contact form so I can check it out! Thanks!

    2. Eamon Mcknight on March 5, 2018 at 9:39 am Reply

      Hi Sandra
      I have the same issue with cf7 not letting me put checkboxes in a 2 column form.
      Did you find a solution?
      Regards
      Eamon Mcknight

  10. Andre Gurtovoi on June 29, 2017 at 9:58 pm Reply

    Hi there!! I am having trouble to set the space between the two columns. Any tips on how I can fix this? Thank you for your great work!

  11. Alejandro on July 3, 2017 at 11:03 pm Reply

    HTML markup method didn’t work for me.
    It did make the fields half their size, but they’re not displaying side by side. Just one on top of another like by default.

    1. Madalin Tudose on July 21, 2017 at 11:02 am Reply

      You should be removing the blank spaces from your contact form. They usually add lines on the website.

  12. ric on August 23, 2017 at 7:13 pm Reply

    thank you for the sharing the details this helped out a lot.
    Can you help me with the two following?

    – for some reason the headers of each field is not aligned to the input field. They are about 10 pixels behind.

    – when I go under WP customize to change fonts, weights, heights… the lettering if the label fields don’t change on the 2 column items. Only the standard full column fields.

    Can you help me get these 2 resolved?
    Thank you for your time.

  13. Chiewlarn Holiday on September 8, 2017 at 5:27 am Reply

    Thx very much Tudose ^_^

  14. John Gold on October 17, 2017 at 6:07 pm Reply

    Thank you very much! However, it doesn’t seem to work properly with checkboxes? If I put a checkbox in the first column and a text entry field in the second, the form field ends up under the checkbox in the first column.

  15. FOTOdesign69 on October 28, 2017 at 1:25 am Reply

    Nice! It works! 🙂
    Thx!

  16. Paul Antonio Guerrero on October 31, 2017 at 6:34 pm Reply

    Hey Madaline, I’m have trouble with just one detail. The text area width isnt increasing, it stays small, just like your 1/3 name field column would be.

    1. SPACETV.NET on April 24, 2018 at 5:34 pm Reply

      I have the same problem, did you find a solution?

      1. Rajitha Jayasekera on May 19, 2018 at 1:31 pm Reply

        Hey @paul@paulantonioguerrero:disqus I see you have fixed the issue.
        Can you please tell me how you did it?
        I have the same problem

  17. Brian Hwang on November 8, 2017 at 4:40 am Reply

    use this

    1. Heidi Elina on June 6, 2018 at 11:38 am Reply

      Oh my god, thank you so much, Brian. Lifesaver.

  18. Alvin Miles on November 17, 2017 at 6:00 pm Reply

    This work very well. All I wanted was for the email and the send button to be on the same line and nothing else. So I done this:
    [email* email-912 placeholder “Your Email”]

    [submit “Sign Up”]
    It work great.

  19. Urvi Patel on December 10, 2017 at 6:50 pm Reply

    Thanks for sharing! I used the second method and word like a charm!!

  20. Peter Stavrou on December 16, 2017 at 6:38 am Reply

    Thanks heaps! very useful!

  21. Miguel Vallejo on January 14, 2018 at 1:57 pm Reply

    Thanks for sharing! I didn’t want to have another plugin in my already big list of plugins so I tried the functions.php solution. I copied and pasted the code that you show above in the child’s php file and also copied and pasted the corresponding code in the cf7 settings page. It’s still showing the fields in one single column. Am I missing any steps? Thanks!

  22. Erez Elias on January 29, 2018 at 6:27 pm Reply

    awesome! I used the HTML/CSS version and it works beautifully!
    Thanks for sharing!

  23. Luca on March 7, 2018 at 10:11 am Reply

    Hello, I’ve just tried this solution to create a 2 columns form and evereything works well in the desktop version, but when I go in the mobile version the form remains responsive and it becomes a single column form as exptected, but fiels aren’t in the ordfer that I want.

    There’s a way to define the fields order?

  24. Reginald J. Lloyd-Jones on April 25, 2018 at 6:31 am Reply

    Great little post! Thanks for the help. 🙂

  25. Guy Sarkinsky on May 16, 2018 at 11:46 am Reply

    Thanks, useful information.

  26. Sakshi Gurnani on May 21, 2018 at 7:32 pm Reply

    It worked like a charm! Even for someone without a technical background like me. Thank you! 🙂

  27. Cristina on July 25, 2018 at 12:09 pm Reply

    This is super useful, thanks for sharing!

    Do you know if you can display the standard “Your Message” field full width? Mine is displaying only on half of the page, although there’s no code to display it like that.

  28. Victor on October 13, 2018 at 12:30 pm Reply

    thanks a bunch bro this article just saved me. You ROCK!!!

  29. 2appswebbureau on October 27, 2019 at 11:24 pm Reply

    Amazing! So simple and so perfect. Thanks Madalin Tudose

Leave a Comment

Your email address will not be published. Marked fields are required.