Styling Contact Form 7 fields

Question

We are using wordpress plugin contact form 7 and want to specify the width of the subject field (assume answer would apply to setting width of any field) and relocate the Your Email next to the Your Name field. Result would be Email and Name on one line, Subject full width underneath, Your Message underneath Subject. Thanks

Answer 1

I din't try it, but have a try yourself:

Contact Form 7 uses something like this:

<p>Your Name (required)<br />
    [text* your-name] </p>

Instead of using paragraph tag (<p>) use span (<span>), and some inline CSS, like:

<span style="width: 48%; float: left; position: relative;">Your Name (required)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Your Email (required)<br />
    [email* your-email] </span>

width: 48% will let you do some margin things. Then use a <div> to clear the float from all sides:

<div style="clear:both;"></div>

Then the other codes:

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

So the whole bunch of codes will be:

<span style="width: 48%; float: left; position: relative;">Your Name (required)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Your Email (required)<br />
    [email* your-email] </span>
<div style="clear:both;"></div>

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

DON'T FORGET TO CHANGE THE SPECIFIC SLUGS LIKE your-email, your-subject SPECIFIC TO YOUR CONTACT FORM IDs.
Happy Coding!

Answer 2

Much more simple than the previous answer:

add classes to your input fields in the form builder - [text* your-name class:your-name]

Then style it in your CSS file.

Example:

#wpcf7-f613-p57-o1 form .your-name {width:48%;} - Where #wpcf7-f613-p57-o1 is the id of the form you're working with.