Part 1 – Get embed code

You must have account with a third party newsletter service, such as MailerLiteMailChimpConvertKitDrip or GetResponse, kindly create a support ticket if you need help with any other newsletter service provider.

Note:
Different newsletter provider may display differently
If there is any updates, please refer to each provider’s documentation

Click on your newsletter provider below

MailerLite

1- Copy your MailerLite embed codes (both): https://www.mailerlite.com/video-tutorials/embedded-forms-overview
2- Replace <SCRIPTS> to the one you copied from MailerLite

<SCRIPTS>
<style type="text/css">
.newsletter-section .subscribe-form .form-section .form-group, .subscribe-form .form-section.horizontal {margin: 0 !important;}
.newsletter-section .subscribe-form {padding: 0 !important;}
.ml-form-embedWrapper, .embedForm {background-color: transparent !important;}
</style>

MailChimp

1- Create and find your MailChimp embed code: https://mailchimp.com/help/add-a-signup-form-to-your-website/
2- Copy the specific action attribute URL:

MailChimp embed code

3- Copy the highlighted URL. This will be your MailChimp action attribute URL.


Editing the Newsletter

1- Copy newsletter code below
2- Replace YOUR_MAILCHIMP_ACTION_ATTRIBUTE to the one you copied from MailChimp

<!-- Begin MailChimp Signup Form -->
<form class="header-newsletter" action="YOUR_MAILCHIMP_ACTION_ATTRIBUTE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate style="text-align:center">
<input type="text" class="header-newsletter-input" value="" name="FNAME" id="mce-FNAME" placeholder="Your Name" />
<input type="email" class="header-newsletter-input" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email" />
<input type="submit" class="header-newsletter-button" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</form>
<!-- End MailChimp Signup Form -->

Flodesk
ConvertKit

1- Create ConvertKit Form: https://intercom.help/convertkit/en/articles/2502640-the-convertkit-form-builder
2- Get embed code: https://help.convertkit.com/en/articles/3085392-how-to-embed-forms-on-wordpress-using-javascript#where-to-get-the-embed-code

Note: Make sure to create Inline form and use Javascript embed


Editing the Newsletter

1- Copy newsletter code below
2- Replace <embed code> to the one you copied from ConvertKit

<p>DESCRIPTION</p>
<embed code>
<style type="text/css">
.ck_form.ck_naked .ck_form_fields {padding: 0 !important;}
.page .ck_form.ck_naked {margin: 0 auto !important; max-width: 100% !important;}
.seva-form {margin: 0 auto !important;}
</style>

GetDrip

Getting GetDrip newsletter – Step 1
Setup GetDrip Newsletter
Getting GetDrip newsletter – Step 2
Setup GetDrip Newsletter
Copy the highlighted text.


Editing the Newsletter

1- Copy newsletter code below
2- Replace YOUR_GETDRIP_ACTION_ATTRIBUTE to the one you copied from GetDrip

<form class="header-newsletter" action="YOUR_GETDRIP_ACTION_ATTRIBUTE" method="post" target="_blank" novalidate>
<input type="text" class="header-newsletter-input" value="" name="fields[user_id]" placeholder="Your Name" />
<input type="email" class="header-newsletter-input" value="" name="fields[email]" placeholder="Your Email" />
<input type="submit" class="header-newsletter-button" value="Subscribe" name="subscribe" class="button" />
</form>

GetResponse

Getting GetResponse newsletter – Step 1
Setup GetResponse Newsletter
Getting GetResponse newsletter – Step 2
Setup GetResponse Newsletter
Getting GetResponse newsletter – Step 3
Setup GetResponse Newsletter
Copy the highlighted text.


Editing the Newsletter

1- Copy newsletter code below
2- Replace YOUR_GETRESPONSE_ACTION_ATTRIBUTE to the one you copied from GetResponse
3- Replace CAMPAIGN_TOKEN to the one you copied from GetResponse

<form class="header-newsletter" action="YOUR_GETRESPONSE_ACTION_ATTRIBUTE" method="post" target="_blank" novalidate>
<input type="text" class="header-newsletter-input" value="" name="name" placeholder="Your Name" />
<input type="email" class="header-newsletter-input" value="" name="email" placeholder="Your Email" />
<input type="hidden" name="campaign_token" value="CAMPAIGN_TOKEN"" />
<input type="submit" class="header-newsletter-button" value="Subscribe" name="subscribe" class="button" />
</form>


Part 2 – Insert newsletter section

  1. Header newsletter: go to Pages – All Pages and find your home page and click Edit With Divi.
  2. Footer newsletter: go to Divi – Theme Builder and click the pencil icon beside Global Footer to start edit
  3. Hover your cursor to the newsletter section, the module will outline and click the gear icon
  4. A modal box will pop-up with code within
  5. Remove all the code within and paste your own embed code
  6. Click the tick button to update the newsletter