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

    Fixing Radio Button Spacing between Options

    Asked by IceMelt on January 18, 2016 at 05:26 PM

    For these radio buttons, how do I space them better so that the (Save $5) doesn't overlap with the third radio button? I need to adjust the spacing. The live form is here: https://form.jotform.com/60177084526154

     

    Thanks for all your help!

     

    Page URL:
    https://form.jotform.com/60177084526154

    radio buttons radio spacing spread column
  • Profile Image

    Answered by IceMelt on January 18, 2016 at 05:48 PM

    Additionally, how do I make these radio buttons update a total to be charged via a payment system (Stripe or Paypal)? For example, if they select 1 entry, I want it to charge $5, if they select 5 entries, the form will charge $20 and if they choose 30 entries it will charge $100.)

    I want to add the price to these radio buttons as they are setup with conditional logic to  show a row of of guess fields according to the radio button selected, 1 entry, 5 or 30 entries.

    View the form here to see this in action: https://form.jotform.com/60177084526154

    I want to "price" these three radio buttons so they add the price to a "total" field that appears at bottom of field for going to the next step to make payment (via Stripe or Paypal).

  • Profile Image

    Answered by IceMelt on January 18, 2016 at 05:54 PM

    Cool, I figured out how to clone your form, and was able to setup minimum/maximum fields to be the exact # of fields in the Wizard so that it doesn't show the "add" or "subtract" options... and then I setup conditional logic to show these "groups" of fields dependent upon the radio button selected. Check it out:

    https://form.jotform.com/60177084526154

    Now I have 2 more questions:

    1. How do I adjust the spacing so that the radio button text don't overlap eachother? See screenshot below.



    2.

    Calculating total: Now I need to figure out how to price the Radio Button selected to update a "total" field to be charged via a payment system (Stripe or Paypal)? For example, if they select 1 entry, I want it to charge $5, if they select 5 entries, the form will charge $20 and if they choose 30 entries it will charge $100.) Is there a way to "price" these three radio buttons that are using the conditional logic to show the number of guesses chosen?


    Thanks again!
  • Profile Image
    JotForm Support

    Answered by jonathan on January 19, 2016 at 12:30 AM

    To fix the Radion button option spacing on your jotform https://form.jotform.com/60177084526154, follow this steps:

     

    #1 Set the Spread Column property to 3.

     

     

    #2 Add this CSS code on the form.

     

    #cid_7 span.form-radio-item {

        width : 185px;

    }

    #input_7_1{

        margin-left : -80px;

    }

    #input_7_2{

        margin-left : -80px;

    }

     

    Let us know if this did not work on the styling of your form.

    ---

    Since the 2nd question was about a different feature, we will resolve it separately here 

    http://www.jotform.com/answers/748060

     

    Thanks.

     

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on January 19, 2016 at 12:31 AM

    Addition:

    Here is the test form https://form.jotform.com/60180931688966 where I have applied the CSS needed to correct the styling.