• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Integrate Mailerlite with the Genesis Enews Extended plugin

Last Updated on June 11, 2022 Favorited: 0 times

This tutorial provides the steps to Integrate Mailerlite with the Genesis Enews Extended plugin. Mailerlite is an affordable Mailchimp alternative Email Marketing software service.

Prerequisite:

a) Download and Active Genesis Enews Extended plugin.

b) Setup the widget area where you want to show the form. You can use in the primary sidebar or can create a widget area for Newsletter section. Follow the Tutorials Tagged with Newsletter.

Important Update:

Mailerlite has recently again changed the form action URL and restricted for submission only with no redirection option without their JS script.

You can set up the Enews widget as mentioned in the screenshot. It will work.

However, Submission will give a message:

{"success":true}

Here is a workaround if you want the redirection to work but still want to use the Enews widget. Currently, The Plugin does not allow to add custom id and class with additional HTML/Scripts per the Mailerlite requirements.

You can add the widget and setup like the screenshot then open the page from the frontend.

STEP 1

Copy the HTML markup generated by the Enews widget Extended Plugin.

Here What I have

<div class="enews enews-2-fields">
    <h3 class="widgettitle widget-title">newsletter</h3>
    <form id="subscribeenews-ext-2" class="enews-form"
        action="https://assets.mailerlite.com/jsonp/72405/forms/57544192333711240/subscribe" method="post"
        target="_blank" name="enews-ext-2">
        <input type="text" id="subbox1" class="enews-subbox enews-fname" value="" aria-label="First Name"
            placeholder="First Name" name="fields[name]"> <input type="email" value="" id="subbox" class="enews-email"
            aria-label="E-Mail Address" placeholder="E-Mail Address" name="fields[email]" required="required">
        <input type="hidden" name="ml-submit" value="1">
        <input type="hidden" name="anticsrf" value="true" aria-invalid="false">
        <input type="submit" value="Go" id="subbutton" class="enews-submit">
    </form>
</div>

STEP 2

Now, Login to your Mailerlite account and find the HTML and check the form HTML.

You will get an id and class. Here what i have.

<div id="mlb2-652789" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-652789">

We will replace the enews id and class with mailerlite class.

<div id="mlb2-652789" class="ml-subscribe-form enews">

STEP 3

Now we have the id and class added, we will add the mailerlite script, it is in the bottom of the HTML code. You will see Init and js script. Here What I have.

<script>
    function ml_webform_success_652789() {
        try {
            window.top.location.href = 'https://popwp.com/thanks/';
        } catch (e) {
            window.location.href = 'https://popwp.com/thanks/';
        }
    }
</script>



<script src="https://groot.mailerlite.com/js/w/webforms.min.js?v982545f425161d5f5c95b96ab6c34e1b"
    type="text/javascript"></script>

STEP 4

Put the HTML and JS script in a HTML widget or Block and it will work.

Important update ends here. If you wish to get a ACF field or shortcode based solution, email me. If more people show interest, will share some new ways to do it. 🙂

Thanks.

Continue reading if you are not familiar with the tutorial.

STEP 1

Sign Up for a New account on Mailterlite.com and Create a Subscription form and assign it to a Group.

STEP 2.

In Settings Tab, Enable Custom Success Page and put the URL.

STEP 3.

Once your Newsletter form is created, You will be redirected to the page like this. You will find multiple ways to embed the form in your website including Javascript snippet, HTML Code and additional Popup click event option.

Click on HTML code and Copy the Code/Copy to clipboard and Paste it in a code editor or Notepad.

Here is the code from one of my form.

