How to Setup the Newsletter Block


Important

  • After you set up your form, try to subscribe to make sure everything works. If you have followed all instructions in order and it’s still not working, copy the entire HTML/script from the site you’re using and check if it’s working.
  • The instructions below cover only how to add the email field + the first/last name fields. If you want to add any checkboxes, the HTML I’ve provided might not work, so you can go ahead and copy the entire HTML of the form you want to embed from your account.

MailChimp

Find the form action link + choose fields to display

  1. Go to your MailChimp account > Audience > Signup forms > Embedded forms
  2. Choose Form Fields > select the fields you want to display in addition to the Email field
  3. Click Continue in the top right corner of the page
  4. From the Embedded Form Code box, copy the form action link (the selected part is the link):

Add the form

  1. Go to your WordPress dashboard > Pages > open the Homepage page in the editor
  2. Scroll down to the newsletter section and add this code to the HTML block:
<form action="FORM-LINK" class="signup-form flexbox" method="post" target="_blank">
<input type="email" name="EMAIL" placeholder="Email address" value="" required />
<input type="submit" value="Subscribe" />
</form>
  1. Replace FORM-LINK with the link you’ve copied from MailChimp
  2. If you want to show the First Name and/or Last Name fields, add the following before the subscribe button:
<input type="text" name="FNAME" placeholder="First name" value="" required />
<input type="text" name="LNAME" placeholder="Last name" value="" required />

Flodesk

  1. Go to your Flodesk account > Forms > + New form > Inline > hover over the form and click on Customize it
  1. Choose a segment or create a new one > Save
  2. Click anywhere on your form to start editing (I recommend removing the title + text underneath it, as this is already added):

You can edit the colors, but don’t edit the font as the form will inherit the fonts from the theme.

  1. An important part is to make the Canvas and Background colors transparent (0:38 in the video above)
  2. After you’re done customizing your form, click on Next > adjust the settings in Customize to your liking > Continue
  3. Copy the Header code and add it to the <head></head> of your site (you can find instructions for this here)
  4. Then copy the Inline code > go to your WordPress dashboard > Pages > open the Homepage page in the editor > scroll down to the newsletter section > paste the code in the HTML block

You can follow the same instructions to add a form anywhere on your site (including just copying the entire block from the Homepage, if you want the same design somewhere else).

If you want the form fields to be in a column instead of a row, choose the Inline without image form template:


ConvertKit

Find the form action link + choose fields to display

  1. Go to your ConvertKit account > Grow > Landing Pages & Forms
  2. Click on + Create new > Form > Inline
  3. If you want to add a First name field in addition to the Email field, click on the “+” sign
  4. Select “First name” from the Custom field dropdown and click on Save
  5. Click on Publish > select HTML > copy the form action link (the selected part is the link):

Add the form

  1. Go to your WordPress dashboard > Pages > open the Homepage page in the editor
  2. Scroll down to the newsletter section and add this code to the HTML block:
<form action="FORM-LINK" class="signup-form flexbox" method="post" target="_blank">
<input type="email" name="email_address" placeholder="Email address" value="" required />
<input type="submit" value="Subscribe" />
</form>
  1. Replace FORM-LINK with the link you’ve copied from ConvertKit
  2. If you want to show the First Name field, add the following before the subscribe button:
<input type="text" name="first_name" placeholder="First name" value="" required />

Mailerlite

  1. Go to your Mailerlite account > Forms > Embedded forms > click on the Create button
  2. Add a form name > click on Save and continue
  3. Create a group for your subscribers > Continue
  4. If you want to add a First Name or Last Name fields in addition to the Email field, click on the Email field > then click on the Add field button
  5. Click on Done editing
  6. Scroll down to Embed form into your website > select HTML code
  7. Scroll down to <form class=”ml-block-form”…> (past all the CSS) and copy the form action link

Add the form

  1. Go to your WordPress dashboard > Pages > open the Homepage page in the editor
  2. Scroll down to the newsletter section and add this code to the HTML block:
<div id="mlb2-FORMID" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-FORMID">
<div class="ml-form-embedBody ml-form-embedBodyDefault row-form">
<form class="ml-block-form" action="FORM-LINK" data-code="" method="post" target="_blank">
<div class="ml-form-formContent signup-form flexbox">
<input aria-label="email" aria-required="true" type="email" class="form-control" data-inputmask="" name="fields[email]" placeholder="Email address" autocomplete="email">
<button type="submit" class="primary">Subscribe</button>
</div>
<input type="hidden" name="ml-submit" value="1">
<input type="hidden" name="anticsrf" value="true">
</form>
</div>
<div class="ml-form-successBody row-success" style="display: none; text-align: center;">
<p>Woohoo, you have successfully joined our subscriber list!</p>
</div>
</div>
  <script>
    function ml_webform_success_FORMID() {
      var $ = ml_jQuery || jQuery;
      $('.ml-subscribe-form-FORMID .row-success').show();
      $('.ml-subscribe-form-FORMID .row-form').hide();
    }
      </script>
      <script src="https://groot.mailerlite.com/js/w/webforms.min.js?v491724307ca3b85c1c754857e93994e5" type="text/javascript"></script>
  1. Replace FORM-LINK with the link you’ve copied from ConvertKit
  2. VERY IMPORTANT – replace FORMID everywhere with your own form ID (you’ll see it in the HTML code section in Mailerlite)
  3. You can replace the text in bold (“Woohoo, you have successfully joined our subscriber list!”) with the text you want people to see after they subscribe
  4. If you want to show the First/Last Name fields, add the following before the subscribe button:
<input aria-label="name" type="text" class="form-control" data-inputmask="" name="fields[name]" placeholder="First Name" autocomplete="name">
<input aria-label="last_name" type="text" class="form-control" data-inputmask="" name="fields[last_name]" placeholder="Last Name" autocomplete="">

Form style: row or column

This does not apply to Flodesk.

The default style is all fields in a row, but if you want them in a column (for example – in the sidebar), add the form-column class to the form, like this:

MailChimp & ConvertKit:

<form action="FORM-LINK" class="signup-form form-column flexbox" method="post" target="_blank">

Mailerlite:

<div class="ml-form-formContent signup-form form-column flexbox">