Create a Beautiful Grid Layout for Contact Form 7
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
Divi comes with a contact form module that has come along way since version one. While it should fit the needs of most, there are times when a more advanced contact form is needed. If you need an easy-to-use drag-n-drop interface with advanced features like file upload, complex conditional logic, and spam blocking look no further than Gravity Forms. I have used this plugin on several websites and it’s hands-down the best contact form plugin for WordPress. It’s not a free plugin, but it’s well worth the cost depending on your needs.
If you’re on a budget but still need more options than Divi’s built-in contact form, you can’t go wrong with Contact Form 7. This plugin has been installed on millions of websites and is well documented. However, it does have a major drawback. It’s not very pretty. Compared to Divi’s contact form and forms created by Gravity Forms, it’s downright ugly. But it’s weakness is also it’s strength. Rather than adding its own CSS style that you have to override, Contact Form 7 provides a blank canvas that you can easily turn into a beautiful contact form. In this tweak, I’m going to show you how to do just that.
You can view the demo here.
Adding style to Contact Form 7
The first thing we’ll do is add style to the form inputs and buttons. For this, I always reference a great tutorial on making Contact Form 7 look like Divi’s contact form from AgentWP. A simple copy and paste into your child theme’s style.css file will do the trick. For this tutorial, I added a border around the form and add the date picker to one of the styles:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* CONTACT FORM 7 STYLES */ .wpcf7-form { border: 1px solid #EEEEEE; padding-bottom: 20px !important; } .wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-date { background-color: #eee !important; border: none !important; width: 100% !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; font-size: 14px; color: #999 !important; padding: 16px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .wpcf7-submit { color: #2EA3F2 !important; margin: 8px auto 0; cursor: pointer; font-size: 20px; font-weight: 500; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 6px 20px; line-height: 1.7em; background: transparent; border: 2px solid; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; } .wpcf7-submit:hover { background-color: #eee; border-color:#eee; padding: 6px 20px !important; } |
You don’t have to use Divi to use the CSS above. It will make the form look nice on any WordPress website. And of course, you can modify it to fit your needs.
Adding a 12 column grid system
Our next step is to wrap the contact form labels and fields into a grid system. For this, I like to use Simple Grid. This is exactly what it sounds like. A simple grid system based on CSS classes, very similar to Bootstrap, that creates all of the column percentages for you so you don’t have to do the math. It’s a big time saver. Download the zip file and copy the contents of the simplegrid.css file into your child theme’s style.css file.
I did make one adjustment to the .grid class near the top of this file to prevent it from overflowing:
1 2 3 4 5 6 7 |
.grid { width: 100%; max-width: 1140px; min-width: 748px; /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */ margin: 0 auto; overflow: hidden; } |
I simply removed the max and min width:
1 2 3 4 5 |
.grid { width: 100%; margin: 0 auto; overflow: hidden; } |
The best part about adding this grid system to your stylesheet is that it doesn’t conflict with Divi columns AND you can use it anywhere on your site to add up to 12 columns to any layout. This can come in handy since Divi is limited to 4 columns. Now let’s create our contact form and wrap the fields in the appropriate containers for this grid.
Create a contact form using the grid
The index.html file included in the Simple Grid zip file you downloaded earlier has examples of how to create different column layouts. You can use that as a reference for controlling the column width for each form element. I’ve copied and pasted the contact form I created in my demo below.
If you’ve never used Contact Form 7 before, you’ll see a new menu item, Contact, in WordPress after you’ve activated the plugin. Click on Contact -> Add New. Give your new form a title. Copy and paste the contents of the form I created below into the form section of your new contact form. Click Save and you should now have a shortcode for your new contact form just below the form title. You can add the form to any page by copying and pasting the shortcode into the page.
Voila! If you’ve copied all of the styles into your child theme and copied the form below into your new Contact Form 7 form, you should get the same results as the demo. Tweak to your heart’s content.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<div class="grid grid-pad"> <div class="col-1-2"> <div class="content"> <label> First Name (required) [text* first-name] </label> </div> </div> <div class="col-1-2"> <div class="content"> <label> Last Name (required) [text* last-name] </label> </div> </div> </div> <div class="grid grid-pad"> <div class="col-1-2"> <div class="content"> <label> Email (required) [email* your-email] </label> </div> </div> <div class="col-1-2"> <div class="content"> <label> Phone [tel tel-547] </label> </div> </div> </div> <div class="grid grid-pad"> <div class="col-4-12"> <div class="content"> <label> Start Date (required) [date date-577] </label> </div> </div> <div class="col-5-12"> <div class="content"> <label> Your Website [url url-614]</label> </div> </div> <div class="col-3-12"> <div class="content"> <label> Choose an Option [checkbox checkbox-791 "Option One" "Option Two"]</label> </div> </div> </div> <div class="grid grid-pad"> <div class="col-2-12"> <div class="content"> <label> Label 1 [text* label1] </label> </div> </div> <div class="col-2-12"> <div class="content"> <label> Label 2 [text* label2] </label> </div> </div> <div class="col-2-12"> <div class="content"> <label> Label 3 [text* label3] </label> </div> </div> <div class="col-2-12"> <div class="content"> <label> Label 4 [text* label4] </label> </div> </div> <div class="col-2-12"> <div class="content"> <label> Label 5 [text* label5] </label> </div> </div> <div class="col-2-12"> <div class="content"> <label> Label 6 [text* label6] </label> </div> </div> </div> <div class="grid grid-pad"> <div class="col-1-2"> <div class="content"> <label> Subject [text your-subject] </label> </div> </div> </div> <div class="grid grid-pad"> <div class="col-1-1"> <div class="content"> <label> Your Message [textarea your-message] </label> </div> </div> </div> <div class="grid grid-pad"> <div class="col-1-1"> <div class="content"> [submit "Send"] </div> </div> </div> |
1 Comment
Simply wonderful! It has worked very well and was just what I needed.
Cheers!
April 11, 2020