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

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>
<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 Elementor.
  2. Footer newsletter: go to Layout – Layout and find Footer and click Edit with Elementor
  3. Select the default/sample newsletter section, on left bar you’ll see the default/sample newsletter
  4. Remove all default/sample newsletter and paste your own embed code following the detailed instruction in Part 1 shown below
  5. Click Update