Categories
Website Creation

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.

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="margin-bottom: 0;">
<div class="wp-block-column" style="margin-top: 0; margin-bottom: 0;">
  [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: 0;">
[textarea message placeholder "Your message"]
</div>
<div style="margin-top: 20px;">
[submit "Send"]
</div>

Here’s how this ends up looking:


    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:

    Responsive two columns contact form full width button

    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!

    Leave a Reply

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