How do I center radio buttons?

  • Profile Image
    rockwaycomm
    Asked on June 06, 2011 at 10:18 AM

    I have two radio buttons on my form ('Agree' and 'I do not agree').  Right now they are left-aligned.  I would like them to be centered under the question and I do not see an option to do that.  Perhaps I am missing something...

    How do you center radio buttons, check boxes or drop down menus?  And on one field only, not on the entire form.

     

    Thanks

  • Profile Image
    abajan
    Answered on June 06, 2011 at 02:51 PM

    Hi rockwaycomm

    Since there is no option to center align the field, the best way I can think of to achieve the formatting you desire, would be to do the following:

    1. With the form in question loaded in the form builder/editor, click the agreement field with 2 check boxes and label it "Acceptance of Agreement" (Don't worry - the code below takes care of hiding that label from users.)

    2. Select and copy [Ctrl+C] the following CSS rules, and paste them [Ctrl+V] into the "Inject Custom CSS" section of the form's Preferences, in addition to the rules already there (as illustrated in the screenshot), close the Preferences and save the updated form:

    #id_72 {
    padding-bottom:0;
    }
    #label_73 {
    display:none;
    }
    #id_73 {
    text-align:center;
    padding-top:0;
    }


    Please let us know if this solution suits your requirements and feel free to enquire about anything else related to our forms. Our team will gladly offer assistance where we can.

    Thanks.


    ~ Wayne

    UPDATE: Even though the topic referred to radio buttons, it has only just occurred to me that you actually have check boxes in the "Student Commitment" field which are NOT appropriate for that section because they would allow students to simultaneously agree and disagree with the terms! See the screenshot below of the email notification I received after running a test submission on a clone of your form:


    Tell you what. I have to go out shortly but when I return I'll edit my clone and post its URL here for you to clone and use. In other words, you may clone my clone of your form!

    UPDATE 2: It turns out that there were actually several areas of your form where check boxes needed replacing with radio buttons. Just clone this form, replace the phoney email address in the notification and you're good to go! :)