The Divi theme is a popular WordPress theme that includes a built-in newsletter signup form module. This module allows you to easily add a newsletter signup form to your website and collect email addresses from your visitors.
To add a Divi newsletter signup form to your website, you can use the following code snippet:
function wpsnippets_divi_newsletter_form() {
ob_start();
?>
<div class="et_pb_newsletter_form">
<form class="et_pb_newsletter_form" method="post" action="">
<input type="email" name="et_pb_signup_email" class="input" placeholder="Email Address" required>
<input type="hidden" name="et_pb_signup_list_id" value="YOUR_LIST_ID">
<input type="hidden" name="et_pb_signup_redirect" value="YOUR_REDIRECT_URL">
<input type="hidden" value="et_builder" name="et_pb_contactform_submit">
<button type="submit" class="et_pb_newsletter_button">Subscribe</button>
</form>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'divi_newsletter_form', 'wpsnippets_divi_newsletter_form' );
This code snippet defines a custom shortcode divi_newsletter_form that will output the HTML markup for the Divi newsletter signup form. You can add this shortcode to any post or page to display the form.
To customize the form, you can modify the HTML markup within the ob_start() and ob_get_clean() functions. You can also update the YOUR_LIST_ID and YOUR_REDIRECT_URL values in the hidden input fields to match your specific newsletter list and redirect URL.
To use the Divi newsletter signup form, simply add the [divi_newsletter_form] shortcode to the desired location within your content. The form will be rendered with the specified HTML markup and functionality.
Examples
Example 1: Adding a Custom Newsletter Signup Form to Divi Theme
This example demonstrates how to add a custom newsletter signup form to a Divi theme using a shortcode. The code example includes a custom PHP function wpsnippets_newsletter_signup_form() that generates the HTML markup for the form and a shortcode [newsletter_signup_form] that can be used to display the form on any page or post.
function wpsnippets_newsletter_signup_form() {
ob_start();
?>
<form class="newsletter-signup-form" action="#" method="post">
<input type="email" name="email" placeholder="Enter your email address" required>
<input type="submit" value="Subscribe">
</form>
<?php
return ob_get_clean();
}
add_shortcode( 'newsletter_signup_form', 'wpsnippets_newsletter_signup_form' );
The wpsnippets_newsletter_signup_form() function uses output buffering to capture the HTML markup of the form. The form is then returned using ob_get_clean(). The add_shortcode() function is used to register the [newsletter_signup_form] shortcode, which calls the wpsnippets_newsletter_signup_form() function to display the form.
Example 2: Customizing the Newsletter Signup Form in Divi Theme
This example demonstrates how to customize the appearance and behavior of the newsletter signup form in a Divi theme. The code example includes CSS styles to modify the form’s appearance and JavaScript code to handle form submission and display a success message.
function wpsnippets_newsletter_signup_form() {
ob_start();
?>
<form class="newsletter-signup-form" action="#" method="post">
<input type="email" name="email" placeholder="Enter your email address" required>
<input type="submit" value="Subscribe">
</form>
<div class="newsletter-signup-success" style="display: none;">Thank you for subscribing!</div>
<script>
jQuery(function($) {
$('.newsletter-signup-form').on('submit', function(e) {
e.preventDefault();
var form = $(this);
$.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serialize(),
success: function(response) {
form.hide();
$('.newsletter-signup-success').show();
}
});
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode( 'newsletter_signup_form', 'wpsnippets_newsletter_signup_form' );
The code example includes a hidden success message element with the class newsletter-signup-success. The JavaScript code uses jQuery to handle form submission via AJAX. When the form is successfully submitted, the form is hidden and the success message is displayed.
Example 3: Integrating the Newsletter Signup Form with an Email Marketing Service
This example demonstrates how to integrate the newsletter signup form in a Divi theme with an email marketing service, such as MailChimp or Constant Contact. The code example includes a custom PHP function wpsnippets_newsletter_signup_form() that sends the form data to the email marketing service’s API.
function wpsnippets_newsletter_signup_form() {
ob_start();
?>
<form class="newsletter-signup-form" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" method="post">
<input type="hidden" name="action" value="newsletter_signup">
<input type="email" name="email" placeholder="Enter your email address" required>
<input type="submit" value="Subscribe">
</form>
<?php
return ob_get_clean();
}
function wpsnippets_handle_newsletter_signup() {
// Code to process the form data and send it to the email marketing service's API
}
add_action( 'admin_post_nopriv_newsletter_signup', 'wpsnippets_handle_newsletter_signup' );
add_action( 'admin_post_newsletter_signup', 'wpsnippets_handle_newsletter_signup' );
add_shortcode( 'newsletter_signup_form', 'wpsnippets_newsletter_signup_form' );
The form’s action attribute is set to the WordPress admin-post.php file, which handles form submissions. The wpsnippets_handle_newsletter_signup() function is hooked to the admin_post_nopriv_newsletter_signup and admin_post_newsletter_signup actions to process the form data and send it to the email marketing service’s API.