Viewing 4 replies - 1 through 4 (of 4 total)
  • 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

    To “put some fields next to each other” 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.

    Thread Starter Tameto

    (@tameto)

    Hey man thanks a lot.

    I tried with the html but unfortunatelly it looks like is not working…

    Maybe you can have a look?

    http://www.letresorelle.org/#contattaci

    Thanks again!

    Tameto

    Thread Starter Tameto

    (@tameto)

    Sorry actually that page is not online yet.

    Anyways doesn’t matter, but i have another problem.

    I customising my form through custom css and i don’t manage to target a “drop-down menu”

    i tried both with “drop-doun menu” and with “select” wich seems to be what is used in the form.

    Any idea why is not working?

    Thanks

    You could consider using Contact Form 7 Skins to style your Contact Form 7 Forms.

    You can now use the add-on CF7 Skins Ready to put two fields in the same row

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘put two fields in the same row’ is closed to new replies.