Hello,
I can’t figure out how to integrate the mailerlite embedded form into the newsletter plugin.
I’m a code myself, so I thought it would be straightforward. Well, I tried everything, Javascript Snippet, HTML code, nothing works. Always the same “mailerlite > embedded code form configuration is not correct” message.
Also, your documentation does not show what to do with mailerlite code, so I’m at lost!
Can you explain/show the exact steps to reproduce? Because right now, I think your plugin doesn’t work with mailerlite.
Thanks.
Hi,
That should work, enter all the form code that is provided exactly as it is and the form would appear. Try as a test to embed the code in a text element, check if it appears like that.
Thanks
Well, it doesn’t…
Here’s what I’ve tried. Took the code from the JS Snippet tab (both JS and HTML codes) and inserted in the plugin Embedded Form Code area.
Took only the JS part from the JS Snippet tab.
Took only the HTML part from the JS snippet tab.
Took the HTML from the HTML code tab.
Nothing works. But it works when as you suggested I add the code in a text element.
Here’s the code :
JS Snippet tag
<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
var ml_account = ml('accounts', '1194458', 'k2v6k3i0v0', 'load');
</script>
<!-- End MailerLite Universal -->
<div class="ml-form-embed"
data-account="1194458:k2v6k3i0v0"
data-form="942194:c8z5g9">
</div>
HTML code tab
<style type="text/css">
#mlb2-942194.ml-form-embedContainer {
box-sizing: border-box;
display: table;
height: 100%;
margin: 0 auto;
position: static;
width: 100% !important;
}
#mlb2-942194.ml-form-embedContainer h4,
#mlb2-942194.ml-form-embedContainer p,
#mlb2-942194.ml-form-embedContainer span,
#mlb2-942194.ml-form-embedContainer button {
text-transform: none !important;
letter-spacing: normal !important;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper {
background-color: #f6f6f6;
border-width: 0px;
border-color: #e6e6e6;
border-radius: 4px;
border-style: solid;
box-sizing: border-box;
display: inline-block !important;
margin: 0;
padding: 0;
position: relative;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper.embedPopup,
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 400px; }
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 400px; width: 100%; }
#mlb2-942194.ml-form-embedContainer .ml-form-align-left { text-align: left; }
#mlb2-942194.ml-form-embedContainer .ml-form-align-center { text-align: center; }
#mlb2-942194.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; }
#mlb2-942194.ml-form-embedContainer .ml-form-align-right { text-align: right; }
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: auto;
width: 100%;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
padding: 20px 20px 0 20px;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal {
padding-bottom: 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
margin: 0 0 20px 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
#mlb2-942194.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;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
#mlb2-942194.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;
margin: 0 0 10px 0;
text-align: left;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul,
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol,
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul,
#mlb2-942194.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-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a,
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a {
color: #000000;
text-decoration: underline;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child,
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child {
margin: 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
margin: 0;
width: 100%;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent,
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
margin: 0 0 20px 0;
width: 100%;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm {
margin: 0;
padding: 0 0 20px 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
margin: 0 0 10px 0;
width: 100%;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
margin: 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal {
margin: 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
background-color: #ffffff;
color: #333333;
border-color: #cccccc;
border-radius: 4px;
border-style: solid;
border-width: 1px;
font-size: 14px;
line-height: 20px;
padding: 10px 10px;
width: 100%;
box-sizing: border-box;
max-width: 100%;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder { color: #333333; }
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder { color: #333333; }
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder { color: #333333; }
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder { color: #333333; }
#mlb2-942194.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-942194.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;
padding: 10px 10px;
width: 100%;
box-sizing: border-box;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
background-color: #000000;
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;
padding: 10px !important;
width: 100%;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover {
background-color: #333333;
border-color: #333333;
}
#mlb2-942194.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;
opacity: 1;
visibility: visible;
appearance: checkbox !important;
-moz-appearance: checkbox !important;
-webkit-appearance: checkbox !important;
position: relative;
height: 14px;
width: 14px;
}
#mlb2-942194.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-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
font-weight: normal;
margin: 0;
padding: 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a {
color: #000000;
text-decoration: underline;
}
#mlb2-942194.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;
line-height: 18px !important;
margin: 0 5px 0 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:first-letter {
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;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child {
margin: 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
margin: 0 0 20px 0;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
background-color: #000000;
border: none;
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;
padding: 10px !important;
width: 100%;
box-sizing: border-box;
}
#mlb2-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
background-color: #333333;
}
.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-942194.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p,
#mlb2-942194.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 { 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; }
}
</style>
<div id="mlb2-942194" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-942194">
<div class="ml-form-align-center ">
<div class="ml-form-embedWrapper embedForm">
<div class="ml-form-embedBody ml-form-embedBodyHorizontal 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/c8z5g9" data-code="c8z5g9" method="post" target="_blank">
<div class="ml-form-formContent horozintalForm">
<div class="ml-form-horizontalRow">
<div class="ml-input-horizontal">
<div style="width: 100%;" class="horizontal-fields">
<div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">
<input style="width: 100%;" type="email" class="form-control" data-inputmask="" name="fields[email]" value="" placeholder="Email">
</div>
</div>
</div>
<div class="ml-button-horizontal">
<button type="submit" class="primary ">Subscribe</button>
</div>
</div>
</div>
<input type="hidden" name="ml-submit" value="1">
</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_942194() {
var $ = ml_jQuery || jQuery;
$('.ml-subscribe-form-942194 .row-success').show();
$('.ml-subscribe-form-942194 .row-form').hide();
}
</script>
<script src="https://static.mailerlite.com/js/w/webforms.min.js?v03ee2804ef2f008535475a5d62f02f94" type="text/javascript"></script>
Indeed it seems not to work, maybe they made some modifications to the embed code and it is not working with the plugin. I will add this issue on our list and it will be inspected.
In the meantime you could embed the form in a text element where it works properly. Sorry for the inconvenience.
