See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms
To “put some fields next to each other” I use Ordered List elements to display multiple fields on single line.
HTML:
<ol class="singleline">
<li> <label for="cf7-phone">Phone</label> [text cf7-phone 15/]</li>
<li> <label for="cf7-mobile">Mobile</label> [text cf7-mobile 15/]</li>
</ol>
Added to Form section of CF7 interface. Labels are added for improved accessability.
CSS:
.wpcf7-form .singleline ol {
list-style: none;
margin: 0;
}
.wpcf7-form .singleline li{
display: inline-block;
float: left;
margin-right: 10px;
padding-right: 10px;
}
Add via Child Theme or use custom CSS plugin.
Thread Starter
Tameto
(@tameto)
Hey man thanks a lot.
I tried with the html but unfortunatelly it looks like is not working…
Maybe you can have a look?
http://www.letresorelle.org/#contattaci
Thanks again!
Tameto
Thread Starter
Tameto
(@tameto)
Sorry actually that page is not online yet.
Anyways doesn’t matter, but i have another problem.
I customising my form through custom css and i don’t manage to target a “drop-down menu”
i tried both with “drop-doun menu” and with “select” wich seems to be what is used in the form.
Any idea why is not working?
Thanks
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 put two fields in the same row