Automated (?) div is clearing my floats

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
https://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

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.

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.

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!

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?

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