Hello all,
I have a problem with the newsletter. I chose mailerlite, but I have the following error : Newsletter mailerlite > embedded form code configuration is not correct ; when I tried to add the embed form as Mailerlite provided me :
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext');
#mlb2-8437606,
#mlb2-8437606 *,
#mlb2-8437606 a:hover,
#mlb2-8437606 a:visited,
#mlb2-8437606 a:focus,
#mlb2-8437606 a:active {
overflow: visible;
position: static;
background: none;
border: none;
bottom: auto;
clear: none;
cursor: default;
float: none;
letter-spacing: normal;
line-height: normal;
text-align: left;
text-indent: 0;
text-transform: none;
visibility: visible;
white-space: normal;
max-height: none;
max-width: none;
left: auto;
min-height: 0;
min-width: 0;
right: auto;
top: auto;
width: auto;
z-index: auto;
text-shadow: none;
box-shadow: none;
outline: medium none;
}
#mlb2-8437606 a:hover {
cursor: pointer !important;
}
#mlb2-8437606 h4 {
font-weight: normal;
}
#mlb2-8437606 .subscribe-form {
padding: 20px;
width: 350px !important;
border: 2px solid #F6F6F6 !important;
background: #f6f6f6 none !important;
border-radius: 0px !important;
box-sizing: border-box !important;
}
#mlb2-8437606 .ml-block-form {
margin-bottom: 0px;
}
#mlb2-8437606 .subscribe-form .form-section {
margin-bottom: 20px;
width: 100%;
}
#mlb2-8437606 .subscribe-form .form-section.mb10 {
margin-bottom: 10px;
float: left;
}
#mlb2-8437606 .subscribe-form .form-section.mb0 {
margin-bottom: 0px;
}
#mlb2-8437606 .subscribe-form .form-section h4 {
margin: 0px 0px 10px 0px !important;
padding: 0px !important;
color: #000000 !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 28px !important;
line-height: 100%;
text-align: left !important;
}
#mlb2-8437606 .subscribe-form .form-section p,
#mlb2-8437606 .subscribe-form .form-section li {
line-height: 150%;
padding: 0px !important;
margin: 0px 0px 10px 0px;
color: #000000 !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 14px !important;
}
#mlb2-8437606 .subscribe-form .form-section a {
font-size: 14px !important;
}
#mlb2-8437606 .subscribe-form .form-section .confirmation_checkbox {
line-height: 150%;
padding: 0px !important;
margin: 0px 0px 15px 0px !important;
color: #000000 !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
}
#mlb2-8437606 .subscribe-form .form-section .confirmation_checkbox input[type="checkbox"] {
margin-right: 5px !important;
}
#mlb2-8437606 .subscribe-form .form-section .form-group {
margin-bottom: 15px;
}
#mlb2-8437606 .subscribe-form .form-section .form-group label {
float: left;
margin-bottom: 10px;
width: 100%;
line-height: 100%;
color: #000000 !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 14px !important;
}
#mlb2-8437606 .subscribe-form .form-section .checkbox {
width: 100%;
margin: 0px 0px 10px 0px;
}
#mlb2-8437606 .subscribe-form .form-section .checkbox label {
color: #000000 !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 14px !important;
}
#mlb2-8437606 .subscribe-form .form-section .checkbox input {
margin: 0px 5px 0px 0px;
}
#mlb2-8437606 .subscribe-form .form-section .checkbox input[type=checkbox] {
-webkit-appearance: checkbox;
opacity: 1;
}
#mlb2-8437606.ml-subscribe-form .form-group .form-control {
width: 100%;
font-size: 13px;
padding: 10px 10px;
height: auto;
font-family: Arial;
border-radius: 0px;
border: 1px solid #cccccc !important;
color: #000000 !important;
background-color: #FFFFFF !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: left;
}
#mlb2-8437606.ml-subscribe-form button {
border: none !important;
cursor: pointer !important;
width: 100% !important;
border-radius: 0px !important;
height: 40px !important;
background-color: #000000 !important;
color: #FFFFFF !important;
font-family: 'Arial', sans-serif !important;
font-size: 16px !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
position: relative!important;
}
#mlb2-8437606.ml-subscribe-form button.gradient-on {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
#mlb2-8437606.ml-subscribe-form button.gradient-on:hover {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}
#mlb2-8437606.ml-subscribe-form button[disabled] {
cursor: not-allowed!important;
}
#mlb2-8437606.ml-subscribe-form .form-section.ml-error label {
color: red!important;
}
#mlb2-8437606.ml-subscribe-form .form-group.ml-error label {
color: red!important;
}
#mlb2-8437606.ml-subscribe-form .form-group.ml-error .form-control {
border-color: red!important;
}
@media (max-width: 768px) {
#mlb2-8437606 {
width: 100% !important;
}
#mlb2-8437606 form.ml-block-form,
#mlb2-8437606.ml-subscribe-form .subscribe-form {
width: 100% !important;
}
}
</style>
<div id="mlb2-8437606" class="ml-subscribe-form ml-subscribe-form-8437606">
<div class="ml-vertical-align-center">
<div class="subscribe-form ml-block-success" style="display:none">
<div class="form-section">
<h4>Newsletter</h4>
<p>Thank you! You have successfully subscribed to our newsletter.</p>
</div>
</div>
<form class="ml-block-form" action="https://landing.mailerlite.com/webforms/submit/u4e3o5" data-id="839046" data-code="u4e3o5" method="POST" target="_blank">
<div class="subscribe-form">
<div class="form-section mb10">
<h4>Newsletter</h4>
<p>Signup for news and special offers!</p>
</div>
<div class="form-section">
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
<input type="email" name="fields[email]" class="form-control" placeholder="Email*" value="" autocomplete="email" x-autocompletetype="email" spellcheck="false" autocapitalize="off" autocorrect="off">
</div>
</div>
<input type="hidden" name="ml-submit" value="1" />
<button type="submit" class="primary">
Subscribe
</button>
<button disabled="disabled" style="display: none;" type="button" class="loading">
</button>
</div>
</form>
<script>
function ml_webform_success_8437606() {
var $ = ml_jQuery || jQuery;
$('.ml-subscribe-form-8437606 .ml-block-success').show();
$('.ml-subscribe-form-8437606 .ml-block-form').hide();
};
</script>
</div>
</div>
<script type="text/javascript" src="https://static.mailerlite.com/js/w/webforms.min.js?v3772b61f1ec61c541c401d4eadfdd02f"></script>
Any idea ?
Hello Totelae,
Please make sure that you have the right code provide from Mailer Lite according to the following documentation from here -> https://help.mailerlite.com/article/show/33701-embed- form-editor Contact the stuff, tell the problem because they should be able to provide a more accurate response. Most likely, the code is not valid.
Thanks for your understanding!
I am sure that I have the right code because I used it on a blank page, with the classical editor (no tagDiv composer, no WP Bakery) and the form worked well. That’s why I’m thinking that the problem comes from the element “Newsletter” of tagDiv composer…
Hello Totelae,
It seems that Mailer Lite have changed some things through their structure and that’s why the code does not work. You should make the following change at the code to bring good results -> https://www.screencast.com/t/6TpeaNf5p (replace the ‘app’ with ‘landing’)
Thanks for your understanding!
Thank you Catalin, it works perfectly. I replaced “app” with “landing” in all files from wp-content/plugins/td-newsletter/styles/tds_newsletter folder.
Hello Totelae,
I am glad to hear this.
Thanks.
