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

    Custom Selectable Buttons For Payment

    Asked by JKulp42757 on November 13, 2015 at 02: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 buttons payment selection calculation values radio buttons CSS codes
  • Profile Image
    JotForm Support

    Answered by Mike_G on November 13, 2015 at 07: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.


    Then I've added a textbox field, the "Other" field and created two conditions.

    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

    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. 

    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.