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

    How to pre-populate a text field with data from another part of the webpage where the form is embedded?

    Asked by ptn0301 on April 30, 2014 at 12:09 PM

    Hi

    I am trying to pre-populate a text field of a form with data from another part of the page where the form is embedded.??

     

    Its simple a VRM no. of the product the form is on. Is this psossible.

     

    Thanks in advance

     

    Pics attached.

    Page URL:
    http://www.skyemotion.net/berlingo-l1-hdi-75-625-lx-16-326-p.asp

    Screenshot
    text field product thanks attached
  • Profile Image

    Answered by EliezerN on April 30, 2014 at 01:54 PM

    Hi,

    What you are looking for is possible by adding URL parameters to your form URL. So, if the text/value you wish to prepopulate into the field Reg no. VRM) of your form is "YD60 FRV", then all you need to do is the following:

    1. First, find the name of the textbox field where you wish to pre-populate the data. You can use the Chrome browser inspector: 

    Once you get the name of the field of your form paste somewhere, we will use it later.

    2. Then get the iframe code of your form, which is the one you are using to embed your form into your webpage. Here is how to get the iframe code: Getting the form iframe code

    3. Then, once you have the iframe code look for the form URL, once you find it add an ? at the end of the form URL and then add the field's name, the one we get in step 1, and after the field name ad an equal =. So, you need to add ?regNo= after the form URL in the iframe code. It must be this way:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotformpro.com/form/40343159945963?regNo=" frameborder="0" style="width:100%; height:4083px; 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>

    4. But you still need to add something else, the text/data you wish to populate in the field. If I'm not wrong, the text pointed out in the image is the one you wish to populate, right?

    So, simply copy it and paste it after the = we added in the previous step. So, now the final result will be:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotformpro.com/form/40343159945963?regNo=YD60 FRV" frameborder="0" style="width:100%; height:4083px; 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>

    And the result in your web page will be this:

    You can use the iframe code I used above, it belongs to your form.

    I hope this helps. Inform us if you need further assistance with this query.

    Thanks

  • Profile Image

    Answered by ptn0301 on April 30, 2014 at 03:36 PM

    thanks for your help much appreciated. any problems and I will let you know.

  • Profile Image

    Answered by ptn0301 on May 01, 2014 at 05:10 AM

    Hi

     

    Im not quite there.... This from is embedded in different pages with different reg numbers. Does this mean I have to add the code to each page? Or is there a way for the form to read the page its in and pick up the reg no. ??

    We need the form to pick up the VRM - [*******] on each page the from is generated? Maybe I wasn't clear enough...sorry.

    Thanks

     

  • Profile Image
    JotForm Support

    Answered by abajan on May 01, 2014 at 07:50 AM

    That can be done but there's no way that I know of to accomplish it with the iFrame version of the form code. As such, in each page you would need to substitute the form's full source for the iFrame and add a script to prepopulate the Reg. No. VRM textbox with the VRM. Moreover, in order for the script to pull the VRM information from the page it may be necessary to add an ID to the VRM element. (There might be a way around this particular obstacle though.)

    Depending on the number of vehicle pages on your site, the above procedure could be quite time consuming. Let me see what I can come up with and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on May 01, 2014 at 10:37 AM

    Hi again,

    As previously mentioned, in each page you'll need to replace the form's iFrame code with its full source. After doing so, insert this code anywhere after the form code.

    Unfortunately, as mentioned in the guide, the disadvantage with using the full source is that each time you change anything in the form in the form builder (except for email alerts), you'll need to replace every instance of the form with the updated code from the Embed Form Wizard. With your site that can be quite a bit of work. So, it would be best to ensure that the form's design and functionality is as you wish before embedding it in each of your website's pages.

    If you need further assistance with this, please let us know.


    Thanks