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!
This is perfect! I been looking everyplace for a fix. Thank you 😀
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%;
}
}
implemented the piece of code as is
thanks for the post
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.
If you have any questions, do not hesitate to ask!
Thank you. Good!
This is a great article and was a big help for my project! Thanks so much!
Works like a charm