Embedded Form not positioning properly on the page

  • Dannilee
    Asked on February 20, 2016 at 10:47 AM

    Hi

    I have cloned a form I am trying to incorporate into a page for someone.

    https://form.jotformeu.com/60345253640348

    I did not design the site but have looked though the code and can not see any reason why the form is dropping down the page and too the right.
    Please can you advise.
    Test page http://http://www.lm-lakeland-deign.co.uk/DIDI/contact_us.html
    Thanks
    D
  • David JotForm Support Manager
    Replied on February 20, 2016 at 9:50 PM

    The webpage you shared is not available:

    Embedded Form not positioning properly on the page Image 1 Screenshot 20

  • didibahini
    Replied on February 21, 2016 at 6:05 AM

    Hi

    Sorry, I had to take it down. For now can you help me with the input widths please. I cloned a new form:

    https://form.jotformeu.com/60512908407352
    It  looks how I want it in FF but in IE the input fields are shorter and there is too much free space to the right?
     
    Also the submit button position looks different in preview to how it does on the live page, in preview 180px look right but on the page 150px is needed to make it look centered. I am embeddin via the Iframe method.
     
    Thanks
    D
  • David JotForm Support Manager
    Replied on February 21, 2016 at 11:01 AM

    The form shows up differently in the browses, since it has many CSS that conflict between each other. So What I did is to remove all the CSS from Preferences>>FormStyles>>Inject Custom CSS, and then adjust some of the fields height and width with the form designer.

    Finally, I injected some custom CSS to make the form look the same as yours: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-required{

        display: none !important;

    }

    .form-textbox, .form-textarea{

    border: 1px solid #cccccc !important;

    }

    .form-line-error{

        background-color: transparent !important;

    }

    .form-button-error {

        color: white !important;

        font-size: 11px !important;

    }

    .form-error-message {

        display: none;

    }

    Here is my cloned version of your form, you can test it: https://form.jotform.com/60514129757963 

    Embedded Form not positioning properly on the page Image 1 Screenshot 20

    You may clone it if you want to, and use it instead: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Hope this helps.

  • Dannilee
    Replied on February 21, 2016 at 7:57 PM

    Hi

    It's still not looking right for me in IE?

    http://www.lm-lakeland-design.co.uk/DIDI/contact_us.html

    PS I edited the 2 posts above because I was logged in under the wrong account.

    Thanks

    D

  • jonathan
    Replied on February 22, 2016 at 1:25 AM

    I checked the embedded form in your website using IE11. And it look fine at this time.

    Embedded Form not positioning properly on the page Image 1 Screenshot 20

     

    Can you please tell us how it not looking right on your side.

    You can take a screenshot and share it to us.