Custom Selectable Buttons For Payment

  • JKulp42757
    Asked on November 13, 2015 at 2:44 PM

    I'm attempting to replicate a section such as the one pictured for placement on my form. 

    Any ideas on the best way to go about doing so. Basically I'm looking for stylized buttons (thought about making each one an image??) that each correspond to a specific dollar amount, with another field for any user entered amount.

     

    Thanks!Custom Selectable Buttons For Payment Image 1 Screenshot 20

  • Mike_G JotForm Support
    Replied on November 13, 2015 at 7:27 PM

    I would like to apologize for the inconvenience but aside from the Submit button, Clear button, and Print Form button, there's no other button that can be added on the form.

    There is a workaround that you can use, however, this doesn't allow you to set it to a monthly recurring payment. It can only process a one-time payment.

    Please check this form: https://form.jotform.com/53167116742959

    On that form, I have added a Radio button field and set it's calculation values.

    Custom Selectable Buttons For Payment Image 1 Screenshot 50
    Then I've added a textbox field, the "Other" field and created two conditions.

    Custom Selectable Buttons For Payment Image 2 Screenshot 61

    The first condition will pass the calculation value of the radio button field to the "Other" field. Then the second condition will just show the "Other" field if "Other" is selected from the radio button field.

    Once you've done that, it's time to add the Payment field. I have used PayPal in my Sample form. I have passed whatever value the "Other" button have to the PayPal field.

    How-to-pass-a-calculation-to-a-payment-field

    Custom Selectable Buttons For Payment Image 3 Screenshot 72

    All that's missing now is the images that will replace the option label of the radio button field.

    I have added the CSS codes that you can view by clicking this link: CSS Codes For Radio Button to the form using this guide: How-to-Inject-Custom-CSS-Codes

    Before you create the necessary CSS codes, you need to first get the field names of the form. This guide will help you getting the field names: How-to-find-Field-IDs-Names

    The form should look like this after. 

    Custom Selectable Buttons For Payment Image 4 Screenshot 83

    Here's the link to the form again: https://form.jotform.com/53167116742959

    Feel free to clone it using this guide, How-to-Clone-an-Existing-Form-from-a-URL so you can check the conditions and CSS codes I've added in it.

    If you have any questions with any of the instruction given above, please feel free to let us know and we will be glad to help you. Thank you.