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 can I pre-populate AND automatically submit a form?

    Asked by marleenkookt on June 04, 2012 at 05:14 PM

    i have a customer satisfaction survey that I send to customers by mail. It contains one question (did you like our service), that they can answer by clicking on one of three different links (liked it very much, it was OK, did not like it). 

    They all direct to one survey, with the answer to the question already populated. We will then ask one more follow-up question, depending on their initial answer, before they can submit their answer. We are missing some answers though, as some customers will answer the initial question and click the link, but will not answer the follow-up question. 

    I would like to collect those initial answers, by automatically submitting (or capturing in another way) the initial response and then automatically direct to the follow-up question. How to go about this?

  • Profile Image
    JotForm Support

    Answered by jonathan on June 04, 2012 at 05:49 PM

    Hi,

    You may want to check out this JotForm guides. I can see this will be able to meet your requirements.

    -How-to-Redirect-to-a-Page-After-Form-Submission

    AND

    -Prepopulating-the-fields-to-your-JotForm-via-URL-parameters

     

    You will need at least 2 forms, the first one will be the initial answer survey. After the initial form was submitted, make it redirect to the 2nd form (use the redirect guide) with the link already contains the url parameters.

    When it gets redirected to the 2nd form, the inital answer should be already pre-populate the second form. Make sure that the 2nd form have a question field similar to the question in the initial form (this will properly populate the field/question)

    By the way, there is no automatic submission in JotForm, you will have to provide the submit process -- and the user will have to submit the form. If the user does not want to submit(click submit button), there is really not much we can do about it.

    Hope this help. Please inform us if you need assistance in doing this.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 04, 2012 at 06:55 PM

    Hi,

    I expanded this further...

    Here is my sample form, you may want to clone it to see how I created 2 forms with the 2nd already pre-populated based on the initial submitted form result.

    http://www.jotform.me/form/21557625503452 

    and 2nd form 

    http://www.jotform.me/form/21556982865468

    Hope this help. Thanks.

  • Profile Image

    Answered by marleenkookt on June 06, 2012 at 04:12 AM

    Hi Jonathan,

    Thank you for your help. That part I understand. I was really looking for a way to automatically submit a response after clicking the link. Given that another customer requested the same feature just the other day, would you please check with your development team if that is something they would consider buidling?

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on June 06, 2012 at 05:11 AM

    Hi marleenkookt,

    The "automated response" submission functionality (actually there are different versions of it), was already among the lists of feature requests on the list of our dev team. But since it is a feature requests, we cannot really provide a target ETA for it. We can only wait when this feature finally get to materialized.

    Although I seem to have gotten and idea about this, and I think the "auto redirect" can already be achieved if you used the form source code on an html page.

    Theoretically:

    1. The initial form when submitted should be sent to a custom URL

    2. The custom URL is an html page that contains the 2nd form

    3. You can simpy pre-populate the 2nd form using the same method used on the Thank you page link

    BUT this method will require you to embed the form to your own website becaue you must have control of the development of the html page.

    Please inform us you are interested to pursue what I describe, and perhaps you have the required resources.

    Thank you for considering our service. 

  • Profile Image

    Answered by marleenkookt on June 06, 2012 at 05:44 AM

    Thanks again for your rapid feedback. Yes, I am very interested in researching this. I have no problem embedding an html page in my website, but would need a little bit further clarification/help.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 06, 2012 at 05:55 AM

    Thank you for the immediate update. =)

    I will try to create/apply the theory I describe on my test site. I will post back as soon as I have it working (I have greate hope it should wokr). 

    Will update.

    Thanks.

  • Profile Image

    Answered by marleenkookt on June 11, 2012 at 05:55 AM

    Hi Jonathan,

    How is the test coming along. Did you get it to work?

    Thanks,

    Joris

  • Profile Image
    JotForm Support

    Answered by jonathan on June 11, 2012 at 07:43 AM

    Hi Joris,

    I am back to working on it.

    Please give me within the day to update you again.

    Thank you for following it up.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 12, 2012 at 06:41 PM

    Hi Joris,

    My apology for the delays.. But finally, here are my results.

    Please check the form here

    As I am not sure if server-side scripting is available on your end, I had to make use of all client-side I could come up with.

    That is, by using javascript and cookie base sessions to be able to capture transport of information from one page to another without resolving to clicking on extra link from a thank you page.

    Keys/Requirements to be noted:

    1. The 2 forms have to be created in JotForm

    2. Submissions report from 1st form are all still captured

    3. The 1st form has a custom thank you redirect to URL page (to the 2nd form page)

    4. Source code embed was used on both forms to be able to inject custom functions via javascript when deployed on a website page.

    5. The very purpose of this demo was to eliminate the route to the linked thank you page to be able to transport to a second page with the initial required information/data still captured.

    6. The full features of the JotForm forms are all intact. Most specially the 'submit.php' because this is important for submission reports results.

    These are the forms.

    http://www.jotform.me/form/21557625503452 

    and 2nd form 

    http://www.jotform.me/form/21556982865468

    You can clone them to check how they were setup in JotForm.

    As for the test pages, you can simply Right-Click/View source to check on the custom functions created.

    I hope this help in some ways. Please inform us if further assistance is needed.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on June 13, 2012 at 08:39 AM

    @marleenkookt

    In addition to the solution provided my colleague, an onClick event can be inserted into each of the radio button's input tag to eliminate the need for a submit button. That's one click less in the process.

    Here's a demo

    The onClick events can be seen in the source of that page.

  • Profile Image

    Answered by sv on August 26, 2012 at 10:33 AM

     hi abajan,


    i need your help. i am trying to automate my form - but do not want to submit form by onclick event - i want to jump to page 2 of the form. how to do?

  • Profile Image
    JotForm Support

    Answered by abajan on August 26, 2012 at 10:59 AM

    @sv

    If you wish to have the form immediately jump to page 2 upon clicking a specific radio button or check box, or upon selecting an item in a dropdown menu, a copy of the form's full source would need to be embedded into a page along with a script.

    If you identify the form (either by its URL or name) and state the specific element (radio button, check box or drop down) that is to trigger the jump to page 2, I should be able to provide a solution.

  • Profile Image

    Answered by sv on August 26, 2012 at 11:06 AM

    http://form.jotformpro.com/form/22383224856961

  • Profile Image

    Answered by sv on August 26, 2012 at 11:06 AM

    this is my test at the moment.

  • Profile Image
    JotForm Support

    Answered by abajan on August 26, 2012 at 11:09 AM

    @sv

    Which of those two buttons (Yes or No) should trigger the jump to page 2?

  • Profile Image

    Answered by sv on August 26, 2012 at 11:11 AM

    both. It doesn't matter whether "YES" or "NO"

  • Profile Image
    JotForm Support

    Answered by abajan on August 26, 2012 at 11:14 AM

    Yeah, I know (lol I just found out by checking the condition set in the form builder.) Thanks for the info anyway.

    I'll see what code I can come up with sometime today.

  • Profile Image
    JotForm Support

    Answered by abajan on August 26, 2012 at 11:21 AM

    Ah, no. That's a condition related to Question 3. So it looks like I needed the information you provided after all. Anyway, I'll be back later with a solution (knock wood).

  • Profile Image
    JotForm Support

    Answered by abajan on August 26, 2012 at 02:05 PM

    Hi again

    After embedding a copy of the form's source into a web page of your choice, add this code just before the closing body tag of the page. When done, your form should function like its clone embedded in this page.

    Would you like similar functionality to be attached to other elements of the form? If so, finish building the form and let me know when you're done.

    How to get your Form Source Code

  • Profile Image

    Answered by sv on August 28, 2012 at 03:47 AM

    http://form.jotformpro.com/form/22392769982975

    thats it.

    automatic submit all radio button pages

     

    thank you very much :-)

  • Profile Image
    JotForm Support

    Answered by abajan on August 28, 2012 at 04:14 AM

    @sv

    Okay thanks. I'll see what I can do and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on August 28, 2012 at 05:22 AM

    @sv

    Straight away, I can tell you that automatic progession to the next page will not work for page 4 (the text box where the user is to specify their roof's area) because there's no set number of characters which the user must enter. However, if the user is asked to enter the data in a specific manner, it can work. For instance, they can be asked to append sq m to the value or if using the alternative, enter (say) 25L x 40B, where the script would know to advance to the next page once either m or B is entered. But just in case the user doesn't enter the value as directed, the "Weiter" button should not be hidden. Then again, for simplicity's sake, it would probably be best not to have any auto-advancing functionality attached to that particular field.

  • Profile Image
    JotForm Support

    Answered by abajan on August 28, 2012 at 10:21 PM

    @sv

    Please add this code just before the closing body tag in the source of the same page in which the form is embedded.

    When done, the form should work like the clone on this page. Incidentally, in case you were wondering, it's neither practical nor desireable to implement auto-submission upon completion of the last page. What if users want to review their entries before submission?

    Do let us know if you need further assistance with your forms.

  • Profile Image

    Answered by sv on August 29, 2012 at 06:18 AM

    working but 1 problem. test yourself on the last page. it is displayed on the top of the page:

    http://photovoltaik-anlage.info/test.html

  • Profile Image
    JotForm Support

    Answered by abajan on August 29, 2012 at 06:47 AM

    Yes, I see what you mean. This is being caused by the absolute re-positioning of page 6 which is necessary to hide page 4 when the "Zurück" button on page 6 is clicked. (I have no idea why page 4 kept showing up when that button was clicked. Perhaps my colleagues can enlighten me!)

    Probably, the best way around the problem would be to place the form on a blank page on your site and then use an iFrame to display it on the http://photovoltaik-anlage.info/test.html page. I'll run some tests to see how feasible this is and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on August 30, 2012 at 03:48 PM

    Just to update you that my tests showed that using an iFrame to embed the form from another page on your site will solve the problem to which you referred. The solution is used on this page. You can see the iFrame in the source of the page. Unfortunately, in order to accommodate the height of the last section of the form, the iFrame's height had to be set to 380px and this causes a space to appear under the other sections of the form. Hopefully, the code given by SitePoint Guru Logic Ali in this thread can be used to correct that.

  • Profile Image

    Answered by sv on August 30, 2012 at 04:51 PM

    one problem. the submit of the form does not work.

  • Profile Image
    JotForm Support

    Answered by abajan on August 30, 2012 at 07:04 PM

    Wow, that's not good! After all, what's the use of a form if it can't be submitted? I'll definitely check it out and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on August 31, 2012 at 10:07 AM

    @sv

    This is much trickier than it seems. The strange thing is that if the "Back" on the last page is clicked to go back to page 5 and then a radio button is selected to go forward to page 6, the submit button works!

    Nevertheless, I think I can devise a way around this. I'll be back later with a solution.

  • Profile Image
    JotForm Support

    Answered by abajan on August 31, 2012 at 11:26 PM

    @sv

    I've found a solution for the failure of the form to submit. I'll post it within the next eight hours or so, after thoroughly testing it.

  • Profile Image
    JotForm Support

    Answered by abajan on September 01, 2012 at 07:59 AM

    @sv

    Please do the following:

    1. Inject the following CSS:

    .form-buttons-wrapper {
    width: 211px;
    position: absolute;
    top: 237px;
    left: 201px;
    margin: 0 !important;
    }

    #submitButton {
    display:none;
    }

    2. Copy the form's source from the Embed Form Wizard

    3. Create a new page in your website and paste the code copied in step 2 into the source of that page

    4. Either remove or comment out this section of the code

    5. Insert this code between the last closing ul tag and last closing div tag of the code

    6. Insert this code after the closing form tag and save the changes

    7. In the area of the other web page where the form is to appear, insert this iFrame (substituting the actual URL of the page on your site that contains the form) and save the change

    If you need further assistance with this or any other JotForm related matter, please let us know.

  • Profile Image

    Answered by sv on September 01, 2012 at 11:27 AM

    http://photovoltaik-anlage.info/angebote-vergleich.html

    did everything you told me.

    button is inside - but does not submit.

    what did I wrong?

  • Profile Image
    JotForm Support

    Answered by abajan on September 01, 2012 at 12:38 PM

    It appears that the division (div) that contains the customized submit button has been inserted in the wrong position. It should be placed after the last unordered list (ul) tag instead of before it. The following is a screenshot of that page's source, showing what I mean:


    Also, could you provide the URL of the page having the iFrame that points to that page?

  • Profile Image

    Answered by sv on September 03, 2012 at 06:48 AM

    thank you very much.

    it works.

    could you give me code also for these form:

    http://form.jotformpro.com/form/22462440306949

    thank you so much.

  • Profile Image
    JotForm Support

    Answered by abajan on September 03, 2012 at 10:36 AM

    Sure, no problem, sv. I should have that for you sometime later today.

  • Profile Image
    JotForm Support

    Answered by abajan on September 03, 2012 at 10:35 PM

    @sv

    In the case of the newer form, please do the following:

    1. Inject the following CSS:

    .form-buttons-wrapper {
    position: relative;
    top: -48px;
    right: 11px;
    float: right;
    margin: 0 !important;
    }

    #submitButton {
    display:none;
    }

    .form-line-error {
    background: none repeat scroll 0 0;
    }

    .form-error-message {
    display: none !important;
    }

    .form-button-error {
    position: absolute;
    top: -35px;
    left: 0;
    min-width: 173px;
    }

    2. While on the Setup & Embed tab, go to Preferences > Advanced Settings > Edit Form Warnings > Click There are incomplete required fields. Please complete them. and change it to * = Required Field > Click OK > Save > Close Settings

    3. Copy the form's source from the Embed Form Wizard

    4. Create a new page in your website and paste the code copied in step 3 into the source of that page

    5. Remove this section of the code

    6. Insert this code between the last closing ul tag and last closing div tag of the code

    7. Insert this this code (some of the comments in the first link were incorrect) after the closing form tag and save the changes

    8. In the area of the other web page where the form is to appear, insert this iFrame (substituting the actual URL of the page on your site that contains the form) and save the change. (You may need to adjust the height of the iFrame).

    Your page which contains the iFrame should now display the form like this demo page.

    Incidentally, upon running a test submission on a clone of the form, I noticed that the notification was missing a lot of answers. That's because many of the {tags} it contains are for fields that have apparently been deleted. The simplest fix for this is to just delete the notification and replace it with a new one.

    Should you need additional assistance with the form, please let us know. We'd be glad to help.

  • Profile Image

    Answered by sv on September 04, 2012 at 02:23 AM

    http://wwwtest24.com/svtest/ is not working with other css classes?

    did integrate exactly same code of the form.

  • Profile Image
    JotForm Support

    Answered by abajan on September 04, 2012 at 05:06 AM

    @sv

    Just like your other form, this form's edited source and the custom script should be embedded in a blank page on your site. (By "blank" I mean that it should have no other content but the basic web page tags or it can even just contain the edited form code and custom script.) The form can then be displayed on the intended page via an iFrame. If the source of my demo page is viewed, you will see that the form is not actually there. There is just an iFrame pointing to the page that has the edited form and the custom script: http://formdemos.awardspace.biz/form_22463816789871.html. If the source of that page is viewed, you'll notice that it contains just the edited form code and the custom script.

    By using an iFrame, potential conflicts between the page's existing scripts and those associated with the form are avoided. Please note that the page containing the edited form code and custom script and the page where the form is to be displayed should be on the same domain (unless the form code and custom script reside at a domain that allows external sites to frame their content).

  • Profile Image
    JotForm Support

    Answered by abajan on September 04, 2012 at 06:51 AM

    @sv

    I've tweaked the injected CSS and custom script a bit to both reduce the size of the page that contains them and prevent the initial flash of page break buttons on page 1. Please do the following:

    1. Replace the injected CSS with the following:

    #form-pagebreak-back_13, #form-pagebreak-next_13,
    #form-pagebreak-next_21, #form-pagebreak-next_20,
    #form-pagebreak-next_27, #form-pagebreak-next_53,
    #form-pagebreak-next_54, #form-pagebreak-next_55,
    #form-pagebreak-next_56, #form-pagebreak-next_58,
    #form-pagebreak-next_59, #form-pagebreak-next_28,
    #submitButton {
    display: none;
    }

    .form-buttons-wrapper {
    position: relative;
    top: -48px;
    right: 11px;
    float: right;
    margin: 0 !important;
    }

    .form-line-error {
    background: none repeat scroll 0 0;
    }

    .form-error-message {
    display: none !important;
    }

    .form-button-error {
    position: absolute;
    top: -35px;
    left: 0;
    min-width: 173px;
    }

    2. Replace the custom script that's under the form code with this.