Literature Order Form is Squished in all Browsers

  • Profile Image
    slaalosangeles
    Asked 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
    alondonb
    Answered on May 27, 2012 at 06:18 PM

    Is there an answer to this?

  • Profile Image
    slaalosangeles
    Answered on May 27, 2012 at 06:18 PM
  • Profile Image
    abajan
    Answered 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
    slaalosangeles
    Answered on May 28, 2012 at 12:43 AM
  • Profile Image
    abajan
    Answered 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