[Plugin: Fast Secure Contact Form] Multi checkbox not displaying inline

CSS in your theme is causing it.

Do this as a test:
In Admin, click on Appearance, Themes.
Temporarily change your theme to the stock theme:
“WordPress Default” (default for WP version 2.0+)
“Twenty Ten” (default for WP version 3.0+)
“Twenty Eleven” (default for WP version 3.2+)
It does not cause any harm to temporarily change the theme and change back.
Does it work properly now?
If it does, then the theme you are using is the cause.

Help with theme CSS issues can be provided on the Premium Support Form
https://www.fastsecurecontactform.com/support

Was the theme.

Thanks Mike for great plug-in. The code below worked for aligning labels with boxes. If you have a solution for aligning everything on a single line, I’d appreciate it. I already made .fsc_data_container wider to accommodate the full lenght line.

For those having same issue this custom CSS added to your main theme should work:
#si_contact_ex_field1_1_1 { display:inline; margin:0;}
#si_contact_ex_field1_1_2 { display:inline;margin:0;}
#si_contact_ex_field1_1_3 { display:inline;margin:0;}
*repeat for each box and its associated number as seen here.
** if this is for a form other than form 1 I believe you’ll also have to change the field numbers as well as checkbox # but not sure. You can check correct ID with firebug or other app.

the margin code is optional as I had much too much space between lines of checkboxes.
This however, has not put all 3 checkboxes on same line as I had wished but it did put the labels next to checkboxes at least.

Hi Mike,

One more question if I may.
There’s a lot of vertical spacing between the 3 checkbox lines and from its title too.

When viewing html from firebug I see this code and there’s some line breaks in there and pretty sure that’s the reason for all that extra spacing.

<div style="text-align: left; padding-top: 0px; margin-bottom: 2px; ">
<label>Interests:</label>
</div>
<div style="text-align: left; ">
<span style="white-space: nowrap; ">
<br/> /*line break here*/
<input type="checkbox" style="width: 13px; " id="si_contact_ex_field1_1_1" name="si_contact_ex_field1_1" value="selected"/>
<label style="display: inline; " for="si_contact_ex_field1_1_1">Deep Tissue Massage</label>
</span>
<br/> /*line break here*/
<span style="white-space: nowrap; ">
<br/> /*line break here*/
<input type="checkbox" style="width: 13px; " id="si_contact_ex_field1_1_2" name="si_contact_ex_field1_2" value="selected"/>
<label style="display: inline; " for="si_contact_ex_field1_1_2">Akashic Record Sessions</label>
</span>
<br/> /*line break here*/
<span style="white-space: nowrap; ">
<br/> /*line break here*/
<input type="checkbox" style="width: 13px; " id="si_contact_ex_field1_1_3" name="si_contact_ex_field1_3" value="selected"/>
<label style="display: inline; " for="si_contact_ex_field1_1_3">Life Coaching Sessions</label>
</span>
</div>

I can’t seem to find where to remove those. Can u guide me please?

Thanks a bunch!

trying this backtick thing again… this is an edit…

oups.. goofed I guess here it is same post as above with code in proper brackets I hope. sorry I’m french and don’t know what backtick is.

Hi Mike,

One more question if I may.
There’s a lot of vertical spacing between the 3 checkbox lines and from its title too.

When viewing html from firebug I see this code and there’s
there and pretty sure that’s the reason for all that extra spacing.

‘<div style=”text-align: left; padding-top: 0px; margin-bottom: 2px; “>
<label>Interests:</label>
</div>
<div style=”text-align: left; “>
<span style=”white-space: nowrap; “>

<input type=”checkbox” style=”width: 13px; ” id=”si_contact_ex_field1_1_1″ name=”si_contact_ex_field1_1″ value=”selected”/>
<label style=”display: inline; ” for=”si_contact_ex_field1_1_1″>Deep Tissue Massage</label>
</span>

<span style=”white-space: nowrap; “>

<input type=”checkbox” style=”width: 13px; ” id=”si_contact_ex_field1_1_2″ name=”si_contact_ex_field1_2″ value=”selected”/>
<label style=”display: inline; ” for=”si_contact_ex_field1_1_2″>Akashic Record Sessions</label>
</span>

<span style=”white-space: nowrap; “>

<input type=”checkbox” style=”width: 13px; ” id=”si_contact_ex_field1_1_3″ name=”si_contact_ex_field1_3″ value=”selected”/>
<label style=”display: inline; ” for=”si_contact_ex_field1_1_3″>Life Coaching Sessions</label>
</span>
</div>’

I can’t seem to find where to remove those. Can u guide me please?

Thanks a bunch!

arrrggg… lol. guess I didn’t get the backtick right but anyways, look at the code and where there are emtpy lines is where the br/ (line breaks) are.

really sorry about all this mess thanks for your help!

By default radio and checkboxes are displayed vertical. Here is how to make them display horizontal: add the tag {inline} before the label, like this: {inline}Pizza Toppings:,olives;mushrooms;cheese;ham;tomatoes

When you do this there is no line break br tag used

Looking at the source, I see your theme or another plugin is putting extra br tags in the html between the checkbox fields.
Also it puts p tags around the form comments. Themes should not add additional tags in the html output from plugins.

Totally agree Mike! As much as possible themes and plugins should not alter other source code from non-pertaining elements.

I was hoping you could help but since it seems these extra line breaks don’t come from your own code then I guess I’ll have to figure this one out on my own… blah… more fun for me lol. And the search begins….

Thanks though for your quick responses and of course, this really great plugin!

Did you ever find a solution to this problem GriffinGraffix? I’m having the exact same issue.

I would love to know a solution as well. I am having the exact same problem (I believe). My checkboxes and labels have an added
between them and it causes the label to be on the next line. You can see problem here:

https://www.crystalroombutler.com/register/

I found that some themes are converting the /n in the php code to
, which is causing the misallignment.
This is caused in : si-contact-form/si-contact-form-ex-fields.php
for the checkboxes around line 430 and for the radioboxes around line 490.
The file can be edited but will be replaced when the plugin is updated.
Maybe another solution is possible Mike?

Victor

I am having problems with the Striking theme pushing labels to the next line as well. I found the section that vmwebsites mentions in si-contact-form-ex-fields.php, but I’m not advanced enough in PHP to know what to modify as far as the /n is concerned. Could someone offer more detailed instructions?

Issue can be viewed here:
https://hsishows.com/wp/indianaflowerandpatioshow/ticket-information/printable-coupons/

I think vmwebsites is correct, If I remove the newlines “\n” in the code the problem will go away.
I have removed them for the next version 3.1.5.9 or higher.
Please try it when i release it and reply here if it fixes it or not.

Mike

DeepFlourish, vmwebsites

Will you test some new code so I can confirm my fix before the next release?
Contact me here ASAP and I will email you the PHP file to replace by FTP to your WordPress
wp-content\plugins\si-contact-form
folder

Hi Mike,

just sent you a message from your site,

Victor