Arranging form fields side by side

  • jamiejohnson37

    (@jamiejohnson37)


    10 years ago

    Hi,

    Can you tell me how to arrange the form fields on the page? The default for stacks each field on top of one another, however I want to to place two fields next to each other (across the page).

    Column short codes would normally accomplish this but arent supported in the contact form.

    Thanks,
    Jamie

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 1 replies (of 1 total)

  • I use Ordered List elements to display multiple fields on single line.

    HTML:

    <ol class="singleline">
<li> <label for="cf7-phone">Phone</label> [text cf7-phone 15/]</li>
<li> <label for="cf7-mobile">Mobile</label> [text cf7-mobile 15/]</li>
</ol>

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

    Add via Child Theme or use custom CSS plugin.

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

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

Viewing 1 replies (of 1 total)
  • The topic ‘Arranging form fields side by side’ is closed to new replies.