<style type="text/css">
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);
</style>
<style type="text/css">
  /* LOADER */
  		.ml-form-embedSubmitLoad {
  		  display: inline-block;
  		  width: 20px;
  		  height: 20px;
  		}
  		.ml-form-embedSubmitLoad:after {
  		  content: " ";
  		  display: block;
  		  width: 11px;
  		  height: 11px;
  		  margin: 1px;
  		  border-radius: 50%;
  		  border: 4px solid #fff;
  		  border-color: #ffffff #ffffff #ffffff transparent;
  		  animation: ml-form-embedSubmitLoad 1.2s linear infinite;
  		}
  		@keyframes ml-form-embedSubmitLoad {
  		  0% {
  			transform: rotate(0deg);
  		  }
  		  100% {
  			transform: rotate(360deg);
  		  }
  		}
        #mlb2-1188246.ml-form-embedContainer {
          box-sizing: border-box;
          display: table;
          height: 99.99%;
          margin: 0 auto;
          position: static;
          width: 100% !important;
        }
        #mlb2-1188246.ml-form-embedContainer h4,
        #mlb2-1188246.ml-form-embedContainer p,
        #mlb2-1188246.ml-form-embedContainer span,
        #mlb2-1188246.ml-form-embedContainer button {
          text-transform: none !important;
          letter-spacing: normal !important;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper {
          background-color: #f6f6f6;
          
          border-width: 0px;
          border-color: transparent;
          border-radius: 4px;
          border-style: solid;
          box-sizing: border-box;
          display: inline-block !important;
          margin: 0;
          padding: 0;
          position: relative;
                }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper.embedPopup,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 400px; }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 400px; width: 100%; }
        #mlb2-1188246.ml-form-embedContainer .ml-form-align-left { text-align: left; }
        #mlb2-1188246.ml-form-embedContainer .ml-form-align-center { text-align: center; }
        #mlb2-1188246.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; }
        #mlb2-1188246.ml-form-embedContainer .ml-form-align-right { text-align: right; }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img {
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          height: auto;
          margin-top: 0 !important;
          margin-bottom: 0 !important;
          max-width: 400px!important;
          width: 100%;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
          padding: 20px 20px 0 20px;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal {
          padding-bottom: 0;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
          margin: 0 0 20px 0;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
          color: #000000;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif;
          font-size: 30px;
          font-weight: 400;
          margin: 0 0 10px 0;
          text-align: left;
          word-break: break-word;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
          color: #000000;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif;
      		font-size: 14px;
      		font-weight: 400;
      		line-height: 20px;
          margin: 0 0 10px 0;
          text-align: left;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol {
          color: #000000;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif;
      		font-size: 14px;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a {
          color: #000000;
          text-decoration: underline;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child {
          margin: 0;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
          margin: 0;
          width: 100%;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
          margin: 0 0 20px 0;
          width: 100%;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm {
          margin: 0;
          padding: 0 0 20px 0;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
          margin: 0 0 10px 0;
          width: 100%;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
          margin: 0;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal {
          margin: 0;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
          background-color: #ffffff !important;
          color: #333333 !important;
          border-color: #cccccc !important;
          border-radius: 4px !important;
          border-style: solid !important;
          border-width: 1px !important;
          font-size: 14px !important;
          height: 40px;
          line-height: 20px !important;    
          margin-bottom: 0;
          margin-top: 0;
          padding: 10px 10px !important;
          width: 100% !important;
          box-sizing: border-box !important;
          max-width: 100% !important;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-webkit-input-placeholder { color: #333333; }
  
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-moz-placeholder { color: #333333; }
  
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-ms-input-placeholder { color: #333333; }
  
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-moz-placeholder { color: #333333; }
  
  
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow {
          height: 42px;
        }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 70%; float: left; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal { width: 30%; float: left; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields { box-sizing: border-box; float: left; padding-right: 10px;  }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input {
          background-color: #ffffff;
          color: #333333;
          border-color: #cccccc;
          border-radius: 4px;
          border-style: solid;
          border-width: 1px;
          font-size: 14px;
          line-height: 20px;
          margin-bottom: 0;
          margin-top: 0;
          padding: 10px 10px;
          width: 100%;
          box-sizing: border-box;
          overflow-y: initial;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
          background-color: #000000 !important;
         	border-color: #000000;
          border-style: solid;
          border-width: 1px;
          border-radius: 4px;
          box-shadow: none;
          color: #ffffff !important;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif;
          font-size: 14px !important;
          font-weight: 700;
          line-height: 20px;
          margin: 0 !important;
          padding: 10px !important;
          width: 100%;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover {
          background-color: #333333 !important;
          border-color: #333333 !important;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
          display: inline-block;
      	  float: left;
      	  margin: 1px 0 0 0;
      	  left: 0;
      	  top: 0;
      	  opacity: 1;
      	  visibility: visible;
      	  appearance: checkbox !important;
      	  -moz-appearance: checkbox !important;
      	  -webkit-appearance: checkbox !important;
      	  position: relative;
      	  height: 14px;
      	  width: 14px;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description {
          color: #000000;
          display: block;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif;
          font-size: 12px;
          text-align: left;
          padding-left: 25px;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
          font-weight: normal;
          margin: 0;
          padding: 0;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a {
          color: #000000;
          text-decoration: underline;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p {
          color: #000000 !important;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
          font-size: 12px !important;
          font-weight: normal !important;
          line-height: 18px !important;
          padding: 0 !important;
          margin: 0 5px 0 0 !important;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child {
          margin: 0;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
          margin: 0 0 20px 0;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
          background-color: #000000 !important;
          border: none !important;
          border-radius: 4px !important;
          box-shadow: none !important;
          color: #ffffff !important;
          font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
          font-size: 14px !important;
          font-weight: 700 !important;
          line-height: 20px !important;
          height: 40px;
          padding: 10px !important;
          width: 100% !important;
          box-sizing: border-box !important;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
          display: none;
        }
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
          background-color: #333333 !important;
        }
        .ml-subscribe-close {
          width: 30px;
          height: 30px;
          background: url(https://bucket.mlcdn.com/images/default/modal_close.png) no-repeat;
          background-size: 30px;
          cursor: pointer;
          margin-top: -10px;
          margin-right: -10px;
          position: absolute;
          top: 0;
          right: 0;
        }
        .ml-error input {
          background: url(https://bucket.mlcdn.com/images/default/error-icon.png) 98% center no-repeat #ffffff !important;
          background-size: 24px 24px !important;
        }
        .ml-error .label-description {
          color: #ff0000 !important;
        }
        .ml-error .label-description p {
          color: #ff0000 !important;
        }
  
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p,
        #mlb2-1188246.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter {
          color: #ff0000 !important;
        }
              @media only screen and (max-width: 400px){
          .ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; }
          .ml-form-formContent.horozintalForm { float: left!important; }
          .ml-form-formContent.horozintalForm .ml-form-horizontalRow { height: auto!important; width: 100%!important; float: left!important; }
          .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%!important; }
          .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-right: 0px!important; padding-bottom: 10px; }
          .ml-form-formContent.horozintalForm .ml-button-horizontal { width: 100%!important; }
          .ml-form-embedHeader { display: none !important; }
        }
</style>
<div id="mlb2-1188246" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-1188246">
  <div class="ml-form-align-center ">
    <div class="ml-form-embedWrapper embedForm">
      <div class="ml-form-embedBody ml-form-embedBodyDefault row-form">
        <div class="ml-form-embedContent">
          <h4>Newsletter</h4>
          <p>Signup for news and special offers!</p>
        </div>
        <form class="ml-block-form" action="https://app.mailerlite.com/webforms/submit/l3h5g6" data-code="l3h5g6" method="post" target="_blank">
          <style type="text/css">
            .ml_message_wrapper {
              position: absolute !important;
              left: -9999px !important;
            }
          </style>
          <div aria-label="Please leave the following field empty" class="ml_message_wrapper">
            <input type="text" name="ml_message" tabindex="-1" value="" placeholder="Message" autocomplete="off" title="message">
            <input type="text" name="ml_email" tabindex="-1" value="" placeholder="Email" autocomplete="off" title="email">
            <input type="text" name="ml_name" tabindex="-1" value="" placeholder="Name" autocomplete="off" title="name">
          </div>
          <div class="ml-form-formContent">
            <div class="ml-form-fieldRow ">
              <div class="ml-field-group ml-field-name">
                <input type="text" class="form-control" data-inputmask="" name="fields[name]" value="" placeholder="Name">
              </div>
            </div>
            <div class="ml-form-fieldRow ">
              <div class="ml-field-group ml-field-last_name">
                <input type="text" class="form-control" data-inputmask="" name="fields[last_name]" value="" placeholder="Last name">
              </div>
            </div>
            <div class="ml-form-fieldRow ml-last-item">
              <div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">
                <input type="email" class="form-control" data-inputmask="" name="fields[email]" value="" placeholder="Email">
              </div>
            </div>
          </div>
          <style type="text/css">
            .ml-form-recaptcha {
              margin-bottom: 20px;
            }
          
            .ml-form-recaptcha.ml-error iframe {
              border: solid 1px #ff0000;
            }
          </style>
          <input type="hidden" name="ml-submit" value="1">
          <div class="ml-form-embedSubmit">
            <button type="submit" class="primary">Subscribe</button>
            <button disabled="disabled" style="display: none;" type="button" class="loading">

                  <div class="ml-form-embedSubmitLoad"><div></div><div></div><div></div><div></div></div>

                </button>
          </div>
        </form>
      </div>
      <div class="ml-form-successBody row-success" style="display: none">
        <div class="ml-form-successContent">
          <h4>Thank you!</h4>
          <p>You have successfully joined our subscriber list.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  function ml_webform_success_1188246() {
    try {
        window.top.location.href = 'https://www.blogtipstricks.com/confirmation/';
      } catch (e) {
        window.location.href = 'https://www.blogtipstricks.com/confirmation/';
      }
    }
</script>
<img src="https://track.mailerlite.com/webforms/o/1188246/l3h5g6?vaa4d608450783acdc64d5338ff94f6d5" width="1" height="1" style="max-width: 1px; max-height: 1px; visibility: hidden; padding: 0; margin: 0; display: block;" border="0">
<script src="https://static.mailerlite.com/js/w/webforms.min.js?vaa4d608450783acdc64d5338ff94f6d5" type="text/javascript"></script>

Here, We have inline CSS, HTML and some JS and we only need to find a few elements from HTML.

So, here is the HTML part

<div id="mlb2-1188246" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-1188246">
  <div class="ml-form-align-center ">
    <div class="ml-form-embedWrapper embedForm">
      <div class="ml-form-embedBody ml-form-embedBodyDefault row-form">
        <div class="ml-form-embedContent">
          <h4>Newsletter</h4>
          <p>Signup for news and special offers!</p>
        </div>
        <form class="ml-block-form" action="https://app.mailerlite.com/webforms/submit/l3h5g6" data-code="l3h5g6" method="post" target="_blank">
          <style type="text/css">
            .ml_message_wrapper {
              position: absolute !important;
              left: -9999px !important;
            }
          </style>
          <div aria-label="Please leave the following field empty" class="ml_message_wrapper">
            <input type="text" name="ml_message" tabindex="-1" value="" placeholder="Message" autocomplete="off" title="message">
            <input type="text" name="ml_email" tabindex="-1" value="" placeholder="Email" autocomplete="off" title="email">
            <input type="text" name="ml_name" tabindex="-1" value="" placeholder="Name" autocomplete="off" title="name">
          </div>
          <div class="ml-form-formContent">
            <div class="ml-form-fieldRow ">
              <div class="ml-field-group ml-field-name">
                <input type="text" class="form-control" data-inputmask="" name="fields[name]" value="" placeholder="Name">
              </div>
            </div>
            <div class="ml-form-fieldRow ">
              <div class="ml-field-group ml-field-last_name">
                <input type="text" class="form-control" data-inputmask="" name="fields[last_name]" value="" placeholder="Last name">
              </div>
            </div>
            <div class="ml-form-fieldRow ml-last-item">
              <div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">
                <input type="email" class="form-control" data-inputmask="" name="fields[email]" value="" placeholder="Email">
              </div>
            </div>
          </div>
          <style type="text/css">
            .ml-form-recaptcha {
              margin-bottom: 20px;
            }
          
            .ml-form-recaptcha.ml-error iframe {
              border: solid 1px #ff0000;
            }
          </style>
          <input type="hidden" name="ml-submit" value="1">
          <div class="ml-form-embedSubmit">
            <button type="submit" class="primary">Subscribe</button>
            <button disabled="disabled" style="display: none;" type="button" class="loading">

                  <div class="ml-form-embedSubmitLoad"><div></div><div></div><div></div><div></div></div>

                </button>
          </div>
        </form>
      </div>
      <div class="ml-form-successBody row-success" style="display: none">
        <div class="ml-form-successContent">
          <h4>Thank you!</h4>
          <p>You have successfully joined our subscriber list.</p>
        </div>
      </div>
    </div>
  </div>
</div>

The value here we need is

Form Action:

<form class="ml-block-form" action="https://app.mailerlite.com/webforms/submit/l3h5g6" data-code="l3h5g6" method="post" target="_blank">

Value is –

https://app.mailerlite.com/webforms/submit/l3h5g6

Update:- You may see a different URL like

https://static.mailerlite.com/webforms/submit/l3h5g6

E-mail Field:

<input type="email" class="form-control" data-inputmask="" name="fields[email]" value="" placeholder="Email">

Value is –

fields[email]

First Name Field:

<input type="text" class="form-control" data-inputmask="" name="fields[name]" value="" placeholder="Name">

Value is –

fields[name]

Last Name Field:

<input type="text" class="form-control" data-inputmask="" name="fields[last_name]" value="" placeholder="Last name">

Value is –

fields[last_name]

We can add additional placeholder value name like the same.

Hidden Fields:

<input type="hidden" name="ml-submit" value="1">

Value is –

<input type="hidden" name="ml-submit" value="1">

Take a Look at the Screenshot You can add fields[last_name] for last name.

Save the Widget.

Done.

Related Posts

  • Horizontal Newsletter widget design in Genesis
  • Integrate MailChimp with the Genesis Enews Extended plugin
  • Newsletter section design having Image and Text widget
  • Insert a Widget Area in Between Blog Posts in Genesis
  • Custom Newsletter section design in Genesis

Categories: Free Content, Genesis Tutorials, WordPress Tutorials Tags: eNews Extended, Mailerlite, newsletter

Reader Interactions

Comments

  1. Destiny says

    March 1, 2019 at 2:17 am

    This is still not registering my subscribers when I check my mailerlite account. Any suggestions on how to get the actual emails to show up?

    • Aryan Raj says

      March 1, 2019 at 2:49 pm

      I tested it and it works. Send me screenshot, and html on chat.

  2. Tracey Fitz says

    January 3, 2020 at 4:09 pm

    Thank you! It worked perfectly.

  3. Abhishek says

    July 7, 2021 at 5:02 am

    Thanks. It worked with MailerLite.

  4. Adam says

    December 1, 2021 at 8:48 pm

    This post is helpful; however, it needs to be updated. Mailerlite has made a slight change. Instead of app.mailerlite, it now uses static.mailerlite. So when you’re putting in the URL that goes in the Form Action field of the Genesis eNews Extended widget, use the static.mailerlite URL.

    • Aryan Raj says

      January 29, 2022 at 4:57 pm

      Thanks, updated.

  5. Jennie says

    January 14, 2022 at 11:59 am

    Hi
    Is there a way of getting a redirect on this form because mine just pings off to Mailerlite and you lose access to the site?!

    • Aryan Raj says

      January 18, 2022 at 1:27 pm

      Hi, there is settings in Mailerlite dashboard form settings to redirect the user to a URL after form submission.

  6. Zoe Walker says

    January 24, 2022 at 4:39 pm

    Hi, is there any way to do this so that the subscriber only has to fill in the form once? I have followed all the steps listed here but when testing it, I am redirected to a landing page with the subscription form on after already filling out the form on my website.

    • Aryan Raj says

      January 29, 2022 at 4:57 pm

      You can enable custom Success Page Redirect URL in settings. Check the tutorial screenshot.

  7. Alex says

    January 29, 2022 at 12:07 am

    Hi,

    I’ve followed your instructions, but when I hit the submission button, it just redirects me to my Mailerlite form to type in my name and email again. Any idea what I might have done wrong?

    • Aryan Raj says

      January 29, 2022 at 4:57 pm

      Oh, I just updated the tutorial, You can enable custom Success Page in settings. Check the tutorial screenshot.

  8. Erin says

    April 4, 2022 at 5:13 am

    Hi! I believe this tutorial may be outdated as I don’t see a newsletter option anymore. Could you offer assistance?

  9. Erin says

    April 4, 2022 at 5:31 am

    Nevermind, I found the Newsletter page! I actually don’t undestand what URL I should be inputting in the “Redirect URL box” – Thank you!

  10. Nicole says

    August 17, 2022 at 6:36 pm

    Hi, I was able to follow all of your instructions. I was wondering if there is anyway to avoid the {“success”:true} page after submission?

    • Aryan Raj says

      November 30, 2022 at 7:39 am

      With recent change, it is not possible. sorry. Mailerlite is now very restrictive.

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service