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

    DateTime Field: JSEmbedded jotform showing differently in Muse than on preview

    Asked by MontagJM on October 25, 2014 at 12:59 AM

    I used the date Quick Tool three times in my first form. I also tried formatting the field name "Top" - that is above the date field. It looks great on the preview. However, when I embedded the form in Muse as HTML, I ended up with all three of the date fields (M/D/YR) extending across my entire form! each field must have been 150 pixels wide. 

    Here is the embedded code: <script type="text/javascript" src="//form.jotform.us/jsform/42933368021149"></script>

    JotForm date field preview Muse
  • Profile Image

    Answered by Ben on October 25, 2014 at 05:40 AM

    Hi,

    I would suggest trying to embed the jotform using our iFrame embed method instead.

    The code should look like this:

    <iframe id="JotFormIFrame" allowtransparency="true" src="http://form.jotform.us/form/42933368021149" frameborder="0" style="width:100%; height:800px; border:none;" scrolling="no"></iframe>

    Now, you will probably need to adjust the height (the bold section above) by changing 800 to some other number, depending on the size of your jotform. If it still looks like before, please give us the link to the page so that we can inspect it and see what is the reason for that.

    Best Regards,
    Ben

  • Profile Image

    Answered by MontagJM on October 25, 2014 at 06:51 AM
    New response received
    Ben,
    Wow! Thanks for the fast response to one frustrated guy! I have tried your
    solution and just now uploaded to the site. I have a couple of other issues
    for the site, obviously, but the JotForm is central to what we want to
    achieve. I tested the form last night and it sends the info where is was
    intended. Here is the site. Why are my fields printing across the entire
    form?? http://militaryreadyfamily.org/request-a-kit.html
    Thanks!
    Mike
    ...
  • Profile Image

    Answered by MontagJM on October 25, 2014 at 07:01 AM
    New response received
    Not that is a GREAT preview feature! I got everything working now. The
    ...
  • Profile Image

    Answered by Ben on October 25, 2014 at 07:09 AM

    Hi,

    I presume that the issue was caused by the option of creating the jotform responsive in our new Form Designer.

    To nullify that you could add this CSS to it:

    /* restore the size of date field */
    li[data-type="control_datetime"] span.form-sub-label-container {
        width: 55px;
    }
    /* restore the size of full name field */
    li[data-type="control_fullname"] span.form-sub-label-container:nth-child(2) {
        width: 120px;
    }
    li[data-type="control_fullname"] span.form-sub-label-container {
        width: 90px;
    }
    /* restore the phone number size */
    li[data-type="control_phone"] span.form-sub-label-container:nth-child(2) {
        width: 78px;
    }
    li[data-type="control_phone"] span.form-sub-label-container {
        width: 61px;
    }

    Now I just see that you have replied back and that you were able to resolve this yourself :)

    I will however leave the CSS code above in case someone else needs it.

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by MontagJM on October 25, 2014 at 07:21 AM
    New response received
    Ben,
    “Shrink” worked on everything except the date. Are the dates supposed to
    be that wide? I pasted the CSS in immediately after the HTML, but no
    change.
    Thanks again,
    Mike
    ...
  • Profile Image

    Answered by Ben on October 25, 2014 at 07:28 AM

    Hi Mike,

    Could you please try embedding my jotform on your website to see if it works for you?

    <iframe frameborder="0" id="JotFormIFrame" allowtransparency="true" src="http://form.jotformpro.com/form/42972762229968" style="width:100%; height:3600px; border:none;" scrolling="no"></iframe>

    If it does you can clone it to your account and embed with the same code, by just replacing the URL (bold one above) with the URL to the new jotform.

    What I could see it will work properly.

    Best Regards,
    Ben

  • Profile Image

    Answered by MontagJM on October 25, 2014 at 08:51 AM
    Ben,
    I'd love to. You have been so helpful and encouraging. You're my new hero! But I can't give it a try until this evening. I'm working a men's conference right now.
    Thanks for blessing my day!
    Mike
    Sent from my iPad
    ...
  • Profile Image
    JotForm Support

    Answered by Jan on October 25, 2014 at 05:01 PM

    Hi,

    We're glad to hear that Ben was so helpful and encouraging. We hope that your issue will be resolved through the solutions he provided. Let us know if you need further help.

    Thank you!