How to align checkbox with label?

The link you sent, the label element is set to display:block, which means it’s going to automatically drop down to the next line. In order for it to show next to the checkbox, it will need to have to be set to display:inline or display:inline-block, and then it will appear on the same line.

Check this url:
https://contactform7.com/custom-layout-for-checkboxes-and-radio-buttons/

I prefer a vertical alignment when using multiple checkboxes. That way you can have multiple lines of label text perfectly aligning on the right side of the checkbox. When you use inline or inline-block, its possible that they will align to the left (underneath) of the checkbox.

So the stylesheet should be:

span.wpcf7-list-item { display: table-row; }
span.wpcf7-list-item * { display: table-cell; }

But … this plugin (Mailpoet – Contact Form 7 Integration) does not have the same element structure (??) as cf7. So you have to do some custumizing yourself in your cf7-dashboard. I solved it like this: place your Mailpoet-Signup-form-tag inside a div and give it a class name (like ‘parentdiv’) and do not check the ‘label inside span’ in your Mailpoet-Signup-generator on your cf7-dashboard.

I added this to my stylesheet:

div.wpcf7 .parentdiv{
    position: relative;
}
div.wpcf7 .parentdiv label{
    margin-left:25px;
    display:block;
}
div.wpcf7 .parentdiv span[class*="mailpoetsignup"]{
    position:absolute;
    left:0px;
    top:0px;
}

Question for Jesse:
Why haven’t you programmed your plugin in the same element structure as cf7. So with the class ‘wpcf7-form-control’ as a parent span-element (not added to the checkbox) and ‘wpcf7-list-item’ as a child and ‘wpcf7-list-item-label’ as a span element (not as label element).

Thanx again Jesse, Martin ??

Hey Martin,

I just took over this plugin and did not do the initial development. It was developed by someone else that did not have time to answer support questions or provide fixes.

Unfortunately, changing the formatting now wouldn’t be an easy thing due to the amount of users that use the plugin. If you’d like to discus further, or would like to help, create a ticket or fork over on github for use to collaborate on.

OK cheers!

Thanks but how do I change the label element? I’m not so familiar with CSS, can it be done in the tag? Currently my tag looks like this:

<p>Newsletter – Dapatkan post, info & analisis kewangan terkini!
[mailpoetsignup mailpoetsignup-215 mailpoet_list_4 label-inside-span “Saya mahu!”] </p>

If you’re not familiar with css try this:

Current code:

<p>Newsletter - Dapatkan post, info & analisis kewangan terkini!
[mailpoetsignup mailpoetsignup-215 mailpoet_list_4 label-inside-span "Saya mahu!"] </p>

Replace by

<style>
div.wpcf7 .saya-mahu-box{
    position: relative;
}
div.wpcf7 .saya-mahu-box label{
    margin-left:25px;
    display:block;
}
div.wpcf7 .saya-mahu-box span[class*="mailpoetsignup"]{
    position:absolute;
    left:0px;
    top:0px;
}
</style>
<p>Newsletter - Dapatkan post, info & analisis kewangan terkini! </p>
<div class="saya-mahu-box">
[mailpoetsignup mailpoetsignup-215 mailpoet_list_4 "Saya mahu!"]
</div>

Do not use ‘ label-inside-span’, otherwise it wil not work. The span and label element are generated bij the plugin. There are also a few   characters programmed (none breaking space) . This wil cause an extra line (blank) underneath the checkbox.

Hopefully it woks for you.

Martin

oh it did not show:
There are also a few &nbsp characters programmed

If you want to see what html is generated try ‘right-click > inspect element’ in your browser (like chrome)