In this article, you will learn how to add an email sign-up form to your Opt-In page by following all the steps below. Required: email marketing service, for example, MailerLite (we recommend & use it ourselves), ConvertKit, MailChimp, ActiveCampaign, GetResponse, etc.

Step 1: Create a new sign-up form
Step 2:
Insert a sign-up form into your Opt-in page


1. Create a new sign-up form

Please click on the tab below (based on the email marketing service that you use) for the step-by-step to create a new sign-up form and grab the code.

MailerLite

  1. Click on the main Forms section and select the Embedded Forms tab.
  2. Click the Create Embedded Form button.
  3. Name your Form.
  4. Select your Subscribers group(s) where the signups will be added (or click add new group if you don’t have any group yet) and click Save and Continue.
  5. Design your form and the success message.
  6. Note: You can customize your form with a design toolkit that includes background & button designs, custom input fields and a variety of font options. Also, you can choose between DEFAULT, HORIZONTAL, and CARD for the form’s layout.
  7. Click the Next button once you’re finished and you’ll find instructions on how to insert a form into your website.
  8. Find HTML code and click copy to clipboard. Now you have copied the sign-up form code you can go onto step 2.

Setup MailerLite Newsletter
Setup MailerLite Newsletter
Setup MailerLite Newsletter
Setup MailerLite Newsletter
Setup MailerLite Newsletter
Setup MailerLite Newsletter
MailChimp

  1. Click on the Create button in the top menu bar and select Signup Form from the popup.
  2. Choose Embedded Form.
  3. Select your audience where the signup will be added and click begin.
  4. Design your form and the success message.
  5. Below the form preview, there is a copy/paste onto your site box. Copy the action attribute link from inside that box and replace with the embed code below and go to step 2.

Setup MailChimp Newsletter
Setup MailChimp Newsletter
Setup MailChimp Newsletter
Setup MailChimp Newsletter


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

<div style="text-align:center">
<!-- Begin MailChimp Signup Form -->
<form 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" value="" name="MERGE1" id="MERGE1" placeholder="Your Name" />
<input type="email" alue="" name="MERGE0" class="required email" id="MERGE0" placeholder="Your Email" />
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</form>
<!-- End MailChimp Signup Form -->
</div>

ConvertKit

  1. Click on the Forms and Landing Pages section from the top menu.
  2. Select inline style and clean template for the form.
  3. Design your form in horizontal format and the success message using the menu options on the right-hand side of the screen.
  4. Hit Save when you are finished and then select </> Embed from the menu.
  5. Copy the Javascript provided
  6. Replace <SCRIPT> from the code provided below
  7. Paste all the code (included the code provided in the template)
  8. Find the HTML code and click the copy button in the top right corner of the code box. Copy the sign-up form and replace with the embed code below and go to step 2.

ConvertKit
ConvertKit
ConvertKit
ConvertKit
ConvertKit


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

<div style="text-align:center">
<SCRIPT>
<style type="text/css">
.ck_form.ck_naked .ck_form_fields {padding: 0;}
.page .ck_form.ck_naked {margin: 0 auto;}
</style>
</div>

GetDrip

  1. Click on the Forms tab and select New Opt-In Form.
  2. Name your form.
  3. Design your form and add the field that you want to include.
  4. Next, you need to disable the form widget. Click on Widget and toggle to Off.
  5. Note: it can take a while for the widget to disable and you might need to clear your caches.
  6. Click on the Embedded tab and copy the HTML code. Copy the action attribute link and replace with the embed code below and go to step 2.

Setup GetDrip Newsletter
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

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

GetResponse

  1. Click on Create and select the Create form button.
  2. Click on List Builder Wizard to see the different template options available and select which one you want to use.
  3. Design and customize your form.
  4. Click on the gear icon in the top right corner to set up your thank you page and autoresponder.
  5. When you are done editing your form, hit Save or Publish. You will then be taken to another page where you can copy the HTML code for your form.
  6. Copy the specific (shows below) text and replace with the embed code below and go to step 2.

Setup GetResponse Newsletter
Setup GetResponse Newsletter
Setup GetResponse Newsletter
Copy the highlighted text.


Insert 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

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


2. Insert a sign-up form into your Opt-in page 

  1. Go to your Opt-in Page to edit the sample sign-up form section.
  2. Remove/Delete the sample sign-up form code.
  3. Insert the sign-up form code that you’ve copied from Part 1 above into the HTML Code input area.
  4. Click the Update button.

Test your opt-in page to make sure it works and you’re done!

Q: Where do I store or host my freebie?
Upload your freebie to Google Drive or Dropbox, and copy the download link.

Q: How do my readers get their freebie after signing up?
Go to your email marketing service (MailerLite/ConvertKit/Mailchimp/etc) to set up a welcome email — this is where you’ll add your freebie download link — and automatically sent to people once they have confirmed their subscription to your email newsletter.