JavaScript events

Re:Maily’s front-end script fires events on the <form> element. They bubble, so listen on document. Each has event.detail with id (the form’s post ID), form and response (the server’s reply, when there is one).

Event	When
remaily:submit	Before sending. Call event.preventDefault() to stop it.
remaily:sent	After any reply
remaily:success	The message went through
remaily:invalid	Some fields need fixing
remaily:failed	The mail couldn’t be sent
remaily:spam	The message was caught as spam
remaily:aborted	A hook on the server stopped the message
remaily:payment	The fields are fine and a Stripe or PayPal payment comes first. The payment box opens; once paid, the form is sent again.
remaily:reset	The form was cleared, after sending or by a reset button
remaily:ready	The form is set up and ready to use, once per form

document.addEventListener( 'remaily:success', ( event ) => {
    console.log( 'Form', event.detail.id, 'sent' );
} );

Forms added later

Forms loaded into a popup or by AJAX after the page loads need one call to start working:

window.remaily.init( popupElement );

A step before sending

Push an async function to window.remaily.beforeSend. Re:Maily waits for it before sending, which is how the reCAPTCHA token is fetched.

window.remaily.beforeSend.push( async ( form ) => {
    // await something, then let the form go
} );

Check part of a form

window.remaily.check( element ) checks the fields inside an element of a form, such as one step of a multi-step form. It shows their errors, moves the focus to the first one and returns true when all of them pass. Pass the form to check all of it.

nextButton.addEventListener( 'click', () => {
    if ( window.remaily.check( currentStep ) ) {
        showNextStep();
    }
} );

Your own check

Push a function to window.remaily.checks to check fields the browser can’t, such as a signature. It gets each field’s wrapper (data-remaily-field, data-remaily-type) and returns '' when the field is fine, or a message: a key from the Messages tab, or your own text. It runs when the form is sent and while the visitor fixes a field. Check the same thing on the server with remaily_validate_{type}.

window.remaily.checks.push( ( wrap ) => {
    if ( wrap.dataset.remailyType !== 'signature' ) {
        return '';
    }

    return wrap.querySelector( 'input' ).value ? '' : 'Please sign the form.';
} );