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 preview / embed do not look like form creation area

    Asked by zknight on January 03, 2013 at 07:23 PM

    After choosing a theme and adding CSS injection I got the form looking perfect. Then hit "preview" and saw a default boring form with columns smashed together (see screen cap). Same with the embedded form online.

    What are some possible causes/solutions?

    Screenshot
    css custom inject preview problem update display layout
  • Profile Image
    JotForm Support

    Answered by EduardoMendez on January 03, 2013 at 07:40 PM

    Hi there, 

    Can you please share the URL of the form with us?

    I'll be glad to assist you!

  • Profile Image

    Answered by zknight on January 03, 2013 at 08:35 PM

    URL to the form is http://form.jotform.us/form/30027115408139 . But that is a screen shot of the JF preview not matching the creation area form stylings. My question is why?

    The only thing I was able to successfully modify was adding "text-align:center;" to the column headings...which really should be the default styling!

    I hate to complain but I have loved JotForm so far and I suggest it to anyone looking for such a service,  so to be robbed of an hour + of time that I don't have is so disappointing.

    Thanks for any light you can shed.

     

    To a similar point...when 2 columns are chosen for a row...the default, as you can see in the preview, does NOT create two 50% divs filling a 100% container. Why not? They end up smashed over to the left 2/3 of the space.

  • Profile Image

    Answered by jeanettebmz on January 03, 2013 at 09:31 PM

    We thank you for being a raving fan of us!

    I think the issue has to do with how form is being shown

    The CDN servers will show this version   http://form.jotform.us/form/30027115408139, which takes a little bit more time to show the changes

    Please change the form url to http://www.jotform.us/form/30027115408139, either on the standalone version or the embedded code

    Cheers!

  • Profile Image

    Answered by zknight on January 08, 2013 at 11:58 AM

    Sorry but that had no effect on either the JF preview or the embedded form online. I've tested on 2 desktops and an iPad. In all cases the styling for fonts as well as widths are being ignored...and it's not even defaulting to the website's CSS...it's actually browser defaults (Times).

    Both of the URLs you posted above display the same in FF, IE, and Chrome...no styling at all.

    What on earth could be wrong?

  • Profile Image

    Answered by jeanettebmz on January 08, 2013 at 12:03 PM

    After re-reading the entire thread on this post.  I see the issue is on the form builder itself, with the preview window. Let me tell you that form builder will work better in Google Chrome

    Can you please tell us if this is the case?

    In the meantime I'll clone your form and make some tests

  • Profile Image

    Answered by zknight on January 08, 2013 at 01:46 PM

    Thank you, Jeanette.

    I just created an additional form just as I did before and everything is working exactly as expected!

    http://form.jotform.us/form/30074952103142

     

    I would suggest the following to anyone finding this thread after experiencing the same issue:


    * when you create a new form, add only a question or two for testing

    * preview to see if it matches

    * also, embed in your site with the http://form.jotform.us changed to http://www.jotform.us and see if it matches

    * go back to JotForm and make style changes to the form (and click Save) 

    * preview again and refresh your online form

     

    At this point the JotForm preview and online embedded form should all look like the form in the creation area. And any changes to the style (font, width, etc) should be reflected correctly and quickly.

    If it does, carry on with your form. If it does not, delete your form and try again on another day or with another browser.

    FYI... I've made several forms in JotForm using Firefox with no problems other than that particular day.

  • Profile Image

    Answered by zknight on January 08, 2013 at 01:51 PM

    Jeanette,

    Really seems like just a fluke to me now. Hopefully a comparison of the successful form and corrupt forms all made on the same system/browser will yeild some insight.

    Thanks again for the quick and kind support!

  • Profile Image

    Answered by jeanettebmz on January 08, 2013 at 02:37 PM

    Very glad to hear about your advices and how you sorted out the issue

    Cheers!

  • Profile Image

    Answered by p2c on November 14, 2014 at 01:05 PM

    Hello, 

    I'm having similar issues.When I select the "Preview" option, my form shows the question above the text field:

    However, when I go to the actual form (I've tried changing it to the www.link you recommended earlier), it shows the questions like this: 

    I would like to achieve the first (preview) version.

    Thank you

  • Profile Image
    JotForm Support

    Answered by Kiran on November 14, 2014 at 01:33 PM

    @p2c,

    We've moved your query to a new thread and shall be addressed separately,

    http://www.jotform.com/answers/459490

    Thank you!

  • Profile Image

    Answered by p2c on November 14, 2014 at 01:36 PM

    I found the answer! Thank you :)