CSS/HTML Trick: Creating A Responsive Contact Form With Contact Form 7

When creating a website, it is very important that it is mobile-friendly. In this tutorial, you’ll learn how to create a responsive contact form with Contact Form 7 for WordPress.

Step 1: Install Contact Form 7

If you do not already have Contact Form 7 installed, then you can install it via your WordPress dashboard by going to Plugins – Add New, then search for Contact Form 7, and click “Install” then active it.

Step 2: Create a New Contact Form

In your WordPress dashboard, go to Contact – Add New.

Click “Add New”.

Create a title. I call mine “Responsive Contact Form”.

Delete the contents in the text area for “Form”.

Add the following HTML:

<div id="two-column">
<div id="left">
<p>Name
[text* your-name]</p>
</div>
<div id="right">
<p>Email
[email* your-email] </p>
</div>
<p>Subject
[text* your-subject] </p>
<p>Your message
[textarea your-message]</p>
<p>[submit "Send"]</p>
</div>

Click “Save”.

Step 3: Add CSS To Make a Responsive Contact Form

This is where the magic happens. All things you would change are in bold.

Open your CSS editor–Appearance – Edit CSS–in your WordPress dashboard.

Add the following CSS:

#two-column{
width: 100%;
}
#two-column #left{
width: 49%;
float: left;
}
#two-column #right{
float: right;
width: 49%;
}
#two-column p{
margin-bottom: 12px;
}
#two-column input[type="text"]{
border:none;
border:1px solid #503424;
font-size :14px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 2px;
width: 100%;
padding: 5px;
height: 40px;
background: #EBDFCD;
}
#two-column #right input[type="email"], #two-column #left input[type="text"]{
width: 100%;
height: 40px;
background: #EBDFCD;
}
#two-column textarea {
position: relative;
padding: 5px;
border:1px solid #503424;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 2px;
width: 100%;
height: 200px;
background: #EBDFCD;
}
#two-column input[type="submit"]{
padding:8px 18px;
background:#EBDFCD;
color:#503424;
border: 1px solid #503424;
float:right;
font-size: 14px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#two-column input[type="text"]:focus, #two-column textarea:focus{
background: #EBDFCD
border: 1px solid #A7864D;
}
#two-column input[type="submit"]:hover{
background:#A7864D;
color:#EBDFCD;
border: 1px solid #503424;
}
input[type="text"], input[type="password"], input[type="email"], textarea, select {
height: 40px;
width: 100%;
}

Step 3a: Back to Single Column for Mobile Devices

@media only screen and (max-width: 600px) {
#two-column #left {
width: 100%;
float: none;
}

#two-column #right {
float: none;
width: 100%;
}

}

Save the CSS.

You may want to change the max-width size, depending on your needs.

Step 4: Embed the Responsive Contact Form Using the Shortcode

You can find the shortcode in your WordPress dashboard under Contact – Contact Forms.

    Name

    Subject

    Your message

    After you’ve embedded it on your desired page and saved the page, check to see if the responsive contact form looks like you want it to. Click on each text box area to make sure your theme’s default CSS isn’t overriding the CSS you’ve just added.

    If the colours do not match the CSS you added, then add “!important” after each hex colour.

    I hope you found this tutorial useful. If you have any questions or need clarification about any of the steps, please leave a comment!

    Looking For More Tutorials?

    Check out our knowledge base

    We are constantly updating our FAQ and Knowledge Base. If you have a question to which you need answers and don’t see it in our FAQ and Knowledge Base, contact us and we’ll happily answer and add it to our FAQ!

    9 Responses to CSS/HTML Trick: Creating A Responsive Contact Form With Contact Form 7

    1. This is great – my form resizes OK. But on mobile screens under a certain size it it too squashed to use properly. Is it possible to revert the form to a single column layout on smaller screens?
      Thanks

      • Hi Kat,

        Yes, it is. Simply add the following CSS. You may want to change the max-width size, depending on your needs.

        @media only screen and (max-width: 600px) {

        #two-column #left {
        width: 100%;
        float: none;
        }

        #two-column #right {
        float: none;
        width: 100%;
        }

        }

    2. Hi,
      This is perfect. BTW I have a question?
      I need 3 columns, and each column is to have 3 fields.
      In total we have 12 fields + subject and textarea. 3 days I have a problem with that.

      Please help

      • Hi Steven,

        I’m glad you found the tutorial useful.

        (Hopefully the formatting in the comment survives. If not, I’ll right a post about this and reply again when it’s up).

        The area with the three column, you’d build your form something like below:


        <p>Subject
        [text* your-subject]</p>
        <div id="three-column">
        <div id="left">
        <p>Name
        [text* your-name]</p>
        <p>Phone Number
        [tel* tel-951]</p>
        <p>Website
        [url* url-900]</p>
        </div>
        <div id="center">
        <p>Email
        [email* your-email] </p>
        <p>Another Field
        [text* your-name]</p>
        <p>File
        [file* file-101]</p>
        </div>
        <div id="right">
        <p>Subject
        [text* your-subject] </p>
        <p>Another Field
        [text* your-name]</p>
        <p>Another Field
        [text* your-name]</p>
        </div>
        </div>
        <div id="full">
        <p>Your Message
        [textarea your-message]</p>
        <p>[submit "Send"]</p>
        </div>

        The important part, is that you put whatever fields you want in each column, with the top subject field (and name field if applicable) and bottom text field outside of the column divs.

        Now the CSS. The below CSS includes the response code. It will go from three columns on desktop, to two column on tablet, to one column on a phone. You can ignore the padding and the border if you like. I just had to add those to make tel and email fields have the same border and padding as the other field.

        #three-column {
        width: 100%;
        }
        #left, #center, #right {
        float: left;
        width: 33%;
        }
        #full {
        float: none;
        }
        #three-column input[type="text"], #three-column input[type="email"], #three-column input[type="tel"], #three-column input[type="url"], #three-column textarea {
        width: 98%;
        padding: 6px 0;
        border: 1px solid #ccc;
        }
        input[type="text"], textarea {
        width: 100%;
        }
        @media screen and (max-width: 980px) {
        #left {
        float: left;
        width: 49%;
        }
        #center {
        float: right;
        width: 49%;
        }
        #right {
        float: none;
        width: 49%;
        }
        #full {
        float: left;
        width: 100%;
        }
        }
        @media screen and (max-width: 600px) {
        #left, #center, #right {
        float: left;
        width: 100%;
        }
        #full {
        float: left;
        width: 100%;
        }
        }

        Here are some images of the three.

        Desktop Three Column Contact Form

        Tablet Three Column Contact Form

        Phone Three Column Contact Form

        If you have any questions, do not hesitate to ask!

    Leave a reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.