Responsive two columns contact form with Contact Form 7

Tutorial on quick and easy creation of a responsive two columns contact form on WordPress, using the Contact Form 7 plugin and minimal code.

[UPDATED FOR WORDPRESS 6.1.1]

When it comes to contact forms, I admit to having struggled to create a proper, responsive two columns contact form – different themes and plugins always make this a challenge with WordPress.

Nonetheless, if you follow my advice and opt for as simple and as a lightweight theme as possible, you may find that it is actually not as difficult as one can imagine. The new WordPress blocks make this task relatively easy.

My website uses:

Working with the above two, I was able to create a contact form without adding any additional CSS to the website. The code below works like a charm, utilising the existing responsiveness of the wp-block-columns class from WordPress’s core.

<div class="wp-block-columns" style="gap: 5px; margin-bottom: 0!important;">
<div class="wp-block-column" style="margin-top: 0; margin-bottom: 0px;">
  [text* first-name placeholder "First Name"] [text* last-name placeholder "Last Name (required)"]
  </div>
<div class="wp-block-column" style="margin-top: 0; margin-bottom: 0px;">
  [email* your-email placeholder "Email (required)"] [tel* your-mobile placeholder "Phone (required)"]
</div>
</div>
<div class="wp-block-columns" style="gap: 5px; margin-top: -30px;">
<div class="wp-block-column" style="margin-top: 0; margin-bottom: 0px;">
[textarea message placeholder "Your message"]
</div>
</div>
<div style="margin-top: -20px;">
[submit "Send"]
</div>

Here’s how this ends up looking:

Please note, that to make it look like this, you also have to add some custom CSS, to prevent Contact form 7 from adding massive paragraphs everywhere. To do this, go to your Appearance Menu and click on Customise. In the “Additional CSS” section on the left hand side, drop this code and save it:

.wpcf7 p{
  padding: 0;
	margin-top: -5px;
	line-height: 5px;
}

Responsive two columns contact form without Twentig

I will be honest with you and will admit that if you do not have the Twentig plugin something gets bugged in the Contact Form and the spaces around the fields start looking silly on a mobile. To correct this, I simply added some margin to the message box. The final code was this:

<div class="wp-block-columns" style="margin-bottom: 0;">
<div class="wp-block-column" style="margin-top: 0; margin-bottom: 15px;">
  [text* first-name placeholder "First Name"]

  [text* last-name placeholder "Last Name (required)"]
  </div>

<div class="wp-block-column" style="margin-top: 0; ">
  [email* your-email placeholder "Email (required)"]

  [tel* your-mobile placeholder "Phone (required)"]
</div>

</div>
<div style="margin-top: 10px;">
[textarea message placeholder "Your message"]
</div>
<div style="margin-top: 20px;">
[submit "Send"]
</div>

Responsive contact form with centred button

To centre the button on your responsive two columns contact form, add this code to your WordPress customiser:

input.wpcf7-form-control.wpcf7-submit {
display: block;
margin: 0 auto;
}

You’ll get this result:


Responsive contact form with large button

If you’d like to have your Contact Form 7 button in full width, use this code:

input.wpcf7-form-control.wpcf7-submit {
width: 100%;
}

This is the result:

And if you simply want to have it somewhat larger but still not huge, you can opt for this:

input.wpcf7-form-control.wpcf7-submit {
display: block;
margin: 0 auto;
width: 60%;
}

This is how it looks:


Centering the Send button of a specific contact form only

If you’re looking for a way to centre the button of one specific contact form only, things become just a little tricky. You first need to create the form, add it to a page and go to a preview mode. Once you do this, you’ll be able to see the ID of this specific form. 

In Google Chrome, this is done simply by placing your mouse cursor somewhere on the form and clicking Inspect. You then need to select the code of the entire form and you’ll be able to see the ID. It should look something like this:

In Safari, you will first need to enable the Develop menu before you can do this. To enable it, you need to go to Safari’s Properties => Advanced => Select the “Show Develop menu in menu bar”. Once done, you can go to your form, right-click over it and select “Inspect Element”. You’re looking for this:

The ID is the little snippet starting with #wpcf7 and followed by letters and numbers. In the case of the contact form you see here, this is #wpcf7-f454-p451-01. When you get this code, you should go to your WordPress Customiser, and add the following code (replacing the ID with the one of your form):

#wpcf7-f6-p2-o1 .wpcf7-form-control.wpcf7-submit {
display: block;
margin: 0 auto;
}

This will affect only the button on this one contact form, without affecting the other ones.

Good luck!

Nina Alexander
Nina Alexander

Nina Alexander is a seasoned Chartered Marketer and CIM Member with over 20 years of hands-on marketing expertise. Having held positions such as Marketing Director and CMO, Nina has consulted for over 200 companies, with experience spanning cutting-edge sectors like data visualisation, digital health, blockchain, software development, and SaaS. Nina's contributions to education include creating training content for the L4 and L6 university-grade education programmes, now leveraged by marketing executives and managers at global giants like Vodafone, Centrica, and Adidas. Today, Nina works in consulting technology organisations on marketing automation, and empowering C-level personnel with training on the effective structuring and operation of marketing departments.

ADD CONTACT

Mastodon

Articles: 13

Leave a Reply

Your email address will not be published. Required fields are marked *