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.
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?
I tested it and it works. Send me screenshot, and html on chat.
Thank you! It worked perfectly.
Thanks. It worked with MailerLite.
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.
Thanks, updated.
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?!
Hi, there is settings in Mailerlite dashboard form settings to redirect the user to a URL after form submission.
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.
You can enable custom Success Page Redirect URL in settings. Check the tutorial screenshot.
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?
Oh, I just updated the tutorial, You can enable custom Success Page in settings. Check the tutorial screenshot.
Hi! I believe this tutorial may be outdated as I don’t see a newsletter option anymore. Could you offer assistance?
Nevermind, I found the Newsletter page! I actually don’t undestand what URL I should be inputting in the “Redirect URL box” – Thank you!
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?
With recent change, it is not possible. sorry. Mailerlite is now very restrictive.