Is a 2 page checkout possible?

  • Profile Image
    Spencer
    Asked on September 12, 2012 at 05:28 PM

    Hi,

      I am looking to have the user fill out some of their details on the Home Page and select a product for purchase. Then they would be directed to the next page where they will fill in any remaining info and their credit card info. Such a form would also have the be fully integrated with authorize.net. So to explain further I do not need a 2 page form but rather a 2 page checkout workflow in a sense where the user enters their credit card info on a completely separate web page.

    Is this possible?

    Here is roughly what the first part of the setup would look like on the home page:

     

    Here is what the second page would roughly look like:

    Please let me know if this is possible with Jotforms.

    Thanks Very Much

    Spence

  • Profile Image
    fxr
    Answered on September 12, 2012 at 06:22 PM

    Yes,

    Use the Page Break tool and change the 'Next' text to 'Proceed to Checkout'

     

     

     

    A very basic example form is shown here

    --

    If you need any help styling elements on your form, let us know and we do our best to help out. 

  • Profile Image
    Spencer
    Answered on September 12, 2012 at 09:06 PM

    Hey Thanks for the answer! Won't the second part of the form appear on the same page though? My goal is to have the user land on another page that has the 2nd part of the form embeded on it. What do u think?

  • Profile Image
    liyam
    Answered on September 12, 2012 at 10:40 PM

    Having the page break will make the form look like you have another page but it's still actually on the same page of your website.  The single form is divided into multiple pages to prevent the cluttering of a lengthy form into a single page.

    If you would like to set up an actual 2-page, then this would mean you will need to create two forms (1 for every page).

    Please let us know if you need further clarification on this matter.

  • Profile Image
    Spencer
    Answered on September 13, 2012 at 11:57 AM

    Hi Liyam!

    Oh ok that makes sense. However here is where I am stuck. Since I have to have it so the user fills out most info on the home page and the credit card details on the second page, how would it work with two forms?Could I carry over information from the first form to the second silently or pre-populate it?

    Spence

  • Profile Image
    liyam
    Answered on September 13, 2012 at 01:18 PM

    Yes, Spence, it's possible to prepopulate your 2nd form from the same fields form the first form using the POST data submission feature used by the 1st form, then setting a Thank you page that will process the prepopulation of your 2nd form.

    Here's the user guide that talks about using the POST data submission feature of your form: http://www.jotform.com/help/51-How-to-Post-Submission-Data-to-Thank-You-Page

    Then this PHP script will be the one that will act like your 1st form's 'thank you' page and at the same time will be the processor of prepopulating your 2nd form: http://pastie.org/4659817

    Here is my colleague's sample 2-part form that prepopulates the 2nd form from the 1st form: http://www.jotform.com/form/11231828239

    If you need further assistance, please do let us know.

  • Profile Image
    Spencer
    Answered on September 15, 2012 at 12:49 PM

    Hi Liyam,

      Ok sounds good. I got the 2 forms built, activated the POST data on Form 1, entered the Authorize.net API info, but not sure where to add the PHP script...

    Spence

  • Profile Image
    fxr
    Answered on September 15, 2012 at 03:15 PM

    Hi Spencer,

    Can you please post a link to the page/form that you are using as your 'thankyou' page. 

    We should be able to work what PHP you need to populate the 2nd form from there. 

  • Profile Image
    ultraslimplus
    Answered on September 15, 2012 at 03:31 PM

    Hi Liyam,

    1.) Tags are carrying over instead of actual user data:

     

    2.)  If I redirect the Thank You page to the Joomla Article that Form 2 is on that contains the credit card fields, the user data is not carried over even though I added it to the Embed code in the Joomla Module:

     

    Please note that I have Not used the PHP script you mentioned above as I have no idea where to place it. I have a feeling that will solve the problems above.

     

    Spence

  • Profile Image
    jonathan
    Answered on September 15, 2012 at 05:57 PM

    @Spence

    Hi, as the guide-How-to-Post-Submission-Data-to-Thank-You-Page stated, you will need to have PHP supported and activated in your website server. The PHP script mentioned was to be the Thank you redirection page i.e. when you submit the form, the thank you page should be 'http://www.slimplus.com/orderform.php

     

    2.)  If I redirect the Thank You page to the Joomla Article that Form 2 is on that contains the credit card fields, the user data is not carried over even though I added it to the Embed code in the Joomla Module:

    This guide -Prepopulating-the-fields-to-your-JotForm-via-URL-parameters is different from the post submission process. Is this what you were trying to do in your #2 statement? If it is, then it wiill not work that way... You will have to use a link either in the thank you page or in the notification message. The link will contain the URL and the parameters to be passed.

    Please inform us if you have further inquiry.

    Thanks.

  • Profile Image
    ultraslimplus
    Answered on September 15, 2012 at 06:08 PM
  • Profile Image
    jonathan
    Answered on September 15, 2012 at 07:16 PM

    Hi,

    I think this page

    http://ultimateslimplus.com/index.php?option=com_content&view=article&id=8

    is not the 2nd page... as you can see it is 'index.php'. It might as well be the main page of your site. 

    For the POST submission to work, you will need a PHP page that can accept the post submission data from the 1st form when it is submitted and redirected to the 2nd page (which is a PHP page)

     

    http://form.jotform.ca/jsform/22584430005242?myProducts5[cc_firstName]=q1_name[first]&myProducts5[cc_lastName]=name[]

    As mentioned previously, this link is similar to prepopulating fields via parameters, which is not a POST form method... this is rather a GET method. They are 2 different method.

    Perhaps checking this thread also, might help understand the concept of the post/PHP feature. Our colleague Liyam had provided utmost details about how to create the PHP page on that thread, so, you may want to review his details also.

    Inform us if you have further inquiry or need assistance with.

    Thanks.

     

  • Profile Image
    ultraslimplus
    Answered on September 15, 2012 at 08:33 PM

    Ok I got the new orderpage.php in place but the data is not going over still. I must be doing sumthin wrong.

    Also here is the source. I edited it accordingly:

    <?php
        $answers = $_POST;
        $url1 = "http://form.jotform.ca/form/22584430005242?";
        $url2 = "Name[first]=".$answers[name][0]."&Name[last]=".$answers[name][1]."Email3=".$answers[email3]."&Message=".$answers[message];
        header("location:$url1$url2");
    ?>

     

     

    Maybe this screenshot will shed some light:

  • Profile Image
    idarktech
    Answered on September 15, 2012 at 08:55 PM

    @ultraslimpus

    Try to change your code with this: http://pastie.org/4729473

    The field names for the receiver form isn't correct that's why data prepopulation will not work. I have also removed the unnecessary fields (email and message). Hope this works for you now.

    Update us if this doesn't work. Thanks!

  • Profile Image
    ultraslimplus
    Answered on September 17, 2012 at 03:03 PM

    YES! That worked well! Very Cool. How would I go about adding Street Address for example or City?

    Here is an example of what I tried:

    <?php
        $answers = $_POST;
        $url1 = "http://form.jotform.ca/form/22584430005242?";
        $url2 = "myProducts5[cc_firstName]=".$answers[name][0]."&myProducts5[cc_lastName]=".$answers[name][1]."&myProducts5[cc_city]=".$answers[billingAddress][1];
        header("location:$url1$url2");
    ?>

     

    Spence

  • Profile Image
    fxr
    Answered on September 17, 2012 at 06:59 PM

    Hi Spence,

    You can use http://pastie.org/4743212 on you thankyou page to transfer over all the data from your first form to the 2nd.

     

  • Profile Image
    ultraslimplus
    Answered on September 25, 2012 at 01:31 PM

    Thanks Man. All this help has been tremendous. Im still struggling but have no plans of ever going elsewhere. Jotform is truely the way to go for all my clients. 

    Spence

  • Profile Image
    Deygus
    Answered on September 25, 2012 at 01:53 PM

    On behalf of my colleagues and the JotForm Support Team we thank you for your kind words and are happy to hear about your support for us, custom workarounds can be troublesome often so if you find yourself struggling too much please let us know so that we can do our best to assist you further.

  • Profile Image
    ultraslimplus
    Answered on September 25, 2012 at 01:57 PM

    Hi Thanks, I asked a new question but though I better start a new thread:

    http://www.jotform.com/answers/133145-Prepopulated-Page-2-Design#0

     

    Spence