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

Click on your newsletter provider below

MailerLite

Getting MailerLite newsletter – Step 1
Setup MailerLite Newsletter
Getting MailerLite newsletter – Step 2
Setup MailerLite Newsletter
Getting MailerLite newsletter – Step 3
Setup MailerLite Newsletter
Getting MailerLite newsletter – Step 4
Setup MailerLite Newsletter
Click the “Copy to clipboard” to copy the Javascript provided and follow the Part 2 to insert the Javascript to the newsletter field.


Editing the Newsletter

1- Copy newsletter code below
2- Replace <SCRIPT> to the one you copied from MailerLite
3- Insert into Theme Options’ newsletter area

<SCRIPT>
<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;}
</style>

MailChimp

Getting MailChimp newsletter – Step 1
Setup MailChimp Newsletter
Getting MailChimp newsletter – Step 2
Setup MailChimp Newsletter
Getting MailChimp newsletter – Step 3
Setup MailChimp Newsletter
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
3- Insert into Theme Options newsletter area

<!-- Begin MailChimp Signup Form -->
<form class="header-newsletter" action="https: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="MERGE1" id="MERGE1" placeholder="Your Name" />
<input type="email" class="header-newsletter-input" value="" name="MERGE0" class="required email" id="MERGE0" 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

Getting Flodesk newsletter – Step 1
Setup Flodesk Newsletter
Getting Flodesk newsletter – Step 2
Setup Flodesk Newsletter
Getting Flodesk newsletter – Step 3
Setup Flodesk Newsletter
Getting Flodesk newsletter – Step 4
Setup Flodesk Newsletter
Getting Flodesk newsletter – Step 5
Setup Flodesk Newsletter
Click the “Copy code” to copy both the Javascript provided and follow the Part 2 to insert the Javascript to the newsletter field.

ConvertKit

Refer here: https://help.convertkit.com/articles/2502544-beginners-guide-to-forms

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


Editing the Newsletter

1- Copy newsletter code below
2- Replace <SCRIPT> to the one you copied from ConvertKit
3- Insert into Theme Options’ newsletter area

<SCRIPT>
<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
3- Insert into Theme Options newsletter area

<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
4- Insert into Theme Options newsletter area

<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