Part 1 – Get embed code

You must have account with a third party newsletter service, such as MailerLite, MailChimp, ConvertKit, Drip 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="newsletter-section-form" 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="newsletter-section-form-input" value="" name="FNAME" id="mce-FNAME" placeholder="Your Name" />
<input type="email" class="newsletter-section-form-input" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email" />
<input type="submit" class="newsletter-section-form-button" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</form>
<!-- End MailChimp Signup Form -->

Flodesk
ConvertKit

Create ConvertKit Form:
https://intercom.help/convertkit/en/articles/2502640-the-convertkit-form-builder

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

<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 – Enable newsletter section

  1. Go to Appearance – Theme Options – Newsletter Settings
  2. Insert text description and embed HTML code of your newsletter sign up in the form field. To have the subscription box design shows like in demo site, please follow the detailed instruction in Part 1 shown below
  3. Click Save Settings.