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

    Radio button text not responsive

    Asked by amkmc on March 15, 2015 at 08:49 AM

    Hi, I realised that the text on my radio buttons are not responsive when I embed the form on wordpress. It doesn't wrap and thus can't be fully read by user on mobile. I have made the form responsive. Please help.

    Page URL:
    http://form.jotform.me/form/50731693930457

    not responsive radio buttons Mobile and
  • Profile Image
    JotForm Support

    Answered by BJoanna on March 15, 2015 at 12:11 PM

    You can make your radio button text to be responsive with Injecting Custom CSS. Just place following CSS in to your form. Inside of JotForm Builder go to Setup and Embed, choose Preferences, Form Style, Inject Custom CSS and at the end of existing code paste this code:

    .form-radio-item label, .form-checkbox-item label {

    display: block !important;

    margin-left: 19px;

    margin-top: -17px;

    }

    @media only screen and (max-width: 550px){

    .form-all {

    width:100% !important

    }

    .form-radio-item label {

    white-space:normal;

    }

    .form-checkbox-item label {

    white-space:normal;

    }

    }

    After adding this code radio button text should look like this on mobile device.

    Hope this will help.

     

  • Profile Image

    Answered by amkmc on March 15, 2015 at 09:10 PM

    Thanks. However the alignment is abit disjointed. Able to help please?

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 16, 2015 at 02:53 AM

    Hello amkmc,

    Have you tried adding "Mobile Responsive" widget in your form already?

    I would suggest you to remove the custom css code you have added in your form for radio button and just add the "Mobile Responsive" widget. That should most likely solve your problem. 

    Please be noted that for your form to work on mobile devices, we suggest you to embed your form using its iFrame embed code. The following guide should help you:  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!