Search code examples
csswordpresscontact-form-7

CSS Contact Form 7 Spacing

I can't for the life of me figure out the spacing on my form.

As you'll see the checkboxes are all bunched up and look rubbish... can you league of coding legends help?

http://200620.co.uk/

This is the layout... 

    <div class="wpcf7-wrap">
<div class="col-sm-6">
     [text* your-name placeholder "Name:"]
  </div>

<div class="col-sm-6">
     [text* your-email placeholder "Email:"]
  </div>

<div class="col-sm-6">
     [select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"]
  </div>  

<div class="col-sm-6">
     [select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"]
  </div>

<div class="col-sm-6">
     [text your-text-1 placeholder "Dietary Requirements:"]
  </div>

<div class="col-sm-6">What do you drink?
[checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]
</div>

<div class="col-sm-6">
     [text your-text-3 placeholder "What do you want to hear?"]
  </div>

<div class="col-sm-12">
     [textarea your-text-4 placeholder "Any Special Message for us?"]
  </div>

  <div class="col-xs-12 wpcf7-button-wrap">
    [submit "RSVP Baby"]
  </div>
</div>
Solution

  • Hopefully this puts you on the right track. I would move your checkboxes to after the other 2x2 columns so that it's all the way across. Also.. Wrap the whole thing in a div. Be careful not to add extra line breaks on your form, as Contact Form 7 uses the "Auto-P" function.

    Screenshot

    /*this should make the row stand on it's own*/
.checkbox-row {
  margin: 1.5rem 0 .5rem 0;
}
    <div class="wpcf7-wrap">
    <div class="col-sm-6"> [text* your-name placeholder "Name:"] </div>
    <div class="col-sm-6"> [text* your-email placeholder "Email:"] </div>
    <div class="col-sm-6"> [select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"] </div>
    <div class="col-sm-6"> [select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"] </div>
    <div class="col-sm-6"> [text your-text-1 placeholder "Dietary Requirements:"] </div>
    <div class="col-sm-6"> [text your-text-3 placeholder "What do you want to hear?"] </div>
    <div class="col-sm-12 checkbox-row"><div>What do you drink? [checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]</div></div>
    <div class="col-sm-12"> [textarea your-text-4 placeholder "Any Special Message for us?"] </div>
    <div class="col-xs-12 wpcf7-button-wrap"> [submit "RSVP Baby"] </div>
</div>