There are two ways of doing this, both in the visual builder and a coded version. Many Website Design Agencies will use these techniques, read on to view both methods:
Change the divi form radio button text color with the visual builder:
Step 1: Create a new section, add a row and insert a contact form module.
Step 2: Add a new field and name Field ID and Title – Radio Button Field.
Step 3: Navigate to the Radio Button Fields settings by selecting the cog wheel to the left of Radio_Button_Fields. Once in Radio Button Field settings, scroll to Field Options and Select Type – Radio Buttons.
Step 4: Once you have selected the type (Radio Buttons) – Add more options.
Step 5: After you have created the options, navigate to Design and scroll to Field. When you have selected Design you will see a tab called field text color. Altering this will change the divi form radio button text color.
Step 6: Changing field text color will change the colour of your divi form radio button text color.
Change the divi form radio button text colour with code:
To change the divi form radio button text colour, you can use CSS. Here are the steps:
- Go to the page or post where your Divi form is located.
- Click on the gear icon of the Divi module that contains your form to open the module settings.
- Go to the “Advanced” tab and scroll down to the “Custom CSS” section.
- Paste the following CSS code:
cssCopy code/* Change the radio button text color */
.et_pb_contact_field_radio label {
color: #000000; /* Replace with your desired color */
}- Replace the “#000000” value with the hex code or colour name of your desired text colour.
- Click “Save & Exit” to apply the changes.
This CSS code will target all radio button labels in your Divi form and change their text colour. If you want to target only a specific radio button, you can use a more specific CSS selector. For example, if your radio button has the label “Option 1”, you can use the following code:
cssCopy code/* Change the text color of a specific radio button */
.et_pb_contact_field_radio label[for="et_pb_contact_option_0"] {
color: #000000; /* Replace with your desired color */
}In this code, “et_pb_contact_option_0” is the ID of the radio button. Replace it with the ID of your target radio button to change its divi form radio button text colour.
More insight as to why Radio Buttons are a useful and powerful tool.
Radio buttons are a useful and powerful tool when it comes to designing user interfaces. When used on Divi, a popular WordPress page builder, radio buttons offer several benefits that can enhance the user experience of your website visitors. In this article, we will explore the benefits of using radio buttons on Divi.
- Simplify Navigation
Radio buttons simplify navigation for website visitors. They allow users to make a choice between two or more options quickly and easily, without having to scroll through a long list of choices. This makes it easier for users to find what they are looking for and can increase engagement with your website.
- Increase User Engagement
Radio buttons can also increase user engagement by making the user interface more interactive. When using divi form radio button text colour as a way to highlight a list, brings more engagement to the customer. Furthermore, Divi Radio Buttons can provide users with multiple options to choose from, you can encourage them to spend more time on your website and explore the different options available. This can lead to a higher level of engagement and can help to improve the overall user experience.
- Reduce User Error
Radio buttons can help to reduce user error by providing clear and distinct options for users to choose from. This can prevent users from accidentally selecting the wrong option or inputting incorrect information. This can help to prevent frustration and can help to ensure that users have a positive experience on your website.
- Provide Visual Cues
Radio buttons provide visual cues that help users to understand the choices available to them. By using different colours or designs for each option, you can make it easier for users to distinguish between different options and make an informed decision. This can help to make the user interface more intuitive and user-friendly.
- Increase Conversions
Finally, radio buttons can increase conversions by making it easier for users to make a decision. By simplifying the decision-making process and providing clear options for users to choose from, you can encourage them to take action and complete a desired task, such as filling out a form or making a purchase. This can lead to higher conversion rates and can help to increase revenue for your business.
We use Google Analytics to track conversion rates on multiple websites we have designed, including AxonOps, Indigo Fitness, Zena Golf and many more. By using Google Analytics Conversions we can track what page people are landing on, what buttons they are clicking throughout the site and which link they are navigating through to get to the website.
Conclusion
In conclusion, radio buttons are a powerful tool that can enhance the user experience of your website visitors. By simplifying navigation, increasing user engagement, reducing user error, providing visual cues, and increasing conversions, radio buttons can help to improve the overall effectiveness of your website. If you are using Divi to design your website, be sure to take advantage of the many benefits that radio buttons have to offer.
