Issue with radio buttons (strange spacing, etc.)

  • Profile Image
    testcanvas
    Asked on February 16, 2013 at 07:42 AM

    Hi ... hoping this question can be answered pretty soon. I emailed customer service 2 days ago but have not heard a reply:
    I'm trying to build a lengthy order form, but am finding the radio button feature a bit frustrating. It's only allowing me to put my options next to a text area. (see screenshot)
    How I'm doing it is entering my info in "Option 1" and deleting options 2 & 3.

     
    Because I don't want text in the "click the edit" area, I put a period in that space, which looks odd and adds a space between each line. If I put nothing in that space, it shows up as 3 periods.

    Here's
    my form so far: http://www.insidersecrets.info/testingjotform.htm

     
    What I want the radio buttons or checkboxes to look like is similar to this: http://www.insidersecrets.info/order-fbbizpage.htm ... this is an order form I built in Google Docs for another one of my services. Scroll down about 1/4th of the page until you get to the upgrades list so you can see what I mean. I just want the options to look tidy like that.

     
    Another issue with jotform's radio buttons is that some of them get thrown off and are not aligned with the left margin. Take a look at this line on my jotform: "Installing your menu or services list on your Facebook Business Page: $14.99"

     
    Hoping there's a simple solution to this issue so I can use jotform for my project. I have more to add to my order form, but I've given up at this point. Will have to use something else if jotform won't work.

     
    Thanks in advance for your time,
    Deborah  
  • Profile Image
    Welvin
    Answered on February 16, 2013 at 08:35 AM

    Hi Deborah,

    Apologize if everything causing you any trouble. Well, you can put space on the field label so it won't show anything but I recommend you to inject custom CSS codes to your form. This codes;

    #label_39, #label_40, #label_33, #label_41, #label_42, #label_37, #label_43, #label_44 {

    display: none;

    }

    Here's a guide on how you can inject this codes: How to Inject Custom CSS Codes

    With regads to the button being trown off below other field, that is because of the field alignment settings. You can fix that by;

    1. Click on that particular field

    2. On the toolbars, find and click "Label Align" button

    3. Choose "Top" from the dropdown options

     

    Let us know if you run into any trouble again, we're here to help.

    Thanks

  • Profile Image
    farhan_sh
    Answered on February 16, 2013 at 08:38 AM

    Hi Deborah:

    You need to remove the lable fields instead of putting the period (.) in the text area. To remove the labels, you need to get the Label ID and then put the code {display:none}. To get the Label ID please check it.

    http://www.jotform.me/help/198-How-to-Remove-Field-Labels-in-a-Form

     

    Please let us know for further assistance.

     

    Thank You!!

  • Profile Image
    testcanvas
    Answered on February 16, 2013 at 09:11 AM

    Thanks, Welvin, that fixed it!

    : )

  • Profile Image
    abajan
    Answered on February 16, 2013 at 09:20 AM

    Glad my colleague was able to help you with this. If you have any further queries, we'd be happy to help however best we can.

    Enjoy your weekend.