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

    Literature Order Form is Squished in all Browsers

    Asked by slaalosangeles on May 27, 2012 at 03:04 PM

    Hello,

    Can you take a look at this form? It's not showing right at all in any browser. The Quantity is hidden beneath the pictures.

    http://bit.ly/JNSTiT

    I'd really like it to look like this: http://www.jotform.com/form/13193636249

     

    Thank you!

  • Profile Image

    Answered by alondonb on May 27, 2012 at 06:18 PM

    Is there an answer to this?

  • Profile Image

    Answered by slaalosangeles on May 27, 2012 at 06:18 PM
  • Profile Image
    JotForm Support

    Answered by abajan on May 28, 2012 at 12:43 AM

    Here's what to do:

    1. Load the form into the form builder and inject the following rules:

    .form-all {
    padding-top: 18px;
    }
    .form-line {
    margin-left: 0 !important;
    }
    .form-label-left, label, .form-payment-total {
    font-size: 12px !important;
    }
    #cid_1 {
    width: 549px;
    float: right;
    margin-top: -5px;
    }
    .form-product-image-with-options {
    margin: -8px 0 0 -60px;
    }
    .form-payment-total {
    float: right;
    padding-right: 424px;
    }

    2. Click the Form Style tab, click the Form Width button, enter 810 and click "OK"
    (The example below shows a form width setting of 687 pixels)


    3.
     Get the form's full source from the Embed Form Wizard (Setup & Embed tab > Embed Form > Source > copy the code to your clipboard [Ctrl+C])

    4. Paste it [Ctrl+V] into a source editor like Notepad++ (my favorite) or just a plain text editor like Notepad

    5. Go to Line 116 of the code and change the class name of the image from .form-product-image to .form-product-image-with-options

    6. Select all [Ctrl+A] of the code and copy it to your clipboard

    7. In your web page's source, replace the iFrame containing the form with the code on your clipboard

    8. Go to line 137 (or thereabouts) of the web page's source and change the table's width from 650 to 820

    9. Save the changes

    When done, your form should look similar to this clone. If you need clarification on anything, please let us know.

  • Profile Image

    Answered by slaalosangeles on May 28, 2012 at 12:43 AM
  • Profile Image
    JotForm Support

    Answered by abajan on May 28, 2012 at 12:46 AM

    @slaalosangeles

    Please use the following link to reply to this thread:
    http://www.jotform.com/answers/102849-Literature-Order-Form-is-Squished-in-all-Browsers