Create field side to side

Viewing 1 replies (of 1 total)
  • Neil Murray

    (@buzztone)

    10 years, 4 months ago

    I 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* your-name] </li>
<li> <label for="your-email">Your Email (required)&nbsp</label> [email* your-email] </li>
</ol>

    Added to Form section of CF7 interface. <label> tags 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;
}

    Added to Child Theme style.css

    See Styling Contact Form 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.

Viewing 1 replies (of 1 total)
  • The topic ‘Create field side to side’ is closed to new replies.