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 Looks Different in Builder than on Site

    Asked by dupree1015 on November 19, 2014 at 09:46 PM

    Hi,

    First, I think your program rocks! I created my form and it looks great in the builder but when I place the embed code into the page the form doesn't look the same and everything is off.  I have attached a photo of what it looks like in the builder and another of what it looks like on the website.  I don't understand why this is happening.  Would someone please assist me.

    Thanks,

    Cat'

     

    Page URL:
    http://xtrememediademo.com/sanders/index.php/consultation

    different site builder JotForm uploads height jpg
  • Profile Image

    Answered by dupree1015 on November 19, 2014 at 10:36 PM

    K....I forgot to mention that I am using Joomla 2.5 and JCE Editor...so I went on the forum and found the solution in the photo and tried it and now the script doesn't show up at all even after I put the original dynsrc,lowsrc back in and when I use the IFRAME method I get the same result as above where the code doesn't show up right.  I tried using Jumi and load it into an article and the code keeps getting stripped out so not sure what to do.

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 20, 2014 at 12:12 AM

    Hello,

    I did check your web page where you have embedded your form and I am able to replicate the issue you are having. This happens when you enable the "Responsive Form" property of your form's preferences.

    Upon taking a closer look at your form, I found that it was caused because of a custom css code injected in your form. I have edited the custom css code and now your form is displayed correctly in your web page. Please check the screenshot below:

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by dupree1015 on November 20, 2014 at 12:26 AM

    OMG...thank you...that was actually a test form because the other wasn't working.  Would you please tell me exactly what you did so I can make those same changes in the future.  I did check my other forms and the preference is set to no so is there something I'm missing.  Also, I placed another post because I noticed that the original format was lost after I created the original form, then went into the form designer, made some custom changes, went back to the form then did a preview and the format was off. 

    Thanks again for your assistance.  I really love this program! :)

    Cat'

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 20, 2014 at 02:06 AM

    Hello,

    Is it related to your form "Rebecca J. Sanders - Consultation"?

    I did check this form and it seems to be displaying all the formatting correctly. Please check the screenshot below:

    Please go ahead and embed this form in your web page.  Do get back to us if you see the same issue and we will take a look and resolve it.

    Thank you!

  • Profile Image

    Answered by dupree1015 on November 20, 2014 at 09:43 PM

    Thanks again for your assistance.  Actually, the form that was on the website was just a test to get to the root of the problem.  Sorry about that.  I have now posted the correct form for that page and photos of the format.  I opened another ticket about the fact that it was changing my form to a "Responsive Form" by itself within the form designer even though it wasn't checked and I was told they are working on a fix.  In the meantime, what did you do to make it work so that the format showed up correctly after I placed it in the form designer and saved it then went back to grab the code.   Since you found a work around, I would really like to know so I can do this on all forms until the problem is solved.  You also said you had to remove some code.  Would you let me know what that is as well and where I can find it.

    Thanks again,

    Cat' :)

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 21, 2014 at 12:30 AM

    Hello,

    I have fixed this issue in your live form which you have embedded in your web page. Your form seems to now display correctly in your web page. Please check the screenshot below:

    What I did to resolve this issue?

    I just deleted the following injected custom css code from your form:

    /* | */

    @media screen and (max-width: 768px) {

    .form-all { border: 0; width: 100%; }

    .form-sub-label-container { width: 100%; margin: 0; }

    .form-input { width: 100%; }

    .form-label {width: 100%!important;}

    .form-line {padding: 2% 5%;margin: 0;}

    input[type=text],input[type=email],input[type=tel],textarea {width: 100%;

    -moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

    .form-header-group {padding: 3% 0!important; margin: 5%!important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;box-sizing: border-box;}

    .form-buttons-wrapper {margin: 0!important;}

    .form-buttons-wrapper button {width: 100%;}

    table {width: 100%!important;}

    table td + td {padding-left: 3%;}

    .form-checkbox-item input,.form-radio-item input {width: auto;}}

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!