Streaming live at 10am (PST)

MailerLite Form Validation Issues


#1

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


#2

Can anybody help?

I'm really struggling to get this working!


#3

Hi @JacobPlumb, thanks for creating the post on the mailerlite integration. Could you also help to provide the read-only link to the site? http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance!


#4

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


#5

Hi @cyberdave!

Have you had an opportunity to look at this yet?

Thanks


#6

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.


#7

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: http://help.webflow.com/faq/statement-of-support

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!