Setting up the form to accept alternative payment options next to PayPal

  • glandoreghyc
    Asked on April 13, 2015 at 2:18 AM

    I have a single page form set up and operating that uses PayPal integration to collect payment from people who want to join a club.

    If the person completing the Form chooses not to pay via PayPal, can i allow that person to select an alternative Submit button taking them to another option, which may not involve direct electronic payment?

     

    What happens to the Email notifications then if there are two submit options?

     

    Thanks

     

    John 

  • glandoreghyc
    Replied on April 13, 2015 at 6:50 AM

    I am trying to sort this out by using Conditional Show /Hide fields (using thsi to How hide the PAyPAl submit button and the alternative Submit button.

    How do i configure buttons to be "Hidden" when the form is first displayed?

     

    Thx

     

    John

  • Ben
    Replied on April 13, 2015 at 11:38 AM

    Looking at what you wrote John, I believe that I have the right guide for you. It will show you how you can accept PayPal payments, while in the same time accept payments (for example) over Stripe and create Purchase Orders.

    Please take a look at this guide and let us know if that is what you were after: How to Create a Basic Multiple Payment form

    It is also easy to update at a later time by following the steps here: How to Update the Multiple Payment Form

    If you follow these steps there, you will need to only set up email notifications on the parent form. If you create an embedded form with its own submit button however, then the submission would be made through it and no data from the parent form would be sent to it, so this (the guide above) is the best approach if you want to collect payment and the data on the parent form.

  • glandoreghyc
    Replied on April 14, 2015 at 6:06 AM

    Ben,

     

    Thank You very much, this seems like the perfect solution, but i have nto fully tested it yet, so will let you know,

    One issue where do i find the  height of the forms? is this impacted if i use the Responsive Widget?

     

    John

  • Ben
    Replied on April 14, 2015 at 9:39 AM

    You are welcome John. Could you please give us a bit more details in regards to the height?

    You can have any heights of the form - as much as you need of it and it will expand as needed. The only thing that you should set is the width.

    We can of course help you set a fixed height for your form if that is what you would like to do?

    Now a bit of height is usually added to the form when the mobile responsive widget is added to it, when you open the form on a mobile device - due to the width of the fields taking more space and as such some get moved a bit down, allowing much easier and simpler experience while filling out the form.

  • glandoreghyc
    Replied on April 14, 2015 at 10:16 AM

    Ben,

     

    In the instruction you provided it refers to the following...

    Get and save the form URL by clicking the "Preview" button. Again, you also need to save the form width and height structures because the iFrame Widget requires this later.

    I could not find the "height" value anywhere. so i did it manually, set a height value and then viewed the result until i got it correct.

    At this time i have done no Responsive mode testing....

    thx

     

    John

  • Ben
    Replied on April 14, 2015 at 12:03 PM

    Unfortunately John, there is no direct way of seeing the form height, unless you are familiar with the HTML and CSS and examining the same.

    Even if I am familiar, I always give it an approximate size and then change it up or down as per need. I believe this to be the best way to do it as well since it will show you the exact layout of the form - both parent and the child.

    Do let us know how your tests go and if you need any assistance setting it up just perfectly for mobile (by some chance) do let us know and we would be happy to assist with that :)

  • glandoreghyc
    Replied on April 15, 2015 at 4:37 AM

    Hello,

     

    I have started to do some live testing and i have some strange results, please take a look at:-

     

    http://www.reenoserve.com/GHYC/forms/index.html

    The results are different if you use a Chrome or Firefox browser.

     

    In Chrome you get the all of the Form height displayed however in Firefox only about 20% of the height is displayed.

    Also the Embedded iFrame forms seem to be 'Right shifted within the Primary form width so there is clipping of the right hand side of the embedded forms.

    Any suggestion please?

    John

  • Ben
    Replied on April 15, 2015 at 9:35 AM

    I took a look at your website John and these are the things that I would change:

    1. iframe embed widget width property to 570
       - this will show your form in the same spacing from left and right borders on your website

    2. Add the following CSS codes to both embedded forms:

    form.jotform-form {
        padding: 0;
    }
    ul > li.form-line {
        padding-left: 0;
        padding-right: 0;
    }

       - They will remove the spacing that is added to the forms which in turn makes them start and end at the start of the iframe widget and its end.

    In regards to the form being cut off, the issue seems to be caused by a conflict of scripts on your page, so I would suggest to replace your current embedding code with this one instead:

    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 320px; min-height: 1600px; border: medium none;" src="//form.jotformpro.com/form/51022125385950" allowtransparency="true" onDISABLEDload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></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;case "collapseErrorPage":if (iframe.clientHeight &gt; window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Do let us know how it goes.

  • glandoreghyc
    Replied on April 15, 2015 at 12:26 PM

    Ben,

     

    Thank You a great improvement.

    However a couple of points,:-

    1. Why do i have to change the form width to 570?

    2. The script conflict issue would seem to be a problem for me now, what is the issue? as if i have to change the  Form i need to come back to you to get an updated embedded code...

    However the issue now remaining is the fact that the new Primary form is not responsive. although the Responsive widget appears to be showing in the main Primary form, ...

    Thx

     

    John

     

  • Ben
    Replied on April 15, 2015 at 5:45 PM

    I must first let you know John that we can not answer multiple issues in a single thread. This is because of, as you can see, they usually tend to raise more questions by themselves :)

    For that reason, I have now split the thread to answer your question about the mobile responsiveness here: http://www.jotform.com/answers/553288

    2. The script conflict issue would seem to be a problem for me now, what is the issue? as if i have to change the  Form i need to come back to you to get an updated embedded code...

    This will be answered here: http://www.jotform.com/answers/553290

    1. Why do i have to change the form width to 570?

    You do not have to, this just seemed to look even on both left and right when set with this width, but this is completely your choice to make it look how you want it to.