Empty space on the right nside of this form

Hi there, I have this form, which performes perfectly to my needs http://form.jotform.co/form/43357676732868

But it has an empty space on the right that I can't get rid of. I need the three fields on the same line (the two text areas and the submit button). Please don't create a new form because I have already configured this one and creating another one will complicate everything.

I just need to make this form to be responsive and occupy all the 100% width of the space.

Thanks so much..!

Hi,

You should change the "max-width: 900px;" on your "form-all" CSS to "max-width: 100%;" and also remove the "800px" width on your Form Builder like the screenshot below.

Find this to your CSS code on your Form Styles.

Hey Val. Thanks for your answer. I made the changes on the code but looks like the form stays the same. I can't get rid of that empty space on the right.

Hi,

I have changed the CSS code on my cloned form.

Find this code to your form.

.jotform-form .form-line-column {
width: 30%;
}

Replace to this code.

.jotform-form .form-line-column {
width: 100%;
}

And if you notice that they don't have a margin on the bottom of each fields you need to add this CSS code "margin-bottom:10px;" in order to add this CSS code, you need to inject the code into your Form Styles.

Here's the demo.

Hope this help.

Thanks.

Dear Val, the Demo looks great, and works perfectly. Sadly now the elements are on a different line each one, and I'd like to preserve the three of them on the same line.

Hi there. Any idea about this guys..?

Hi,

Please try put this CSS code to your Form Styles.

#id_1, #id_3 {width:44.5%;}
#id_2 {width:11%;}

And here is the demo.

Thank you!

Thanks again Val. Works much better, but still having two problems. At full width of the page there's still a small space (first image) and second, at medium to small widths there's cropping on the form's button (second image).

Hello,

In regards to the first image, I can see that the form is embedded on a webpage. Can you share the URL of your website so we can take a look at it as well. 

We are still working on this form right? http://www.jotform.co/form/43357676732868

I cloned this form and check the code. It seems that you haven't applied the CSS codes provided by val yet. The CSS selectors .form-all & .form-line-column did not match. 

Is the demo provided by val good for you? If so, then you can just clone it and rename the form. After that embed the new form on your website.

In regards to the second image, it cuts off because the form is not responsive. You can use the mobile responsive widget if you like. If you need a guide please refer to this link.

Hope this helps. Thank you.

Hi Jan. I already added Val's provided code. I can't now give you an open URL of the site since it's not visible to anyone due to maintenance mode. The demo is good, but it's cropping. I'll try to add the responsive widget to see if it helps. I'll make you know. Thanks..!

It's not working. It's still cropping. I'm getting kind of frustrated. It seems that jotform is a great tool but trying to build nice or design-concerned forms is a headache. I have spent lots of time trying to fix this issue and after replies, replies, suggestions and suggestions I just haven't been able to get some results.

The responsive Widget is no longer the most recommended option, instead try this:

Simply go to Setup & Embed Tab, then click on Preferences button.

On General Settings, set Responsive Form option to Yes

You can also use our new Form Designer tool if you want to add more styles to the form, and make your form responsive from there.

While on Edit mode, click the Form Designer Icon on the Form Style toolbar. (Pictured below) 

On Form Layout click on Make This Form Responsive

Otherwise, by setting the option on Preferences will be enough.

I forgot to say you must remove the responsive widget and then apply the settings as described above.