Viewing 1 replies (of 1 total)
  • You can use Ordered Lists to display multiple fields on a single line

    HTML:

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

    Added to Form section of CF7 interface. Labels are added for improved accessibility.

    CSS:

    .wpcf7-form ol.singleline {
    list-style: none;
    margin: 0;
    }
    
    .wpcf7-form ol.singleline li{
    display: inline-block;
    float: left;
    margin-right: 10px;
    padding-right: 10px;
    }

    Add via Child Theme or use custom CSS plugin.

    Or, you could also use the add-on CF7 Skins Ready to make a 2 column contact form.

Viewing 1 replies (of 1 total)
  • The topic ‘Multiple Columns’ is closed to new replies.