Difference in look betwee Preview and actual form on webpage

  • wordsburg
    Asked on January 2, 2017 at 4:23 AM

    Hello, 

    I have few concerns with the form display. I would really appreciate your assistance. 

    I want my form to have field spacing and the overall form size as below:Difference in look betwee Preview and actual form on webpage Image 1 Screenshot 20However in real it looks different with more line spacing.

    http://www.wordsburg.com.sg/certified-translation

    What I want?

    I want field spacing to be as displayed in above screenshot

     

    2. There is an extra space above upload files field. How can I remove it? 

    3. How can I align the upload files button to centre?

  • liyam
    Replied on January 2, 2017 at 7:15 AM

    Hello,

    I'm not sure I'm able to follow you on this. But to verify, can you check this form and let us know if this is how you want it?

    https://form.jotform.com/70012460705948

    If so, you may copy/clone the said form for your use.

    If you have questions or if I'm missing something, please let us know. 

  • wordsburg
    Replied on January 3, 2017 at 11:59 PM

    Dear Liyam, 

    The size of form  on JOT dashboard preview is 282 px x 453 px. Below screenshot highlights the same.  Difference in look betwee Preview and actual form on webpage Image 1 Screenshot 30

     

    However on wix editor when I set up the same form using the same size (282px x 453 px) using html widget with Jot URL, I am seeing horizontal & vertical scroll bars. Please find below screenshot. 

     

    Difference in look betwee Preview and actual form on webpage Image 2 Screenshot 41

     

    I want the form with same dimensions & the way it looks in Jot preview. Kindly help

  • Nik_C
    Replied on January 4, 2017 at 3:06 AM

    Please try adding the below CSS to your Custom CSS field:

    .qq-uploader {

    margin-top:-25px;

    margin-bottom:-25px;

    margin-left:60px;

    }

    It will make the form look like this on your website:

    Difference in look betwee Preview and actual form on webpage Image 1 Screenshot 20

    Please let us know how it works for you.

    Thank you!