What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Empty space on the right nside of this form

    Asked by EpicStudio on December 08, 2014 at 05:56 AM

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

    new form JotForm create thanks
  • Profile Image

    Answered by val on December 08, 2014 at 07:24 AM

    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.

    .form-all {
        font-family: "Source Sans Pro",sans-serif;
        height: 100%;
        margin: auto;
        max-width: 900px;
        width: 100%;
    }
     
    Replace with this new code.
     
    .form-all {
        font-family: "Source Sans Pro",sans-serif;
        height: 100%;
        margin: auto;
        max-width: 100%;
        width: 100%;
    }
     
    Hope this help.
     
    Thank you!
  • Profile Image

    Answered by EpicStudio on December 08, 2014 at 03:13 PM

    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.

  • Profile Image

    Answered by val on December 08, 2014 at 05:00 PM

    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.

  • Profile Image

    Answered by EpicStudio on December 08, 2014 at 11:32 PM

    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.

  • Profile Image

    Answered by EpicStudio on December 09, 2014 at 01:32 AM

    Hi there. Any idea about this guys..?

  • Profile Image

    Answered by val on December 09, 2014 at 01:41 AM

    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!

  • Profile Image

    Answered by EpicStudio on December 09, 2014 at 02:05 AM

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

     

     

     

  • Profile Image
    JotForm Support

    Answered by Jan on December 09, 2014 at 09:05 AM

    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.

  • Profile Image

    Answered by EpicStudio on December 09, 2014 at 02:30 PM

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

  • Profile Image

    Answered by EpicStudio on December 09, 2014 at 02:43 PM

    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.

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on December 09, 2014 at 04:29 PM

    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.

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on December 09, 2014 at 04:30 PM

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