Custom HTML form creating two Submit buttons

  • I am trying to integrate MAB with MailerLite. When I paste the MailerLite HTML code into MAB and then process the code, two Submit buttons are created. Do you intend on adding a direct integration with MailerLite in the future?

    Here is the code:

    MailerLite HTML code
    <style>
    #mlb2-2778289,
    #mlb2-2778289 *,
    #mlb2-2778289 a:hover,
    #mlb2-2778289 a:visited,
    #mlb2-2778289 a:active {
    overflow: visible;
    position: static;
    background: none;
    border: none;
    bottom: auto;
    clear: none;
    cursor: default;
    float: none;
    font-size: medium;
    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;
    }

    #mlb2-2778289 h4 {
    font-weight: normal;
    }

    #mlb2-2778289 .subscribe-form {
    padding: 20px;
    width: 210px !important;
    border: 2px solid #BDC3C7!important;
    background: #FFFFFF none!important;
    -webkit-border-radius: 10px!important;
    -moz-border-radius: 10px!important;
    border-radius: 10px!important;
    }

    #mlb2-2778289 .subscribe-form .form-section {
    /*float: left;*/
    /*width: 100%;*/
    margin-bottom: 20px;
    }

    #mlb2-2778289 .subscribe-form .form-section h4 {
    margin: 0px 0px 15px 0px;
    padding: 0px!important;
    color: #27AE60!important;
    font-family: Arial!important;
    font-size: 20px!important;
    line-height: 100%;
    text-align: !important;
    }

    #mlb2-2778289 .subscribe-form .form-section p {
    line-height: 150%;
    padding: 0px!important;
    margin: 0px 0px 0px 0px;
    color: #000000!important;
    font-family: Arial!important;
    font-size: 13px!important;
    }

    #mlb2-2778289 .subscribe-form .form-section a {
    font-size: 13px!important;
    }

    #mlb2-2778289 .subscribe-form .form-section .confirmation_checkbox {
    line-height: 150%;
    padding: 0px!important;
    margin: 0px 0px 0px 0px;
    margin-bottom: 15px!important;
    color: #000000!important;
    font-family: Arial!important;
    font-size: 12px!important;
    font-weight: normal !important;
    }

    #mlb2-2778289 .subscribe-form .form-section .confirmation_checkbox input[type=”checkbox”] {
    margin-right: 5px!important;
    }

    #mlb2-2778289 .subscribe-form .form-section .form-group {
    margin-bottom: 15px;
    }

    #mlb2-2778289 .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: Arial!important;
    font-size: 13px!important;
    }

    #mlb2-2778289 .subscribe-form .form-section .checkbox {
    width: 100%;
    margin: 0px 0px 10px 0px;
    }

    #mlb2-2778289 .subscribe-form .form-section .checkbox label {
    color: #000000!important;
    font-family: Arial!important;
    font-size: 13px!important;
    }

    #mlb2-2778289 .subscribe-form .form-section .checkbox input {
    margin: 0px 5px 0px 0px;
    }

    #mlb2-2778289.ml-subscribe-form .form-group .form-control {
    width: 100%;
    font-size: 13px;
    padding: 10px 10px;
    height: auto;
    font-family: Arial;
    border-radius: 5px;
    border: 2px solid #BDC3C7!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-2778289.ml-subscribe-form button {
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    border-radius: 5px !important;
    height: 40px !important;
    background-color: #2ECC71!important;
    color: #FFFFFF!important;
    font-family: Arial!important;
    font-size: 16px!important;
    text-align: center !important;
    }

    #mlb2-2778289.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-2778289.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-2778289.ml-subscribe-form button[disabled] {
    cursor: not-allowed!important;
    }

    #mlb2-2778289.ml-subscribe-form .form-section.ml-error label {
    color: red!important;
    }

    #mlb2-2778289.ml-subscribe-form .form-group.ml-error label {
    color: red!important;
    }

    #mlb2-2778289.ml-subscribe-form .form-group.ml-error .form-control {
    border-color: red!important;
    }
    </style>
    <div id=”mlb2-2778289″ class=”ml-subscribe-form ml-subscribe-form-2778289″>
    <div class=”ml-vertical-align-center”>
    <div class=”subscribe-form ml-block-success” style=”display:none”>
    <div class=”form-section”>
    <h4></h4>
    <p></p>
    </div>
    </div>
    <form class=”ml-block-form” action=”//app.mailerlite.com/webforms/submit/k0j9y5″ data-id=”148895″ data-code=”k0j9y5″ method=”POST” target=”_blank”>
    <div class=”subscribe-form”>
    <div class=”form-section”>
    <h4></h4>
    <p></p>
    </div>
    <div class=”form-section”>
    <div class=”form-group ml-field-name ml-validate-required”>
    <input type=”text” name=”fields[name]” class=”form-control” placeholder=”First 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>
    <input type=”hidden” name=”ml-submit” value=”1″ />
    <button type=”submit” class=”primary gradient-on”>
    Give Me Access!
    </button>
    <button disabled=”disabled” style=”display: none;” type=”button” class=”loading gradient-on”>
    <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_2778289() {
    jQuery(‘.ml-subscribe-form-2778289 .ml-block-success’).show();
    jQuery(‘.ml-subscribe-form-2778289 .ml-block-form’).hide();
    };
    </script>
    </div>
    </div>
    <script type=”text/javascript” src=”//static.mailerlite.com/js/w/webforms.min.js?vcdf1983d82010d03e3d306109f0470df”></script>

    MAB Processed Opt In Form Code:
    <form action=”//app.mailerlite.com/webforms/submit/k0j9y5″ data-id=”148895″ data-code=”k0j9y5″ method=”POST”>
    <div class=”mab-field”>
    <input type=”text” name=”fields[name]” placeholder=”First Name*” />
    </div>
    <div class=”mab-field”>
    <input type=”text” name=”fields[email]” placeholder=”Email*” />
    </div>
    <input type=”hidden” name=”ml-submit” value=”1″ />
    <div class=”mab-field”>
    <input type=”submit” class=”mab-optin-submit” value=”Submit” />
    </div>
    <div class=”mab-field”>
    <input type=”submit” class=”mab-optin-submit” value=”Submit” />
    </div>
    <div class=”clear”></div>
    </form>

    https://www.ads-software.com/plugins/magic-action-box/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter BrownEyesTFC

    (@browneyestfc)

    I posted this about four or five days ago and the date was changed by someone so it looks like this is a new post. Is there a fix for the issue I’m having with the code?

    Plugin Author Ryann Micua

    (@pogidude)

    Hi @browneyestfc,

    sorry for the late reply. Anyhow, you just need to remove the 2nd submit button from the processed form code.

    This is the processed form code with the second button removed:

    <form action="//app.mailerlite.com/webforms/submit/k0j9y5" data-id="148895" data-code="k0j9y5" method="POST">
<div class="mab-field">
<input type="text" name="fields[name]" placeholder="First Name*" />
</div>
<div class="mab-field">
<input type="text" name="fields[email]" placeholder="Email*" />
</div>
<input type="hidden" name="ml-submit" value="1" />
<div class="mab-field">
<input type="submit" class="mab-optin-submit" value="Submit" />
</div>
<div class="clear"></div>
</form>
    Thread Starter BrownEyesTFC

    (@browneyestfc)

    The text for the submit button that I created in MailerLite is not displaying as the button text in the MAB form. The button text should say Give Me Access! but instead the button says Submit. Can I change this manually in the Processed Opt In Form Code?

    Plugin Author Ryann Micua

    (@pogidude)

    Yes you can.

    There is also a field for changing the submit button text right above the Process Code button. You will have to do this before processing the code.

    Or, like you said, just change the button text manually in the processed opt in form code field.

    Somewhere at the bottom of the processed code, you should see this:

    <input type="submit" class="mab-optin-submit" value="Submit" />

    Change the text inside the value attribute like this:

    <input type="submit" class="mab-optin-submit" value="Give Me Access!" />

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom HTML form creating two Submit buttons’ is closed to new replies.