Support » Plugin: Contact Form by WPForms - Drag & Drop Form Builder for WordPress » Improve legibility on radio buttons

  • Resolved Pablo Massa


    Hi, I find that in a list of radio buttons, if the radio button text is longer than the container, it start a new line below the radio button, instead of put a margin in the second line to make it clear that the texts belongs to the radio button (think a bullet list element behavior).

    Hope I explain it better with this screenshot:

    This fix will improve the reading experience of the form.

    I guess it happens with check boxes too (didn’t test it).

    Hope can help.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Will Derichsweiler


    Hi @pablomassa,

    No problem! To fix this, please try the following custom CSS snippet:

    div.wpforms-container .wpforms-form .wpforms-field ul li {
        display: flex;
    div.wpforms-container .wpforms-form .wpforms-field ul li label {
        line-height: 1.7;
    div.wpforms-container .wpforms-form .wpforms-field ul li input {
        transform: translateY(5px);

    And in case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

    Hope this helps!

    Thread Starter Pablo Massa


    It worked! Thanks!

    Look how much improves legibility/accessibility:

    Hope you consider apply the fix to the plugin itself in some capacity and improve the experience of many other persons.

    Hope can help with the report.


    Plugin Support Will Derichsweiler


    Hi @pablomassa,

    I’m happy to hear that snippet worked out for you. If you’d like more help with using WPForms Lite, please feel free to reach out.


Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Improve legibility on radio buttons’ is closed to new replies.