Hi Everyone,
I’m having problems with some custom HTML I’m inserting into my webflow site.
I want to include a mailing list sign-up form from MailerLite.
The form displays correctly on my site: whatgetslinks.webflow.io
However, the form validation doesn’t work, allowing users to submit blank forms.
I’ve tried inserting the MailerLite code in HTML like so:
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext');
#mlb2-3034039,
#mlb2-3034039 *,
#mlb2-3034039 a:hover,
#mlb2-3034039 a:visited,
#mlb2-3034039 a:focus,
#mlb2-3034039 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-3034039 a:hover {
cursor: pointer !important;
}
#mlb2-3034039 h4 {
font-weight: normal;
}
#mlb2-3034039 .subscribe-form {
padding: 20px;
width: 350px !important;
border: 0px solid #F6F6F6 !important;
background: #fafafa none !important;
border-radius: 0px !important;
box-sizing: border-box !important;
}
#mlb2-3034039 .subscribe-form .form-section {
margin-bottom: 20px;
width: 100%;
}
#mlb2-3034039 .subscribe-form .form-section.mb10 {
margin-bottom: 10px;
float: left;
}
#mlb2-3034039 .subscribe-form .form-section.mb0 {
margin-bottom: 0px;
}
#mlb2-3034039 .subscribe-form .form-section h4 {
margin: 0px 0px 10px 0px !important;
padding: 0px !important;
color: #000000 !important;
font-family: 'Lato', sans-serif !important;
font-size: 28px !important;
line-height: 100%;
text-align: left !important;
}
#mlb2-3034039 .subscribe-form .form-section p,
#mlb2-3034039 .subscribe-form .form-section li {
line-height: 150%;
padding: 0px !important;
margin: 0px 0px 10px 0px;
color: #000000 !important;
font-family: 'Lato', sans-serif !important;
font-size: 16px !important;
}
#mlb2-3034039 .subscribe-form .form-section a {
font-size: 16px !important;
}
#mlb2-3034039 .subscribe-form .form-section .confirmation_checkbox {
line-height: 150%;
padding: 0px !important;
margin: 0px 0px 15px 0px !important;
color: #000000 !important;
font-family: 'Lato', sans-serif !important;
font-size: 14px !important;
font-weight: normal !important;
}
#mlb2-3034039 .subscribe-form .form-section .confirmation_checkbox input[type="checkbox"] {
margin-right: 5px !important;
}
#mlb2-3034039 .subscribe-form .form-section .form-group {
margin-bottom: 15px;
}
#mlb2-3034039 .subscribe-form .form-section .form-group label {
float: left;
margin-bottom: 10px;
width: 100%;
line-height: 100%;
font-weight: bold;
color: #000000 !important;
font-family: 'Lato', sans-serif !important;
font-size: 16px !important;
}
#mlb2-3034039 .subscribe-form .form-section .checkbox {
width: 100%;
margin: 0px 0px 10px 0px;
}
#mlb2-3034039 .subscribe-form .form-section .checkbox label {
color: #000000 !important;
font-family: 'Lato', sans-serif !important;
font-size: 16px !important;
}
#mlb2-3034039 .subscribe-form .form-section .checkbox input {
margin: 0px 5px 0px 0px;
}
#mlb2-3034039 .subscribe-form .form-section .checkbox input[type=checkbox] {
-webkit-appearance: checkbox;
}
#mlb2-3034039.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-3034039.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: 'Lato', sans-serif !important;
font-size: 16px !important;
text-align: center !important;
padding: 0 !important;
}
#mlb2-3034039.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-3034039.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-3034039.ml-subscribe-form button[disabled] {
cursor: not-allowed!important;
}
#mlb2-3034039.ml-subscribe-form .form-section.ml-error label {
color: red!important;
}
#mlb2-3034039.ml-subscribe-form .form-group.ml-error label {
color: red!important;
}
#mlb2-3034039.ml-subscribe-form .form-group.ml-error .form-control {
border-color: red!important;
}
@media (max-width: 600px) {
#mlb2-3034039 {
width: 100% !important;
}
#mlb2-3034039 form.ml-block-form,
#mlb2-3034039 .subscribe-form {
width: 100% !important;
}
}
</style>
<div id="mlb2-3034039" class="ml-subscribe-form ml-subscribe-form-3034039">
<div class="ml-vertical-align-center">
<div class="subscribe-form ml-block-success" style="display:none">
<div class="form-section mb0">
<h4></h4>
<p>Thank you! You have successfully subscribed.</p>
</div>
</div>
<form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/y6o2n0" data-id="174547" data-code="y6o2n0" method="POST" target="_blank">
<div class="subscribe-form">
<div class="form-section">
<div class="form-group ml-field-name ml-validate-required">
<input type="text" name="fields[name]" class="form-control" placeholder="Name*" value="">
</div>
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
<input type="text" name="fields[email]" class="form-control" placeholder="Email*" value="">
</div>
<div class="form-group ml-field-company ml-validate-required">
<input type="text" name="fields[company]" class="form-control" placeholder="Company*" value="">
</div>
</div>
<div class="form-section ml-validate-required">
<label class="confirmation_checkbox">
<input type="checkbox"> You're not a robot, right?
</label>
</div>
<input type="hidden" name="ml-submit" value="1" />
<button type="submit" class="primary">
Sign me up!
</button>
<button disabled="disabled" style="display: none;" type="button" class="loading">
<img src="//static.mailerlite.com/images/rolling.gif" width="20" height="20" style="width: 20px; height: 20px;">
</button>
</div>
</form>
<script>
function ml_webform_success_3034039() {
jQuery('.ml-subscribe-form-3034039 .ml-block-success').show();
jQuery('.ml-subscribe-form-3034039 .ml-block-form').hide();
};
</script>
</div>
</div>
<script type="text/javascript" src="//static.mailerlite.com/js/w/webforms.min.js?v86b0a4c660f110085cbf49e83e53be98"></script>
And also just the Javascript version they provide:
<script type="text/javascript" src="//static.mailerlite.com/data/webforms/174547/y6o2n0.js?v12"></script>
Yet neither seems to work.
Does webflow limit certain javascript functions or something?
I’ve spoken to MailerLite and they can’t seem to figure out why it is not working.
I’d really appreciate any help you can provide!!
Thanks,
Jacob