MailerLite Form Validation Issues

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

Can anybody help?

I’m really struggling to get this working!

Hi @JacobPlumb, thanks for creating the post on the mailerlite integration. Could you also help to provide the read-only link to the site? Share a read-only link | Webflow University

Thanks in advance!

Hi @cyberdave!

Thanks so much for your help - I really do appreciate it.

The read-only link: https://preview.webflow.com/preview/whatgetslinks?preview=91a174f66f0cd48c83d72987769f9705

Hi @cyberdave!

Have you had an opportunity to look at this yet?

Thanks

I’m quite disappointed with the lack of support here to be honest.

I feel like MailerLite is a fairly important integration and I surely won’t be the only person to have problems with this.

1 Like

Hi @JacobPlumb, thanks for getting back to me.

As a quick note, Webflow Support does not provide support for third party services code, like mailerlite, but we do our best to help with custom code things as quickly as possible.

See our statement of support here: Customer Support Policy

If I understood the issue correctly, you were trying to submit a form, and have the validation not allow you to submit blank forms.

I took a look at the code you pasted, and it seems to work for me on a test site:

See here: http://mailerlite-example.webflow.io

Here is the read-only link: https://preview.webflow.com/preview/mailerlite-example?preview=c92cddf3b3d3fe556474e79feb1fa7af

If you need this site sent to you, send me a private message (click on my avatar and click the message button).

Thanks in advance!

Did someone find the perfect workflow for having webflow form sending data to mailerlite properly?

Without using third party integrators like Zapier.