How Can I Integrate A Mailerlite.com Signup Form With React?

Mailerlite.com lets you embed an email signup form in your site - how can you integrate this with React? Specifically, how do you integrate the JavaScript code?

Solution 1:

Here's an example with the HTML form converted to React code - replace all occurrences of CODE with the relevant code from your sample form (there are several different codes). I couldn't get the loading icon to show, so just added some text.

<sectionid="signup"className="gradient-gray"><divid="mlb2-CODE"className="ml-subscribe-form ml-subscribe-form-CODE"><divclassName="ml-vertical-align-center"><divclassName="subscribe-form ml-block-success"style={{display: 'none' }}><divclassName="form-section"><p>Thank you, you have successfully subscribed to our announcement list!</p></div></div><formclassName="ml-block-form"action="https://landing.mailerlite.com/webforms/submit/CODE"data-id="CODE"data-code="CODE"method="POST"target="_blank"
      ><pclassName="signup-title">
          Sign up for our announcement list and we'll let you know when we launch!
        </p><divclassName="subscribe-form"><divclassName="form-section"><divclassName="form-group ml-field-email ml-validate-required ml-validate-email"
            ><inputtype="email"name="fields[email]"className="form-control signup-text"placeholder="Email address"autoComplete="email"spellCheck="false"autoCapitalize="off"autoCorrect="off"
              /><inputtype="hidden"name="ml-submit"value="1" /><buttontype="submit"className="primary signup-button">
                Subscribe
              </button><buttondisabledstyle={{display: 'none' }}
                type="button"className="loading"
              >
                Submitting...
                {/* <imgsrc="https://static.mailerlite.com/images/rolling@2x.gif"alt="loading..."width="20"height="20"style={{width: '20px', height: '20px' }}
                /> */}
              </button></div></div></div></form></div></div></section>

Make your component a class and add the mailerlite JavaScript code in componentDidMount -

classLandingextendsReact.Component {

  // add mailerlite codecomponentDidMount() {
    const js = `
      function ml_webform_success_CODE() {
        var $ = ml_jQuery || jQuery;
        $('.ml-subscribe-form-CODE .ml-block-success').show();
        $('.ml-subscribe-form-CODE .ml-block-form').hide();
      };
    `;
    const script = document.createElement("script");
    const scriptText = document.createTextNode(js);
    script.appendChild(scriptText);
    document.body.appendChild(script);

    const script2 = document.createElement("script");
    script2.src = "https://static.mailerlite.com/js/w/webforms.min.js?CODE";
    document.body.appendChild(script2);
  }

  render() {
    return (...);
  }
}

Solution 2:

You can adapt it to not use an inline generated function for the hiding/displaying of the form section.

You can manage the displaying with the state of you component.

classLandingextendsReact.Component {
  constructor(props) {
      super(props);
      this.state = {
          display_form: true,
          display_success: false,
      };

  // add mailerlite codecomponentDidMount() {
    // success functionconstf = () => {
      this.setState({
        display_form: false,
        display_success: true,
      });
    };
    // register it on the window objectwindow[`ml_webform_success_${CODE}`] = f;

    const script2 = document.createElement("script");
    script2.src = "https://static.mailerlite.com/js/w/webforms.min.js?CODE";
    document.body.appendChild(script2);
  }

  render() {
    return (...);
  }
}

And use the state to display or not the part, this is more Reactish

Regards,