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 not formatting correctly

    Asked by iCast on February 03, 2014 at 10:31 PM

    Hi, my form is not displaying the same way in each browser... Im refering to the "Subscribe to updates" form on the top right...

    http://new.dougducey.com/

     

    Page URL:
    http://new.dougducey.com/

    Screenshot
    subscribe
  • Profile Image

    Answered by Cesar on February 03, 2014 at 11:32 PM

    Unfortunately your screenshot appears to be broken. Yet after trying the site on different browsers I do see the fields shift on your embedded form. First step to try that I would suggest, is to embed the form using the iFrame method. This may help calibrate sizing issue throghout all browsers. Do let us know if the issue persists after performing this step. Thank you.

     

    Related Article:
    Getting-the-Form-iFrame-Code

  • Profile Image

    Answered by iCast on February 04, 2014 at 12:10 AM
    Im still having the issues with the iFrame embed... Attached is a
    screenshot.
    Im embeding in a wordpress site.
    -Grant
    *Grant B. Wittstruck*
    Digital Strategy Director
    iCast Interactive l 118 Gwyn Dr. l Panama City Beach, FL 32407
    *O:* 850.249.8819 l *M:* 303.815.6161 I *F:* 850.234.6592
    grant@icastinteractive.com l www.iCastInteractive.com
    This email message is for the sole use of the intended recipient(s) and may
    contain confidential and privileged information. Any unauthorized review,
    use, disclosure or distribution is prohibited. If you are not the intended
    recipient, please contact the sender by reply e-mail and destroy all copies
    ...
  • Profile Image

    Answered by Cesar on February 04, 2014 at 12:48 AM

    I do see that your form not only looks different in the wbesite once embedded. It in fact looks different on the Form Builder when loaded on different browsers (Chrom/Firefox)

    Kindly let us know which browser you are using to work with your form. Do let us know if you want the First and Last Name fields on the same line or one on top of the other. Thank you.

  • Profile Image

    Answered by iCast on February 04, 2014 at 01:00 AM
    I was developing in Chrome, but need it to working in all.
    I would like first and last name on one line.
    Thanks for the help!!
    -Grant
    *Grant B. Wittstruck*
    Digital Strategy Director
    iCast Interactive l 118 Gwyn Dr. l Panama City Beach, FL 32407
    *O:* 850.249.8819 l *M:* 303.815.6161 I *F:* 850.234.6592
    grant@icastinteractive.com l www.iCastInteractive.com
    This email message is for the sole use of the intended recipient(s) and may
    contain confidential and privileged information. Any unauthorized review,
    use, disclosure or distribution is prohibited. If you are not the intended
    recipient, please contact the sender by reply e-mail and destroy all copies
    ...
  • Profile Image

    Answered by pinoytech on February 04, 2014 at 01:59 AM

    Hi Grant,

    Please try to inject this custom css in your form.

    #last_1.form-textbox {

    position: absolute;

    margin-top: -26px !important;

    }

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Feel free to contact us again if you need further assistance.

  • Profile Image

    Answered by pinoytech on February 04, 2014 at 02:58 AM

    Hi Grant,

    In order to fixed the issue, just simply increase the width of your form. Inject this custom css into your form:

    .form-all {

    width: 315px !important;

    }

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Feel free to contact us again if you need further assistance.

  • Profile Image

    Answered by iCast on February 04, 2014 at 09:10 AM
    That kind of worked... but really didn't... They are now side by side, but
    "uneven" and the last name field is no longer marked.
    http://new.dougducey.com
    Thanks for the continued help!
    -Grant
    *Grant B. Wittstruck*
    Digital Strategy Director
    iCast Interactive l 118 Gwyn Dr. l Panama City Beach, FL 32407
    *O:* 850.249.8819 l *M:* 303.815.6161 I *F:* 850.234.6592
    grant@icastinteractive.com l www.iCastInteractive.com
    This email message is for the sole use of the intended recipient(s) and may
    contain confidential and privileged information. Any unauthorized review,
    use, disclosure or distribution is prohibited. If you are not the intended
    recipient, please contact the sender by reply e-mail and destroy all copies
    ...
  • Profile Image

    Answered by iCast on February 04, 2014 at 09:10 AM
    Ok, I removed the other code you asked for me to add, and then added the
    new code. That did not work either...
    I am using a iFrame embed. http://new.dougducey.com
    -Grant
    *Grant B. Wittstruck*
    Digital Strategy Director
    iCast Interactive l 118 Gwyn Dr. l Panama City Beach, FL 32407
    *O:* 850.249.8819 l *M:* 303.815.6161 I *F:* 850.234.6592
    grant@icastinteractive.com l www.iCastInteractive.com
    This email message is for the sole use of the intended recipient(s) and may
    contain confidential and privileged information. Any unauthorized review,
    use, disclosure or distribution is prohibited. If you are not the intended
    recipient, please contact the sender by reply e-mail and destroy all copies
    ...
  • Profile Image
    JotForm Support

    Answered by TitusN on February 04, 2014 at 10:41 AM

    Thank you for your response.

    Try using separate fields for first Name and Last Name.

    That will allow more flexibility to style it further with CSS.

    Please let us know when you do, and we will offer some styles to organize the fields for all browsers: 

     

  • Profile Image

    Answered by iCast on February 04, 2014 at 11:20 AM
    completed, but I cannot get them to go side by side with the small space
    they need to go in. I would also prefer to have the variables to go inside
    the text fields? Make sense?
    *Grant B. Wittstruck*
    Digital Strategy Director
    iCast Interactive l 118 Gwyn Dr. l Panama City Beach, FL 32407
    *O:* 850.249.8819 l *M:* 303.815.6161 I *F:* 850.234.6592
    grant@icastinteractive.com l www.iCastInteractive.com
    This email message is for the sole use of the intended recipient(s) and may
    contain confidential and privileged information. Any unauthorized review,
    use, disclosure or distribution is prohibited. If you are not the intended
    recipient, please contact the sender by reply e-mail and destroy all copies
    ...
  • Profile Image
    JotForm Support

    Answered by TitusN on February 04, 2014 at 12:07 PM

    Yes it does.

    Thank you for your response.

    I guess we should revert to the former version. 

    Please try the following:

    I've created a test form - Please try embedding this code (highlighted):

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/40345050575954" frameborder="0" style="width:100%; height: 340px !important; border:none;" scrolling="no"></iframe>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    If it works, I will move the form into your account so you can keep using it.

    You can also style the color so that it looks exactly how you wish.

    Looks OK from my end though:

    Let us know if this helps.

     

  • Profile Image

    Answered by iCast on February 04, 2014 at 12:20 PM
    Ok, that works perfect. I need to have the variable titles removed and
    adding into the boxes, gray background, and blue button.
    Thanks for the help!
    *Grant B. Wittstruck*
    Digital Strategy Director
    iCast Interactive l 118 Gwyn Dr. l Panama City Beach, FL 32407
    *O:* 850.249.8819 l *M:* 303.815.6161 I *F:* 850.234.6592
    grant@icastinteractive.com l www.iCastInteractive.com
    This email message is for the sole use of the intended recipient(s) and may
    contain confidential and privileged information. Any unauthorized review,
    use, disclosure or distribution is prohibited. If you are not the intended
    recipient, please contact the sender by reply e-mail and destroy all copies
    ...
  • Profile Image
    JotForm Support

    Answered by TitusN on February 04, 2014 at 12:40 PM

    Hello,

    Thank you for the feedback.

    I've done my best - but I think the form may need your touch.

    I just moved the form to your account - its called subscription - front page

    Please let us know how we can assist further.                

  • Profile Image

    Answered by iCast on February 04, 2014 at 12:40 PM
    I also forgot, I need each variable to be required, however, I do not want
    the starburst to show unless its inside the text field.
    Thanks!
    *Grant B. Wittstruck*
    Digital Strategy Director
    iCast Interactive l 118 Gwyn Dr. l Panama City Beach, FL 32407
    *O:* 850.249.8819 l *M:* 303.815.6161 I *F:* 850.234.6592
    grant@icastinteractive.com l www.iCastInteractive.com
    This email message is for the sole use of the intended recipient(s) and may
    contain confidential and privileged information. Any unauthorized review,
    use, disclosure or distribution is prohibited. If you are not the intended
    recipient, please contact the sender by reply e-mail and destroy all copies
    ...
  • Profile Image
    JotForm Support

    Answered by TitusN on February 04, 2014 at 12:47 PM

    I was just about to post that.

    Please inject the following CSS rules in your form below the other CSS rules.

    #label_1 {
    display: none;
    }

    #label_3 {
    display: none;
    }

    Save the form, then re-embed the following code once again:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/40345050575954" frameborder="0" style="width:100%; height: 290px !important; border:none;" scrolling="no"></iframe>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Let us know if this helps.

  • Profile Image

    Answered by iCast on February 04, 2014 at 01:00 PM
    PERFECT!
    *Grant B. Wittstruck*
    Digital Strategy Director
    iCast Interactive l 118 Gwyn Dr. l Panama City Beach, FL 32407
    *O:* 850.249.8819 l *M:* 303.815.6161 I *F:* 850.234.6592
    grant@icastinteractive.com l www.iCastInteractive.com
    This email message is for the sole use of the intended recipient(s) and may
    contain confidential and privileged information. Any unauthorized review,
    use, disclosure or distribution is prohibited. If you are not the intended
    recipient, please contact the sender by reply e-mail and destroy all copies
    ...