Horizontal Form

The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements. To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

See Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS.

If you find you need more detailed advice, after reading and working through the above link, please include a link to your Contact Form 7 form, so others here can examine your form in detail using Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements and provide you with a possible solution.

davmerit: https://travelingtaylor.com/ the contact form on the that page is pretty simple but I’d like “Name”, “Email”, and “Send” to be all on the same line.

buzztone: I tried using Contact Form 7 Skins and it didn’t do anything.

I would very much like to accomplish that too, is there a clear how-to somewhere?

I used the following code:

<div class=”row”>

<div class=”span_3 col”>
<div class=”minimal-form-input”>
<label><span class=”text”>
<span class=”text-inner”>Name<span>*</span></span></span>
</label><br>
<span class=”wpcf7-form-control-wrap your-name”>
<input type=”text” name=”name” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required” aria-required=”true” aria-invalid=”false”></span>
</div>
</div>

<div class=”span_3 col”>
<div class=”minimal-form-input no-text”>
<label><span class=”text”><span class=”text-inner”> Surname<span>*</span></span></span></label><br>
<span class=”wpcf7-form-control-wrap surname”>
<input type=”email” name=”surname” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email” aria-required=”true” aria-invalid=”false”></span>
</div></div>

<div class=”span_3 col”>
<div class=”minimal-form-input no-text”>
<label><span class=”text”><span class=”text-inner”>Email address<span>*</span></span></span></label><br>
<span class=”wpcf7-form-control-wrap email-address”>
<input type=”text” name=”your-mail” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text” aria-invalid=”false”></span>
</div>
</div>

<div class=”span_3 col”>
<div class=”minimal-form-input no-text”>
<label><span class=”text”><span class=”text-inner”>Phone number<span>*</span></span></span></label><br>
<span class=”wpcf7-form-control-wrap email-address”>
<input type=”text” name=”phone-number” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text” aria-invalid=”false”></span>
</div>
</div>

</div>

Worked 100%. on latest WordPress.

• This reply was modified 8 years ago by chauque90.
• This reply was modified 8 years ago by chauque90.