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

    Form is not the same size on page as it is in builder

    Asked by nfwfwf on January 14, 2015 at 03:32 PM

    I cloned a previous form that fit into the sidebar of my post. The previous form it fit perfectly, but with the new form the margins are off, the button goes across the form, the first + last name are on two different lines. What i see in the form builder is different than what I see on the actual post. Can you see why it's not fitting?

     

    Page URL:
    http://www.nfwfwf.net/?p=46182&preview=true

    Screenshot
    mobile style form style form size
  • Profile Image
    JotForm Support

    Answered by EltonCris on January 14, 2015 at 05:14 PM

    Hi,

    It is probably because the form renders the mobile layout since it is embedded on a small container just like when you view it on a small screen e.g. mobile devices. If you want, you can stay with the mobile layout and make only the fullname field to expand 100% so it looks the same with the other fields. Using the following CSS code should make the fullname fields 100%.

    [data-type="control_fullname"] .form-sub-label-container,

    [data-type="control_fullname"] .form-textbox {

    width: 100% !important;

    }

    And then append this code to correct its left and right spacing.

    .form-line {

    padding: 2px 36px !important;

    }

    Result should look like this:

    However, if you don't want the mobile layout, you can delete its associated CSS on the CSS Inject section. You can find it out by following this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    Let us know if you need further assistance. Thank you!