WordPress.org

Ready to get started?Download WordPress

Forums

Fast Secure Contact Form
Multi checkbox not displaying inline (23 posts)

  1. GriffinGraffix
    Member
    Posted 2 years ago #

    Hi,
    This is a great form. However, no matter what css I add to either the extra php or my main css or even in the extra section css setting, the checkboxes align vertical and the labels are below each specific box.

    See here: http://www.griffingraffix.com/govinda-healing/contact-us/

    I searched online for over 3 hrs and tried gazillion fixes posted by many people... none worked :(

    Pls help and thank you for such a great form!

    http://wordpress.org/extend/plugins/si-contact-form/

  2. Mike Challis
    Member
    Plugin Author

    Posted 2 years ago #

    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
    http://www.fastsecurecontactform.com/support

  3. GriffinGraffix
    Member
    Posted 2 years ago #

    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.

  4. GriffinGraffix
    Member
    Posted 2 years ago #

    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...

  5. GriffinGraffix
    Member
    Posted 2 years ago #

    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!

  6. GriffinGraffix
    Member
    Posted 2 years ago #

    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!

  7. Mike Challis
    Member
    Plugin Author

    Posted 2 years ago #

    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

  8. Mike Challis
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  9. GriffinGraffix
    Member
    Posted 2 years ago #

    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!

  10. mbrinson
    Member
    Posted 1 year ago #

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

  11. pifemaster
    Member
    Posted 1 year ago #

    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:

    http://www.crystalroombutler.com/register/

  12. vmwebsites
    Member
    Posted 1 year ago #

    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

  13. DeepFlourish
    Member
    Posted 1 year ago #

    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:
    http://hsishows.com/wp/indianaflowerandpatioshow/ticket-information/printable-coupons/

  14. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    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

  15. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    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

  16. vmwebsites
    Member
    Posted 1 year ago #

    Hi Mike,

    just sent you a message from your site,

    Victor

  17. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    Tested, confirmed, and fixed. Upgrade to 3.1.5.9 or higher

  18. pifemaster
    Member
    Posted 1 year ago #

    Just updated and it did not change anything (at least for me)
    http://www.crystalroombutler.com/register/

    Notice the check box ABOVE "Check box if date is still UNDECIDED"

    Thank you,
    Robert

  19. vmwebsites
    Member
    Posted 1 year ago #

    Hi Robert,
    Have you tried restting the labels to the left?
    When you go to the form settings, scroll down to the section Style: (form 1) (where all css codes are)
    At the top of this section you'll see 2 checkboxes:
    - Reset the styles to labels on top (default).
    - Reset the styles to labels on left.

    Maybe this will help?

    Victor

  20. pifemaster
    Member
    Posted 1 year ago #

    Victor,

    I just tried to rest labels on left and still no change. I am now running version 3.1.6.

    For me it is not a major problem because my form only has 1 check box. However, I just wanted to let the Plugin Author know that at leat within my template, the problem still exsists.

    Thank you,
    Robert

  21. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    Robert,

    The fix I put in before did not have any effect on checkbox single. but I just I added it in my development code.
    Will you test it so I can confirm my fix before the next release?
    Contact me here and I will email you the PHP file to replace by FTP to your WordPress
    wp-content\plugins\si-contact-form
    folder

    Then you can tell me if it works or not.

    Mike

  22. Mike Challis
    Member
    Plugin Author

    Posted 1 year ago #

    OK, thanks for testing you can leave that file, it is in the downland code now anyway.

    The themes that caused this are messed up, all of you should report this to the theme support.

    Is that a premium theme you paid for?
    My patch was a work around fix, but there is still a problem with your themes adding other line breaks and paragraph tags in the HTML source. This causes non valid HTML and extra gaps in the form and CAPTCHA fields.
    You should see if there are updates for the theme, if there is install them and see if the problem goes away. If the theme is the latest version you should tell the theme support about the extra HTML tags it is putting in there. They should really fix that. A theme should never change HTML of other plugins. My update was a workaround, but I should not have had to do that.

    Here is what the theme is doing:
    After every h3 tag close it adds a paragraph close tag.

    <h3>How Did You Hear About Us</h3>
    </p>

    It puts a paragraph tag around the HTML comment

    <p><!-- Fast Secure Contact Form plugin 3.1.6 - begin - FastSecureContactForm.com --></p>

    It puts line break tags after hidden form inputs:

    <input type="hidden" name="si_contact_action" value="send" /><br />

    and a few other random paragraph open or close tags

  23. DeepFlourish
    Member
    Posted 1 year ago #

    Sorry I've been absent for this latest conversation. Mike, I just updated your plugin in my site, and the checkboxes are showing up to the left of the labels. Thank you!

    There's something strange about the alignment of the first item, though:

    http://hsishows.com/wp/indianaflowerandpatioshow/ticket-information/printable-coupons/

    Do you know how to get around that tiny bit of weirdness?

    I'll send a message to my premium theme provider about the extra HTML tags. Hopefully they respond!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic