How can I integrate a mailerlite.com signup form with React?

Question

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?

Answer 1

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.

class Landing extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          display_form: true,
          display_success: false,
      };

  // add mailerlite code
  componentDidMount() {
    // success function
    const f = () => {
      this.setState({
        display_form: false,
        display_success: true,
      });
    };
    // register it on the window object
    window[`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,

Answer 2

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.

<section id="signup" className="gradient-gray">
  <div id="mlb2-CODE" className="ml-subscribe-form ml-subscribe-form-CODE">
    <div className="ml-vertical-align-center">
      <div className="subscribe-form ml-block-success" style={{ display: 'none' }}>
        <div className="form-section">
          <p>Thank you, you have successfully subscribed to our announcement list!</p>
        </div>
      </div>
      <form
        className="ml-block-form"
        action="https://landing.mailerlite.com/webforms/submit/CODE"
        data-id="CODE"
        data-code="CODE"
        method="POST"
        target="_blank"
      >
        <p className="signup-title">
          Sign up for our announcement list and we'll let you know when we launch!
        </p>
        <div className="subscribe-form">
          <div className="form-section">
            <div
              className="form-group ml-field-email ml-validate-required ml-validate-email"
            >
              <input
                type="email"
                name="fields[email]"
                className="form-control signup-text"
                placeholder="Email address"
                autoComplete="email"
                spellCheck="false"
                autoCapitalize="off"
                autoCorrect="off"
              />
              <input type="hidden" name="ml-submit" value="1" />
              <button type="submit" className="primary signup-button">
                Subscribe
              </button>
              <button
                disabled
                style={{ display: 'none' }}
                type="button"
                className="loading"
              >
                Submitting...
                {/* <img
                  src="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 -

class Landing extends React.Component {

  // add mailerlite code
  componentDidMount() {
    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 (...);
  }
}