Adding and Customizing the Radio Field in Divi Form Builder

The Radio Field in the Divi Form Builder module allows users to select from a number of radio buttons. Each radio button is assigned specific data for selecting various options. This field can also be mapped to an ACF (Advanced Custom Fields) checkbox/radio field. Follow these steps to add and customize the Radio Field for your forms.

Video

Step 1: Add Form Field

1. Navigate to the page with your form and open the Form Builder module.
2. Click on the Add New Field button to start adding a new form field.

Step 2: Select Radio Field

1. Enter a descriptive Field Title for the field that users will see.
2. Enter a Admin Title for administrative purposes to help identify the field.
3. Assign a unique Field ID to the field for data handling.
4. Select Radio Buttons field from the Type dropdown menu.

Step 3: Customize Radio Field

In additional to the styling features in the Design Tab, Divi Form Builder offers customization options for the Radio Field HERE.

Field Options:

1. Add Form Builder Prefix to Field: Disable this option to directly input the field ID and Name. Only disable this option for specific cases, such as when using the form with Google Tag Manager.
2. Auto Detect from Mapped Field: Enable this option to automatically populate radio based on a mapped field.
3. Only Populate Selected Fields: Choose to populate only selected fields.
4. Exclude Auto-Detected Options: Exclude certain options from being auto-detected.
5. Options: Manually add your own radio options
6. Add Images to Options: Add images to each radio option for a more visual selection.
   1. Radio/Image Checkbox Options:
      1. Image Options: Customize image options for the radio buttons.
      2. Show Radiobox for Image Options: Display a radio button along with image options.
      3. Image Options Label Position: Set the position of the labels for image options.
7. Is This Field for Calculation: Enable if the radio field is used for calculations.
   1. Calculation Values for Options: Add values for each option to be used in calculations.
8. Required Field: Make the radio field mandatory for users to select at least one option.
9. Go to Next Step when change Select or Radio/Checkbox options: In a multi-step form, you typically need to press "Next" to proceed to the next step. However, if you enable the X feature, the form will automatically progress to the next step once the user selects an option, eliminating the need for an additional "Next" click.
10. Populate Options from Linked Post Only: If you are populating the select field with options from an ACF Post Object, enable this option to display only the choices associated with the logged-in use

Additional Tips

By following these steps, you can effectively add and customize the Radio Field in Divi Form Builder, ensuring it meets the needs of your form and provides a seamless user experience. Utilize the various customization options to make your forms both functional and visually appealing.