Do you want a more engaging and tailored Divi opt-in form? It can be a little boring to see the default “First Name,” “Last Name,” and “Email” labels. The good news is that, with a little bit of JavaScript code, you can easily change them to something more specific or aligned with your brand identity.
This article will show you how to change the default field label on the Divi Email Optin module. We’ll explore a simple method that combines JavaScript code and utilizes the built-in Divi Builder features.
Steps to Change the Default Field Label on the Divi Email Optin Module
Step 1: Add the Divi Email Optin Module
Well, we are going to start with adding the Email Optin module. Go to your Divi Builder editor, and we will start everything from scratch, so create a section with a single column, select the Email Optin module, and insert that module into the column.
Once you add the Email Optin module, you can tweak and style the module as you prefer.
In this example, we use a single-name field, and for the layout, we position the body on top and the form on the bottom.
Note:
Please ensure to configure the Email Account settings. Selecting the email marketing platform you use is a requirement of this setting. So, please choose your email service provider and your account. If you don’t have an email marketing provider account yet, please create one first, and then you can continue this tutorial.
Step 2: Add the JavaScript Snippet
Next, we will add the JavaScript code to modify the placeholders or labels for the input fields within the Divi Email Optin module.
Add the Divi Code Module
We will insert the JavaScript code into the Code module. Click on the section where you added the Divi Email Optin module. Afterward, add a new row, then locate the Divi Code module within that section row.
Add the JavaScript Code
Once you add the Divi Code module, it’s time to add the JavaScript snippet within the module.
Please copy the JavaScript snippet below and paste it into the available field:
<script>
document.addEventListener('DOMContentLoaded', function() {
var inputFieldFirstName = document.getElementById('et_pb_signup_firstname');
var inputFieldEmail = document.getElementById('et_pb_signup_email');
if(inputFieldFirstName) {
inputFieldFirstName.placeholder = 'Enter Your Name';
}
if(inputFieldEmail) {
inputFieldEmail.placeholder = 'Enter Your Email Address';
}
});
</script>
What does the code do?
This JavaScript snippet modifies the placeholder or label text of two input fields (first name and email) on your specific Divi Email Optin module.
Replace ‘Enter Your Name‘ and ‘Enter Your Email Address‘ with your desired placeholder or label text.
That is all. Preview your page by clicking the Exit Visual Builder button to see how the JavaScript code works.
The Bottom Line
This article demonstrates how simple it is to modify the Divi Email Optin module’s default field label. You can change the placeholder or label text on your opt-in form page to any text of your choice by adding a simple JavaScript snippet.
This allows you to personalize the user experience by using more descriptive or brand-specific language. Remember to test different variations to see what resonates best with your users and ultimately boosts your email list signups.
