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

    Same Form, Different Code?

    Asked by csmarketing on August 06, 2012 at 05:35 PM

    So I have created a sort of dynamic form. A field changes depending on the page it's located. 

    Oddly, when I have the JS code displayed on two browser tabs (in Chrome. IE tries to download it), I am seeing changes in the code, close to the bottom.

     

    Examples:

    http://form.jotform.us/jsform/20674515951153?solutionPage=Inbound%20Call%20Tracking

    vs.

    http://form.jotform.us/jsform/20674515951153?solutionPage=SNAPSHOT

     

    Same form. It's just a different input into the hidden "solutionPage" field. But the code at the bottom is definitely different. 

     

    I am trying to understand why the code changes at all, besides where the hidden field input changes. It's definitely causing minor issues on the final web page. The send/submit button is getting pushed to the left vs the right (a change I made).

  • Profile Image
    JotForm Support

    Answered by jonathan on August 06, 2012 at 11:32 PM

    Hi,

    Can you please provide us more details on which "code at the bottom" you were referring to?

    Sorry, I could not seem to find by myself this part you were refering to.

    Will await your update.

    Thanks.

  • Profile Image

    Answered by csmarketing on August 07, 2012 at 10:42 AM

    I compared the two files in Word and here's what I got, starting at the FrameBuilder section of the script. You can see the two places that text changed. Of course the first one, where the hidden field "solutionPage" changes. But closer to the bottom, "margin-left:156px" is changing to "text-align:left" -- in the same form, just different hidden field input. I've cleared cache and such, but am still getting same results.

    FrameBuilder.get = {"solutionPage":"SNAPSHOTInbound Call Tracking"};

    var i20674515951153 = new FrameBuilder("20674515951153", false, "", "<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/strict.dtd\">\n<html><head>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\" \/>\n<meta name=\"HandheldFriendly\" content=\"true\" \/>\n<title>Form<\/title>\n<link target="_blank" href=\"http:\/\/max.jotfor.ms\/min\/g=formCss?3.0.3779\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<style type=\"text\/css\">\n    .form-label{\n        width:150px !important;\n    }\n    .form-label-left{\n        width:150px !important;\n    }\n    .form-line{\n        padding-top:10px;\n        padding-bottom:10px;\n    }\n    .form-label-right{\n        width:150px !important;\n    }\n    body, html{\n        margin:0;\n        padding:0;\n        background:false;\n    }\n\n    .form-all{\n        margin:0px auto;\n        padding-top:20px;\n        width:280px;\n        color:Black !important;\n        font-family:'Verdana';\n        font-size:12px;\n    }\n    \/* Injected CSS Code *\/\n#label_4 { visibility:hidden !important;}#id_4 {padding-top:0 !important; }.form-all {\npadding-top: 0;}.form-all {\npadding-bottom: 0;}\n    \/* Injected CSS Code *\/\n<\/style>\n\n<link type=\"text\/css\" rel=\"stylesheet\" target="_blank" href=\"http:\/\/jotform.us\/css\/styles\/buttons\/form-submit-button-light.css?3.0.3779\"\/>\n<script src=\"http:\/\/max.jotfor.ms\/min\/g=jotform?3.0.3779\" type=\"text\/javascript\"><\/script>\n<script type=\"text\/javascript\">\n var jsTime = setInterval(function(){try{\n   JotForm.jsForm = true;\n\n   JotForm.init(function(){\n      $('input_4').hint('ex: myname@example.com');\n      JotForm.alterTexts({\"alphabetic\":\"This field can only contain letters\",\"alphanumeric\":\"This field can only contain letters and numbers.\",\"confirmClearForm\":\"Are you sure you want to clear the form\",\"confirmEmail\":\"E-mail does not match\",\"email\":\"Enter a valid e-mail address\",\"incompleteFields\":\"Please complete this form.\",\"lessThan\":\"Your score should be less than\",\"numeric\":\"This field can only contain numeric values\",\"pleaseWait\":\"Please wait...\",\"required\":\"This field is required.\",\"uploadExtensions\":\"You can only upload following files:\",\"uploadFilesize\":\"File size cannot be bigger than:\"});\n   });\n\n   clearInterval(jsTime);\n }catch(e){}}, 1000);\n<\/script>\n<\/head>\n<body>\n<form class=\"jotform-form\" action=\"http:\/\/submit.jotform.us\/submit\/20674515951153\/\" method=\"post\" name=\"form_20674515951153\" id=\"20674515951153\" accept-charset=\"utf-8\">\n  <input type=\"hidden\" name=\"formID\" value=\"20674515951153\" \/>\n  <div class=\"form-all\">\n    <ul class=\"form-section\">\n      <li class=\"form-line form-line-column\" id=\"id_4\">\n        <label class=\"form-label-top\" id=\"label_4\" for=\"input_4\">\n          E-mail<span class=\"form-required\">*<\/span>\n        <\/label>\n        <div id=\"cid_4\" class=\"form-input-wide\">\n          <input type=\"email\" class=\"form-textbox validate[required, Email]\" id=\"input_4\" name=\"q4_email4\" size=\"31\" \/>\n        <\/div>\n      <\/li>\n      <li class=\"form-line form-line-column\" id=\"id_2\">\n        <div id=\"cid_2\" class=\"form-input-wide\">\n          <div style=\"margin-text-align:left:156px\" class=\"form-buttons-wrapper\">\n            <button id=\"input_2\" type=\"submit\" class=\"form-submit-button form-submit-button-light\">\n              Send\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/li>\n      <li style=\"display:none\">\n        Should be Empty:\n        <input type=\"text\" name=\"website\" value=\"\" \/>\n      <\/li>\n    <\/ul>\n  <\/div>\n  <input type=\"hidden\" id=\"simple_spc\" name=\"simple_spc\" value=\"20674515951153\" \/>\n  <script type=\"text\/javascript\">\n  document.getElementById(\"si\" + \"mple\" + \"_spc\").value = \"20674515951153-20674515951153\";\n  <\/script>\n  <input type=\"hidden\" class=\"form-hidden\" value=\"\" id=\"input_5\" name=\"q5_solutionPage\" \/>\n<\/form><\/body>\n<\/html>\n");

    Form<\/title>\n<link target="_blank" href=\"http:\/\/max.jotfor.ms\/min\/g=formCss?3.0.3779\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<style type=\"text\/css\">\n    .form-label{\n        width:150px !important;\n    }\n    .form-label-left{\n        width:150px !important;\n    }\n    .form-line{\n        padding-top:10px;\n        padding-bottom:10px;\n    }\n    .form-label-right{\n        width:150px !important;\n    }\n    body, html{\n        margin:0;\n        padding:0;\n        background:false;\n    }\n\n    .form-all{\n        margin:0px auto;\n        padding-top:20px;\n        width:280px;\n        color:Black !important;\n        font-family:'Verdana';\n        font-size:12px;\n    }\n    \/* Injected CSS Code *\/\n#label_4 { visibility:hidden !important;}#id_4 {padding-top:0 !important; }.form-all {\npadding-top: 0;}.form-all {\npadding-bottom: 0;}\n    \/* Injected CSS Code *\/\n<\/style>\n\n<link type=\"text\/css\" rel=\"stylesheet\" target="_blank" href="\"http:\/\/jotform.us\/css\/styles\/buttons\/form-submit-button-light.css?3.0.3779\"\/" _mce_target="_blank" href="/\"http:\/\/jotform.us\/css\/styles\/buttons\/form-submit-button-light.css?3.0.3779\"\/">\n<script src="\"http:\/\/max.jotfor.ms\/min\/g=jotform?3.0.3779\"" _mce_src="/\"http:\/\/max.jotfor.ms\/min\/g=jotform?3.0.3779\"" type=\"text\/javascript\"><\/script>\n<script type=\"text\/javascript\">\n var jsTime = setInterval(function(){try{\n   JotForm.jsForm = true;\n\n   JotForm.init(function(){\n      $('input_4').hint('ex: myname@example.com');\n      JotForm.alterTexts({\"alphabetic\":\"This field can only contain letters\",\"alphanumeric\":\"This field can only contain letters and numbers.\",\"confirmClearForm\":\"Are you sure you want to clear the form\",\"confirmEmail\":\"E-mail does not match\",\"email\":\"Enter a valid e-mail address\",\"incompleteFields\":\"Please complete this form.\",\"lessThan\":\"Your score should be less than\",\"numeric\":\"This field can only contain numeric values\",\"pleaseWait\":\"Please wait...\",\"required\":\"This field is required.\",\"uploadExtensions\":\"You can only upload following files:\",\"uploadFilesize\":\"File size cannot be bigger than:\"});\n   });\n\n   clearInterval(jsTime);\n }catch(e){}}, 1000);\n<\/script>\n<\/head>\n<body>\n<form class=\"jotform-form\" action=\"http:\/\/submit.jotform.us\/submit\/20674515951153\/\" method=\"post\" name=\"form_20674515951153\" id=\"20674515951153\" accept-charset=\"utf-8\">\n  <input type=\"hidden\" name=\"formID\" value=\"20674515951153\" \/>\n  <div class=\"form-all\">\n    <ul class=\"form-section\">\n      <li class=\"form-line form-line-column\" id=\"id_4\">\n        <label class=\"form-label-top\" id=\"label_4\" for=\"input_4\">\n          E-mail<span class=\"form-required\">*<\/span>\n        <\/label>\n        <div id=\"cid_4\" class=\"form-input-wide\">\n          <input type=\"email\" class=\"form-textbox validate[required, Email]\" id=\"input_4\" name=\"q4_email4\" size=\"31\" \/>\n        <\/div>\n      <\/li>\n      <li class=\"form-line form-line-column\" id=\"id_2\">\n        <div id=\"cid_2\" class=\"form-input-wide\">\n          <div style="\"<span" _mce_style="">margin-</span><span>text-align:</span>left<span>:156px</span>\" class=\"form-buttons-wrapper\">\n            <button id=\"input_2\" type=\"submit\" class=\"form-submit-button form-submit-button-light\">\n              Send\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/li>\n      <li style="\"display:none\"" _mce_style="\"display: none\";">\n        Should be Empty:\n        <input type=\"text\" name=\"website\" value=\"\" \/>\n      <\/li>\n    <\/ul>\n  <\/div>\n  <input type=\"hidden\" id=\"simple_spc\" name=\"simple_spc\" value=\"20674515951153\" \/>\n  <script type=\"text\/javascript\">\n  document.getElementById(\"si\" + \"mple\" + \"_spc\").value = \"20674515951153-20674515951153\";\n  <\/script>\n  <input type=\"hidden\" class=\"form-hidden\" value=\"\" id=\"input_5\" name=\"q5_solutionPage\" \/>\n<\/form><\/body>\n<\/html>\n");</p> <p><br /></p><p><br /></p> <p><br /></p><p><br /></p>

  • Profile Image

    Answered by csmarketing on August 07, 2012 at 10:47 AM

    Wow, my apologies. That post became an absolute mess. 

    I tried editing it to highlight the 2 areas that change (despite it being the same form). When doing that, it duplicated the code I had entered. 

    If that doesn't make sense, let me know and I will repost in a hopefully cleaner format.

  • Profile Image

    Answered by csmarketing on August 07, 2012 at 12:15 PM

    Well, I am officially confused. 

    I've got these two links (the direct URL to the form in question):

    http://form.jotform.us/form/20674515951153

    http://form.jotform.us/form/20674515951153?solutionPage=SNAPSHOT

    They look different on any computer in my office (including machines that have NEVER visited the URL). The button is a different style and is aligned to the left vs the right. However, if I pull those links up on my phone, they are identical (except of course for the hidden field). Same button and alignment. And I have also confirmed that outside my employers network on another computer, they look identical.

    So, my guess is that there is some higher power of caching going on with employer's IT system. The version with the URL addition is cached somewhere beyond our personal systems. 

    Therefore, I've got to assume this has nothing to do with Jotform and I apologize for taking any of your time.

    -Cameron

  • Profile Image
    JotForm Support

    Answered by jonathan on August 07, 2012 at 12:42 PM

    Cameron,

    I was able to finally understand the 'difference' you were trying to explain earlier...

    I as I was able to finally see it on my end. Was it look like this?

     

     

    The difference when looking at its code..

     

    If it is.. Let me investigate further and hopefully, can able to provide you the answer we seek for.

    Thanks.

  • Profile Image

    Answered by csmarketing on August 07, 2012 at 01:01 PM

    Oh, wow, yeah, that's exactly it. 

    The same form, but things are not getting updated or something. I thought for sure it was internal to my network.

    So, the button style, button alignment on the URL with the addition is not getting updated. Seems to be pointing at the 2nd div tag's style being part of the problem.

    The URL with just the form number is how it should appear. 

  • Profile Image
    JotForm Support

    Answered by jonathan on August 07, 2012 at 08:14 PM

    Hi,

    I seem to figure the issue to be related to the sub-domain. Try replacing in the URL the 'form' to 'www'. Thus, should be like this

    http://www.jotform.us/form/20674515951153

    and

    http://www.jotform.us/form/20674515951153?solutionPage=SNAPSHOT

    using that URL like this seems to resolve the server latency issue.

    Please inform us if further issue pesists.

    Thanks.

  • Profile Image

    Answered by csmarketing on August 08, 2012 at 01:05 PM

    I did the same thing to the embed JS version of the URL and it does work!

    Thank you very much for investigating.