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

    How do I prevent the submit button from stretching to the width of the entire form when the form's width is narrow?

    Asked by ieinbar on December 26, 2014 at 03:51 PM

    Hello, 

    My submit buttons on several of my forms take up the entire width of the form despite me defining them differently on the "designer" tool. It appears ok in the editor but takes the entire width of the form in the preview and when I embed it on my website. An example is: http://iac.onesitedemo.com/contact/. To open this page, click "try again" on the button that will appear. If this does not work, open this page in an incognito window. 

    This is the original form btw: http://form.jotformpro.com/form/42746437370963.

    How can I correct this? 

    Thanks!

    Inbar 

    Page URL:
    http://iac.onesitedemo.com/contact/

    form width responsive form Form Designer submit button width button is too wide
  • Profile Image
    JotForm Support

    Answered by abajan on December 26, 2014 at 05:12 PM

    Hi Inbar,

    With the jotform loaded in the form builder, please do the following:

    1. Click the Designer button


    2.
     Click the CSS tab


    2.
     Click the submit button

    At this point you will see a new empty rule appear in the work area of the CSS tab.

    3. Insert the following declaration:

    max-width: 118px;

    so that the full rule becomes

    .form-submit-button {
     max-width: 118px;
    }


    Alternative Method:

    Insert the same rule into the form's injected CSS, preferably at the end of it.


    Thanks

  • Profile Image

    Answered by ieinbar on December 27, 2014 at 06:40 AM

    Thanks much!

    Does that mean that the definitions in the button width definitions in the "designer" module does not work? 

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Charlie on December 27, 2014 at 09:30 AM

    In behalf of my colleague, you are most welcome.

    Regarding your question, there are different declaration on using custom CSS codes. The Form Designer provides a basic but powerful option to edit your form, to let users implement advance designing, we allow injecting custom CSS codes. The reason why the button width had problems maybe because it is embedded on a website that allows mobile responsive layout or it inherits the full width from its parent element.

    If you need more assistance or have any other concerns, feel free to open up a new thread here in the forum.

    Thank you.