Styling Contact Form 7 fields [closed]

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!

Related Posts: