Create Contact Form 7 columns

Creating or adding Contact Form 7 columns is easier than you think. Most WordPress templates still deliver the contact forms as standard. Unfortunately, these usually don’t look nice because the fields are displayed one below the other and each has a width of 100%. In this tutorial we would like to show you how you can quickly add columns to your template yourself and optimize it on the go.

1. Requirements for Contact Form 7 columns

Use of Contact Form 7

In this tutorial we will assume that you are using Contact Form 7. In our experience, this plugin is ideal for most websites and very easy to install / configure. If you don’t have the plugin yet, you can simply download it from the official plugin page or add it directly to your WordPress backend under “Plugins”> “Install”. Of course, we recommend that you safeguard the whole thing sensibly against spam. In another post we explain how you can set up Contact Form 7 with reCaptchav3 and thus secure it.

Option A – Using WPBakery Page Builder

Many websites use the WPBakery Page Builder. This already comes with some CSS classes that we can build on very quickly. In Chapter 3 – Customization with WPBakery Page Builder, we will show you how you can use WPBakery Page Builder to quickly add two columns to your Contact Form 7 contact form. Of course we also have a general option B that will work on every website.

Option B – use of classic CSS tools

To ensure that our tutorial also works 100% on your website, we will of course also show you under Chapter 4 – Customization with classic CSS how you can integrate two columns into your Contact Form 7 contact form on every WordPress website.

2. Create an example form

As a first step, you should now create an example or test form with which you can then test. Of course, if you already know Contact Form 7, you should already be familiar with this step.

In this example we take the standard contact form. The standard configuration without adjustments is as follows:

 Dein Name
    [text* your-name] 

 Deine E-Mail-Adresse
    [email* your-email] 

 Betreff
    [text* your-subject] 

 Deine Nachricht (optional)
    [textarea your-message] 

[submit "Senden"]

The contact form on the website will then look like this:

Standard Contact Form 7

As expected, the input fields are displayed with a width of 100% and thus one below the other. However, some of the fields may not need the full width at all and could also be displayed next to each other. This makes the contact form less long and more compact. The website is therefore gaining clarity. Classic examples are “street and house number” or “post code and city”.

3. Customization with the WPBakery Page Builder

In order to modify the contact form so that you can display two input fields in adjacent columns, we have to do two things:

  1. Adaptation of the contact form in the Contact Form 7 settings. We do this very simply by adding two columns to div tags that are already known to the WPBakery Page Builder. For this we use the CSS class “vc_col-sm-6“, Which assigns a width of 6 columns to the associated div tag. In addition, I assign another CSS class to the left or right column (“column-left” or. “column-right“) Which will later only be used for optical adjustments. It all looks like this and is already optimized for the mobile view:
    <div class="vc_col-sm-6 spalte-links">
    <label> Dein Name
        [text* your-name] </label>
    </div>
    
    <div class="vc_col-sm-6 spalte-rechts">
    <label> Deine E-Mail-Adresse
        [email* your-email] </label>
    </div>
    
    <label> Betreff
        [text* your-subject] </label>
    
    <label> Deine Nachricht (optional)
        [textarea your-message] </label>
    
    [submit "Senden"]
    

  2. Adjustments to the CSS code . In general, the multi-column display should already work now. However, we want to spruce up the whole thing with the following CSS code:
    .vc_col-sm-6.spalte-links {
    	padding-left: 0px;
    }
    .vc_col-sm-6.spalte-rechts {
    	padding-right: 0px;
    }
    @media (max-width: 767px) {
    .vc_col-sm-6.spalte-links {
    	padding-right: 0px;
    }
    .vc_col-sm-6.spalte-rechts {
    	padding-left: 0px;
    }
    }
    

    This CSS code ensures that the newly created columns on the outside are flush with the rest of the contact form.

After you’ve worked through these points, it should now look like this:

Standard Contact Form 7 with two columnsStandard Contact Form 7 with two columns

4. Adaptation with classic CSS

In order to use classic CSS tools to modify the contact form so that you can display two input fields in adjacent columns, we have to do two things:

  1. Adaptation of the Contact Form 7 contact form. We do this very easily by using standard div tags and adding CSS classes to them, which we will define in the second step:
    <div class="reihe">
    <div class="spalte-1">
    <label> Dein Name
        [text* your-name] </label>
    </div>
    <div class="spalte-2">
    <label> Deine E-Mail-Adresse
        [email* your-email] </label>
    </div>
    </div>
    
    <label> Betreff
        [text* your-subject] </label>
    
    <label> Deine Nachricht (optional)
        [textarea your-message] </label>
    
    [submit "Senden"]
    

  2. Now we have to add the appropriate CSS code. The code below contains both the normal CSS code and the CSS code for the responsive design (optimized for mobile devices). This ensures that with small devices (whose width is less than 480px) the columns are resolved again and the input fields are displayed one below the other.
    .reihe {
    	display: table;
    }
    .spalte-1 {
        display: table-cell;
        padding-right: 5px;
    }
    .spalte-2 {
        display: table-cell;
        padding-left: 5px;
    }
    /*Responsive Design*/
    @media (max-width: 480px) {
    	.reihe {
    		display: block;
    		border: 1px solid green;
    	}
    	.spalte-1 {
        display: block;
        padding-right: 0px;
    	}
    	.spalte-2 {
        display: tblock;
        padding-left: 0px;
    	}
    }
    

After you’ve worked through these points, it should now look like this:

Standard Contact Form 7 with two columns using classic CSSStandard Contact Form 7 with two columns using classic CSS

5. Conclusion of the Contact Form 7 columns

Hopefully, with a few simple steps, you have successfully integrated the HTML and CSS code into your website. Your contact form should now have at least two columns. Of course, you can still adapt the code accordingly so that you not only display two, but three or four columns side by side. Of course, here you have to adapt the code to your needs.

If you have any questions about setting up multi-column contact forms, please do not hesitate to contact us.

Previous post multi-column content on the start page »perun.net
Next post This is how you use the blocks optimally