Style Radios

If you are using the WS Form framework you can use the following classes to style radios. The demo below is available as a template in the ‘How To’ tab when you add a new form.

Demo

Tutorial

Tutorial – Buttons

To style radios as buttons:

  1. Add a Radio field to your form
  2. Click the settings icon on the radio field to open the settings sidebar
  3. Click the ‘Advanced’ tab at the top of the sidebar
  4. Enter wsf-button in the ‘Field CSS Classes’ setting.
    Editing Field CSS Classes For Radios
  5. Click ‘Save’ at the bottom of the settings sidebar

To create switch options for checkboxes:

  1. Add a Radio field to your form
  2. Click the settings icon on the checkbox field to open the settings sidebar.
  3. Click the ‘Advanced’ tab at the top of the sidebar.
  4. Enter wsf-switch in the ‘Field CSS Classes’ setting. WS Form - Style Radios - CSS Class - Switch
  5. Click ‘Save’ at the bottom of the settings sidebar.

Tutorial – Colors

To create color options for radios:

  1. Add a Radio field to your form
  2. Click the settings icon on the radio field to open the settings sidebar
  3. Click the ‘Advanced’ tab at the top of the sidebar
  4. Enter wsf-color in the ‘Field CSS Classes’ setting.
    Editing Field CSS Classes For Radios
  5. Click the ‘Radios’ tab at the top of the sidebar
  6. Click the expand icon to make the data grid easier to work with
  7. Click the add column icon, and name the column ‘Value’
  8. In the ‘Label’ column, enter: <span style="background-color: #radio_field_value;"></span> Color for each row. Change the word ‘Color’ to whatever label you would like for that row
  9. In the ‘Value’ column, enter the hex color you would like to use for that row, for example: #ff0000
  10. Underneath the data grid, choose ‘Values’ in the ‘Values’ setting. Your finished radio data grid should look similar to this:
    Data Grid Configuration For Colored Radios
  11. Click ‘Save’ at the bottom of the settings sidebar

Tutorial – Images

To create image options for radios:

  1. Add a Radio field to your form.
  2. Click the settings icon on the radio field to open the settings sidebar.
  3. Click the ‘Advanced’ tab at the top of the sidebar.
  4. Enter wsf-image in the ‘Field CSS Classes’ setting.
    Editing Field CSS Classes For Radios
  5. Click the ‘Radios’ tab at the top of the sidebar.
  6. Click the expand icon to make the data grid easier to work with.
  7. Click the add column icon, and name the column ‘Value’.
  8. In the ‘Label’ column, enter an HTML img tag such as: <img height="75" width="75" src="https://cdn.wsform.com/wp-content/uploads/2020/04/bear.jpg"> for each row.
  9. In the ‘Value’ column, enter a label for the image, e.g. Bear.
  10. Underneath the data grid, choose ‘Values’ in the ‘Values’ setting. Your finished radio data grid should look similar to this:
    Data Grid Configuration For Button Radios
  11. Click ‘Save’ at the bottom of the settings sidebar.