WordPress.org

Ready to get started?Download WordPress

Forums

Fast Secure Contact Form
[resolved] Automated (?) div is clearing my floats (7 posts)

  1. shainanz
    Member
    Posted 11 months ago #

    I added HTML before and after the form fields to get my form into a few sections, each with two floating columns. Trouble is, there seems to be a <div style="clear:both;"> that is interfering with my floats.

    I tested that this div is the source of the problem by adding this to my CSS: #FSContact1 div[style="clear:both;"] {display:none;} Unfortunately, this isn't working in IE, which is the browser of choice for most of our website visitors.

    Weird bonus feature to my problem: I think it was working fine without the additional CSS last night and I haven't made any changes in between.

    So, in summary, is there any way to either get rid of this div altogether (I'm thinking at this point it may be generated by the plugin) or to hide it with CSS in a way that's IE-friendly?

    Here's my form, for reference: http://chnzdev.nz123.co.nz/trade-contact/ (Try opening it in IE, and then something else and you should see the difference.)

    Thanks!

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

  2. Mike Challis
    Member
    Plugin Author

    Posted 11 months ago #

    Last Friday I coded a makeover of the Style settings tab for version 4.0 Beta 2

    You have to install the 4.0 Beta 2 to have those changes. I will no longer update the 3.xx version, it is too much work to maintain two different programs.

    Fast Secure Contact Form 4.0 Beta
    http://www.fastsecurecontactform.com/beta

    I am using the beta on my live site now with no trouble.
    I suggest installing the beta, click reset to 'labels on top' for the alignment divs
    and then click reset "Reset the styles of labels, field inputs, buttons, and text"

    For the average user, it is suggested to only make adjustments to the "styles of labels, field inputs, buttons, and text"
    For example, on my site, I only had to add width:300px;
    to these three settings to make all my input fields look the same width:
    Input text fields
    Input textarea fields
    Input select fields

    Sometimes you may need to also adjust Form DIV width also

    Please try the beta then let me know how I can help you any further. Now is the best time to help me work out any of these style issues while it is still a Beta

  3. shainanz
    Member
    Posted 11 months ago #

    Hi Mike,
    I've installed the beta, and now I'm at more of a loss, I'm afraid. In the previous version, I was able to set a div that spanned across multiple fields so that I could create columns. So the effect was kind of like:

    <form>
    <div id="personal-details-fields" style="width:100%">
      <div style="float:left;">
        [some fields on the left column]
      </div>
      <div style="float:right;">
        [other fields on the right column]
      </div>
    </div>
    <div id="project-details-fields" style="width:100%">
      <div style="float:left;">
        [some fields on the left column]
      </div>
      <div style="float:right;">
        [other fields on the right column]
      </div>
    </div>
    </form>

    Now, though, when I add <div id="mydiv"> to "HTML before form field" for Field#1 and </div> in "HTML after form field" to Field #2, only Field#1 is actually going into the div. This means my grouping and my floats do not work.

    If there's a better way to get a two-column layout on the form, I'm more than welcome to shift strategies.

  4. Mike Challis
    Member
    Plugin Author

    Posted 11 months ago #

    Try this:
    put this in "Welcome Introduction" on basic settings tab

    <table width="550" style="border:1px solid black; padding:10px;" cellpadding="20">
    <tr>
    <td>

    Put this in "After Form Message" on Advanced tab

    </td>
    </tr>
    </table>

    Put this in "HTML After Field" in the Field details of a field half way down your fields list on the Fields tab

    </td>
    <td>

    Click Save Changes

    View the form.
    Adjust the table style as needed in step 1.

  5. shainanz
    Member
    Posted 11 months ago #

    Thanks, Mike, that does the trick.

    Also, I really like the new layout of version 4, as well as being able to rearrange the fields. Thanks for the hard work!

  6. henkehell
    Member
    Posted 10 months ago #

    It´s really weird but when i try this my footer ends up within the fieldset box... any other tips on how to do this?

  7. shainanz
    Member
    Posted 10 months ago #

    The most recent update to the plugin did that to me too.

    I fixed it by moving <tr> and <td> from Basic Settings>Welcome Introduction to "HTML before form field" under my first field.

    I then moved </table> to the end of my last field, so that there was nothing in Advanced>After Form Message. (Because I had removed <tr> and <td> from the Welcome Introduction, I no longer needed to close them in After Form Message.)

Reply

You must log in to post.

About this Plugin

About this Topic

Tags