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

  • MontagJM
    Asked 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>

  • Ben
    Replied on October 25, 2014 at 5: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

  • MontagJM
    Replied on October 25, 2014 at 6: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
    ...
  • MontagJM
    Replied on October 25, 2014 at 7:01 AM
    New response received
    Not that is a GREAT preview feature! I got everything working now. The
    ...
  • Ben
    Replied on October 25, 2014 at 7: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

  • MontagJM
    Replied on October 25, 2014 at 7: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
    ...
  • Ben
    Replied on October 25, 2014 at 7: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

  • MontagJM
    Replied on October 25, 2014 at 8: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
    ...
  • Jan
    Replied on October 25, 2014 at 5: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!