How to place CF7 Form Fields side by side

Posted on by

Last Updated on July 24, 2018 by Neil Murray

CF7_Singleline

You can use Ordered List elements to display multiple fields on single line.

HTML:

<ol class="singleline">
<li> <label for="your-name">Your Name (required)&nbsp</label> [text 1="your-name" language="*"][/text] </li>
<li> <label for="your-email">Your Email (required)&nbsp</label> [email* your-email] </li>
</ol>

Added to Form section of CF7 interface.

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;
}

Added to Child Theme style.css

See Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

Above is taken from http://wordpress.org/support/topic/create-field-side-to-side – a question I answered the Contact Form 7 Support Forum.

EXAMPLE:

Error: Contact form not found.