WordPress.org

Ready to get started?Download WordPress

Forums

Fast Secure Contact Form
Cant style Captcha Input Div different to other form input fields divs (4 posts)

  1. Tim Reeves
    Member
    Posted 8 months ago #

    Hi again,

    I want to save form height by floating the Submit Button next to the Captcha Code input field. But that Div containing it only gets the same inline-style as all other form input fields, so I can't add a "float:left" to it (or they all get it and the form layout goes up in smoke). So could you please add an id-Attribute so I can at least target that Div in extra CSS contained outside the plugin?

    BTW Generally adding more id-Attributes would make life easier, and a general question: Why inline style attributes instead of class attributes?

    Cheers,
    Tim

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

  2. Mike Challis
    Member
    Plugin Author

    Posted 8 months ago #

    I have to review this when I get time. Do you have a form URL I can look at?

  3. Tim Reeves
    Member
    Posted 8 months ago #

    Mike,

    a review of CSS reachability would be great.

    The more I think about it, the more I think that generally adding standard, type/place-specific classes to each DIV and INPUT would be a very helpful thing. I'm using the Weaver ii Theme which provides a slot to append CSS as the last head item, and I use it extensively to style everything which WP, Weaver or Plugins don't foresee. But with FSCF there often isn't enough CSS context available to hit the item I want. For example, if each field of type password had a class "fscf-password" I could match them in all forms simply with "input.fscf-password", or in a specific form e.g. "#FSContact1 input.fscf-password". And it's easy to trump a class style from a plugin by adding your own but with more html container context.

    So in general I would suggest to give every element a class, and also an Id based on the form number. Then one could simply style the classes, and do any individual tweaks via the Id. The problem I'm currently having is that the Captcha-Input Div is treated like a normal Input Div, so there's currently no way I can override that only on the Captcha-Input Div - which I would like to have "float: left" so that the Submit button is to its right rather than below it. I've achieved that in a really Wacko way, by styling the Submit Div to "position: relative; top: -50px; left: 66%;". (SI Captcha is easier: div#si_refresh_com { float:left; })

    I'll send you the address to look at privately since it's not officially online yet and should not be indexed.

    BTW I suggest to specify field widths in percent, not pixel - that way they still look good on Smartphones (otherwise they're normally too wide).

    Finally: Yes, the Admin-Interface of Vn. 4.0 is a great improvement - many thanks for that!

    Cheers, Tim

  4. Tim Reeves
    Member
    Posted 8 months ago #

    Hi,

    some more ideas:

    1) It might be better not to adjust the size of input fields via the size attribute, which is imprecise, but by CSS width. In particular, "Input CAPTCHA Field Size" does'nt work, because it has a style width of 50px, further up under "CSS style for CAPTCHA input field".

    2) You have a hard-coded
    between the CAPTCHA input field and the Submit button, which makes repositioning the button via CSS a pain; making the button position:relative works, but leaves the total form unneccessarily long, because now we have a dangling break.

    Tim

Reply

You must log in to post.

About this Plugin

About this Topic