Fixing Radio Button Spacing between Options

  • IceMelt
    Asked on January 18, 2016 at 5: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

     

    Fixing Radio Button Spacing between Options Image 1 Screenshot 20

    Thanks for all your help!

     

  • IceMelt
    Replied on January 18, 2016 at 5: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).

  • IceMelt
    Replied on January 18, 2016 at 5: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.

    Fixing Radio Button Spacing between Options Image 1 Screenshot 20

    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!
  • jonathan
    Replied 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.

    Fixing Radio Button Spacing between Options Image 1 Screenshot 30

     

     

    #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;

    }

    Fixing Radio Button Spacing between Options Image 2 Screenshot 41

     

    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.

     

     

     

     

     

  • jonathan
    Replied 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.