Can a form made with CF7 contain two columns and be responsive?
Yes. you could consider using Contact Form 7 Skins to style your Contact Form 7 Forms.
You can now use the add-on CF7 Skins Ready to make a 2 column contact form.
See also the following CF7 Skins Documentation which might help you:
Contact form 7 form in columns – shows how to place form fields vertical columns using the CF7 Skins Ready Add-on.
I’ve tried the code examples from other similar posts that uses ordered lists in a column and while that works fine for a desktop, it is ugly as all get out for mobile as CF7 appears to only be responsive if it is in a single line one column display.
I fail to understand why developers today still ignore basic responsive mobile development for their products for REAL WORLD USE.
Thanks Dave
Also, here’s the code example they share that is claimed to be 2 columns and responsive and what it looks like on my site, this example is supposed to be 3 columns.
<fieldset>
<legend>column</legend>
<ol class="column">
<ol>
<li> <strong>Ready Class column</strong> </li>
<li> Item1 [text item1a] </li>
<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
<li> Item2 [text item2a] </li>
</ol>
<ol>
<li> <strong>Ready Class column</strong> </li>
<li> Item1 [text item1b] </li>
<li> Item2 [text item2b] </li>
<li> Item3 [text item3b] </li>
<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
</ol>
</ol>
<ol class="column box">
<ol>
<li> <strong>Ready Class column</strong> </li>
<li> Item1 [text item1c] </li>
<li> Item2 [text item2c] </li>
<li> Item3 [text item3c] </li>
<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
</ol>
<ol>
<li> <strong>Ready Class column</strong> </li>
<li> Item1 [text item1d] </li>
<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
<li> Item2 [text item2d] </li>
</ol>
<ol>
<li> <strong>Ready Class column</strong> </li>
<li> Item1 [text item1e] </li>
<li> Item2 [text item2e] </li>
<li> Item3 [text item3e] </li>
<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
</ol>
</ol>
</fieldset>
FYI – Here is the exact way to do it, html and css included and it really is column based and responsive.
http://www.wpsnippet.com/creating-responsive-two-column-form-using-contact-form-7/
@alpinevp
The code you have pasted has no CSS to it 🙂 – Some CSS classes have been used in the code, you need CSS + HTML to make a form responsive. You won’t be able to make your form responsive with only HTML.
The above code shows you how to use CF7 Skins Ready classes to make your form a multi-column form
You definitely can not make your CF7 Form responsive with this code if you are NOT using CF7 Skins Ready which is an add-on to the free CF7Skins plugin.
