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.

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!