• Hi,

    I am trying create 2 columns in contact form 7. I have tried all the options in other posts but none seem to work for me.

    I can create 3 columns using this code:
    <div class=”fusion-one-third one_third fusion-column”>1. Delegate’s name [text Delegate1name 30/]</div>
    <div class=”fusion-one-third one_third fusion-column”> Delegate’s position in school [text Delegate1positioninschool 30/]</div>
    <div class=”fusion-one-third one_third fusion-column last”> Delegate’s email (for confirmation)[email Delegate1email 35/]</div>

    But for the life of me I cannot create just 2 columns. Could someone let me know how to adapt the above to make 2 instead of 3 columns.

    Thanks so much.

    https://wordpress.org/plugins/contact-form-7/

Viewing 6 replies - 1 through 6 (of 6 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. 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.

    If you find you need more detailed advice, after reading and working through the above links, please include a link to your Contact Form 7 form, so others here can examine your form in detail using Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements and provide you with a possible solution.

    Thread Starter maryeden

    (@maryeden)

    Hi,

    Thanks so much for replying but I am new to all this so don’t really understand what I’m reading!

    I can’t give you the link for my contact form as I haven’t been able to do it how I want it yet.

    I just wondered if anyone could give me the code so that the name and email fields appear on the same line instead of one below the other:

    So like this: Name_________________ Email_________________

    As I said, I found the code to make 3 columns but for the life of me can’t find the code for just 2 columns. Basically I just want to know what to replace in <div class=”fusion-one-third one_third fusion-column”> to make 2 columns instead of 3.

    Thanks again for any help offered.

    Did you try fusion-one-half and/or one_half instead of ..third in class attribute?

    Thread Starter maryeden

    (@maryeden)

    Hi – I did try that but oddly enough it didn’t work!

    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 make multiple columns

    Thread Starter maryeden

    (@maryeden)

    I’ve just downloaded CF7 Skins – it’s really nice, thank you so much for letting me know about this.

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

The topic ‘Columns’ is closed to new replies.