WordPress.org

Support

Support » Plugins and Hacks » [Plugin: Fast and Secure Contact Form] How can I have Label and TextField in the same row?

[Plugin: Fast and Secure Contact Form] How can I have Label and TextField in the same row?

  • It seems like it is impossible to float the label div and the text field div so that they are side by side instead of the label being on top of the text field.

    For example, I’d like to do the following:

    Name: [TEXT FIELD]
    Email: [TEXT FIELD]

    instead of

    Name:
    [TEXT FIELD]

    Email:
    [TEXT FIELD]

    I’ve tried many CSS permutations and can’t get it to work right since each label and text is not grouped within a parent div.

    Is this possible?

Viewing 15 replies - 1 through 15 (of 29 total)
  • It is hard coded that way. sorry.

    Awww, Mike, c’mon (lol). I’d love to be able to do this on my forms. Especially aligning radio buttons on the same line with the label text. That would be cool. Any way to persuade you? Money?

    I work on this part time in my spare time. I have that on a feature list.

    Mike

    Wouldn’t that just be something you can do in the plugin’s code files somewhere? I’ve looked around in the file editor for FSC, but I couldn’t figure out where this might be done.

    Great to hear it’s “on the list” – thanks 🙂

    This worked for me =>

    CSS style for form input titles on the contact form:
    text-align:left; padding-top:5px; float:left; clear:left; border-bottom:1px solid silver; width:125px;

    CSS style for form input fields DIV on the contact form:
    text-align:left; display:inline-block;

    But that creates another problem. Check boxes and radio buttons are placed in the same div as their label instead of a separate div like text fields. You can see what happens here:
    http://fixyourweb.com/eco/request-a-brochure/

    It would be VERY helpful if radio buttons and check boxes weren’t made the same width as text input fields, but WERE placed in a separate div the way text fields are.

    I couldn’t get my text to align either. http://www.asmconline.org/contact-us-test/

    Basic form, but the titles are above the field and are just way off in alignment.

    stoetzi

    @stoetzi

    Hi dcloud,

    maybe a bit late but I found a solution. I created my own own div!
    Worked for me:
    http://tafeweb.com/19007/thomas-anstoetz/bazaar-cms/feedback

    Cheers
    Thomas

    Tevya

    @thefiddler

    I used the CSS float and clear contexts, that worked fine, but then I had to add specific margins, etc., to get them to line up as if they were on the same line and not slightly offset from each other.

    Hey Tom,

    That’s exactly what I’m looking to do! can you tell me how exactly you got the labels on the same line with your input fields? Thanks!

    stoetzi

    @stoetzi

    Hi Mark

    actually I’m not quite sure if this helpful for you. I created several div’s and classes in my stylesheet. I opend the DIV in Welcome introduction field (under settings)

    here are my div and class:

    #my_form label {float:left; width:120px; font-size:14px; margin-right:5px; margin-left:5px; text-align:right;}

    #my_form .input { border: 1px solid #999; margin-top:5px;}

    In the settings of the form you have also to delete the width in the CSS Style Feature.

    Try this and let me know if that works.
    Cheers
    Tom

    floats and clears make it easy enough, but to ‘thefiddler’ instead of messing with margins, just make the label fields a fixed width – voila.

    Tom-

    Worked like a charm. For the Div to control the label (ie, the float: left;), I referenced the Id tag from the plugin, #si_contact_form1:

    #si_contact_form1 label {...

    I also followed Bitkahuna’s idea of giving fixed widths to both label and input.

    Thanks for the tip, and for sharing your site. –Bill

    Is there any way time zone can be changed?

    You can customise the html of your code by replacing the shortcode with your own function.

    Use the code at http://wordpress.pastebin.com/96XHmJpj in your theme or override plugin.

    It’s not at all elegant but it will do the trick for the time being.

Viewing 15 replies - 1 through 15 (of 29 total)
  • The topic ‘[Plugin: Fast and Secure Contact Form] How can I have Label and TextField in the same row?’ is closed to new replies.