Submit button disappears when a product is selected

  • kippmullet
    Asked on September 5, 2024 at 12:46 PM

    In my form, when a product is selected my Submit button disappears. The only way to complete the form is to pay via PayPal

    I have tried removing any conditional formatting as well as deleting and reinserting the submit button with no success. I have also tried to insert a section collapse but I can't put it right before my submit button.

  • Lorevie JotForm Support
    Replied on September 5, 2024 at 1:14 PM

    Hi Kipp,

    Thanks for reaching out to Jotform Support. I'll need some time to look into this. I'll get back to you as soon as I can.

    We appreciate your patience and understanding.

  • Lorevie JotForm Support
    Replied on September 5, 2024 at 2:23 PM

    Hi Kipp,

    This is actually the intended behavior of the payment field with the PayPal Business as the payment gateway. You'll need to create multiple payment form by using the iFrame Embed widget. Let me walk you through this:

    You'll need a total of 3 forms:

    • Main Form- The primary form that will house the payment option selection. You can use your current form here.
    • 2nd FormCash
    • /Check payment
    • 3rd Form- PayPal payment

    Let's clone your main form first, this is for the PayPal payment, so you won't have to create your product list field from scratch. Let's do it:

    1. On your My Forms page, select your main form.
    2. Click on the More button.
    3. Select Clone from the dropdown menu.Submit button disappears when a product is selected Image 1 Screenshot 120
    4. Once cloned, remove the unnecessary fields and remain the product list field.
    5. Click and hold on the first field that you will delete, and select Manage Multiple Fields.
    6. Tick on all the fields that you will remove.
    7. Once you're done, click on the Delete button on the upper right side of the page. Submit button disappears when a product is selected Image 2 Screenshot 131

    Next, clone the PayPal Payment form. After cloning, switch the payment gateway to purchase order. Let's do this:

    1. In Form Builder, click on the Add Form Element on the left side of the page.
    2. From the Payments tab, click on the Three Dots icon of PayPal Business.
    3. Click on Switch to another gateway. Submit button disappears when a product is selected Image 3 Screenshot 142
    4. Select Purchase Order.
    5. Click on the Use Selection button.
    6. From the confirmation message, click on the Ok button.
    7. Click on the Continue button. Submit button disappears when a product is selected Image 4 Screenshot 153

    Then, let's get the form URL of the Cash/Check payment form and PayPal payment form.

    1. In Form Builder, click on Publish on the orange navigation bar at the top of the page.
    2. Select Quick Share from the left side window.
    3. Click on the Copy Link button.Submit button disappears when a product is selected Image 5 Screenshot 164

    Now, let's go back to the main form, delete the unnecessary fields and add the iFrame Embed widget.

    1. In Form Builder, click on the Add Form Element on the left side of the page.
    2. From the Widgets tab, search for iFrame Embed. Submit button disappears when a product is selected Image 6 Screenshot 175
    3. Click on the Wand icon of the widget.
    4. Paste the form URL in the Frame URL field.
    5. Click on the Update Widget button at the bottom of the page. Submit button disappears when a product is selected Image 7 Screenshot 186
    6. Do the same with the PayPal payment form.

    Now, let's show this payment form conditionally based on the payment method that will be chosen by the respondent:

    1. In Form Builder, click on Settings on the orange navigation bar at the top of the page.
    2. Select Conditions from the left side window.
    3. Select Show/Hide Field.Submit button disappears when a product is selected Image 8 Screenshot 197
    4. Set up the condition like the screenshots below:Submit button disappears when a product is selected Image 9 Screenshot 208Submit button disappears when a product is selected Image 10 Screenshot 219

    Here's the result:

    Submit button disappears when a product is selected Image 11 Screenshot 2210 You can clone my form here.

    Give it a try and let us know how it goes.

  • kippmullet
    Replied on September 5, 2024 at 4:03 PM

    Thank you for your help.

    I can see that this is a work around, but I don't like how this is set up. The layout of the original form is much more intuitive and user friendly.

    Is there an easy way to redirect to a new page after submitting a form to receive a PayPal payment? (ex. I select PayPal as my method of payment, hit submit, then I'm taken to a PayPal link which shows the amount I owe for my order or ex.2 I select cash/check, hit submit, and the form is complete)

  • Aries JotForm Support
    Replied on September 5, 2024 at 4:33 PM

    Hi Kipp,

    I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.


  • Aries JotForm Support
    Replied on September 7, 2024 at 3:14 AM

    Hi Kipp,

    Thanks for your patience. In general, PayPal integration displays only the PayPal button. That is the way it works. If you want the option to accept check or PayPal payments in the same form, you must create the products outside of the PayPal field. For example, use multiple choice or other fields for the products and simply calculate the amount using the form calculation widget before passing it to the PayPal field if the user prefers PayPal payment. Here's a sample guide on how to do it:

    1. In Form Builder, click on Add Form Elements.

    Submit button disappears when a product is selected Image 1 Screenshot 90

    2. Choose the Single Choice field and create 2 options for payments and set this field as required.

    Submit button disappears when a product is selected Image 2 Screenshot 101

    3. To set up the Check option, add a Paragraph element and any additional information the user requires to complete the payment.

    Submit button disappears when a product is selected Image 3 Screenshot 112

    4. You can use a Multiple Choice element to display your products that can be paid for by check.

    Submit button disappears when a product is selected Image 4 Screenshot 123

    You can select PayPal Personal from the Payments tab.

    5. Go to Payments and choose PayPal Personal.

    Submit button disappears when a product is selected Image 5 Screenshot 134

    Next, set up a Show/Hide Field condition to show the respective field based on whether or not your user selects pay via PayPal or Check. Here’s how:

    1. Click on Settings and choose Conditions.

    2. Click Add Condition and choose Show/Hide Field.

    Submit button disappears when a product is selected Image 6 Screenshot 145

    The general logic is to show the relevant field based on the user's selection, so you need to set up two conditions for each instance.

    3. If the “Payment Options” field value is equal to “PayPal”, then show the “My Products (PayPal)” element.

    Submit button disappears when a product is selected Image 7 Screenshot 156

    4. If the “Payment Options” field value is equal to “Check”, then show the “Paragraph” and the “My Products (Check)” element.

    Submit button disappears when a product is selected Image 8 Screenshot 167

    So when you select Check on the payment option field and submit the form, it will be submitted right away. When you select PayPal in the payment option field and submit the form, it will redirect to PayPal Checkout page, where you need to complete the payment. You can check my demo form here. You can also clone it using this guide.

    Give it a try and let us know if you have any other questions

Your Answer