Trouble with a few forms being off

Hello,

I think these are all the same forms on different pages of my website.  The comment box seems to have jumped off the page or form.  I don't recall this looking this way when I first used it. Hoping you can assist me.

Thank you,

Brett

http://www.brettbolzenthal.com/?p=text&id=14435&ptid=12074534  - Insider Secrets

http://www.brettbolzenthal.com/?p=text&id=14430&ptid=12074518 - Love it or Leave it

http://www.brettbolzenthal.com/?p=text&id=14426&ptid=12074424 - Guaranteed Home Sale "This one could be okay as is.  The button started touching the form and boxes might be a little crowded.  But again this one could work okay for now.

Hi Brett. These are three different forms:

http://form.jotform.us/form/51136634745153

http://form.jotform.us/form/51137002811137

http://form.jotform.us/form/51125926485156

I can see that your forms display differently on Firefox and Chrome. Your screenshot is from Chrome (or Safari, latest Opera), where the labels are on the left side. In Firefox, labels are just above the fields, as in the following image:

After troubleshooting through the form's CSS, I can see that there are some differences in how Firefox and Chrome are rendering the width of each form line. If you wish that Chrome, Safari, as well as latest Opera, all render the width in a similar way that Firefox is doing, please inject the following custom CSS into your form:

.form-line { width:-webkit-fill-available; }

You can do so by going to Setup & Embed > Designer, switching to the CSS tab on the right, and pasting the code at the bottom of the CSS textbox:

To make room at the bottom, below the Submit button, you can add some bottom padding to the element that holds your background image. Since your background image is only 557 pixels high, it may also be good to specify a background color for the form-all element - which will show when your background image runs out.

.form-all {
padding-bottom: 20px;
background-color: #82CEF0;
}

Alternatively, you can specify that your background image repeats with using:

.form-all { background-repeat: repeat-y; }

Here is a demo form with these CSS codes added, so that you can take a look if this is what you were looking for: http://www.jotformpro.com/form/52376671675971

I hope this helps. Please let us know how it goes.

Wow you are amazing!  i think that is exactly what I am looking for and can't thank you enough.

You are kindly welcome. :) Thank you for your kind words, I am happy to hear that.

Please don't hesitate to contact us again should you need any other assistance with your forms, and we will gladly help.

Hey Boris,

I wasn't able to attempt these corrections until today. However, as it looks super easy in your very easy to follow instructions.  It seems the form "button specifically is not cooperating. I took a screen shot with the added css code injected from above.  This is the Insider Secrets form. As soon as I click on "Designer" it jumps to this from the builder.

It doesn't look like your changes were saved in the Insider Secrets form, so I have logged into your account and have made the following changes to your form:

http://www.jotform.us/form/51136634745153 (Insider Secrets)

1. I have added the code mentioned above, that makes the labels be on top even in Chrome, Safari, and Opera: .form-line { width:-webkit-fill-available; }

2. I have fixed the Submit button, by changing its current width declaration from width : 98px; to width : auto !important;, so that the button will automatically try to take as much space as the text inside of it needs. The problem with it earlier was that the Submit button was limited to 98 pixels in width, and on some browsers the text "FREE Instant Access" needed more than 98 pixels to be displayed.

Here are images of said changes I have made while logged into your account:

3. I have also changed the base font-size of your form from initial 8 pixels to 12 pixels:

Please test out your form, and see if the changes I've made to it are satisfactory:

http://www.jotform.us/form/51136634745153

I hope this helps. Let us know if you need any other assistance, or if you are not satisfied with these changes, and we will be happy to help.

These work awesome now!  

Though I am curious as I am building a lead capture page for real estate on my website.  Do any of the forms current have the option to allow a person to sign in by facebook or twitter?  Here is a sample form I found.  Sounds like the effective conversion rates are pretty high

Hi,

To better assist you, I went ahead and opened a separate thread for the follow up concern that you have. Please refer to this link instead: http://www.jotform.com/answers/655313. We will address it accordingly.

Thank you.