SFMC Forms

newsletter.php

<?php
/**
 * Newsletter
 *
 * @package WordPress
 * @subpackage lf-theme
 * @since 1.0.0
 */

?>
<section class="newsletter" id="newsletter">
	<h3>Subscribe to the LFPH newsletter to receive regular updates about
		webinars, events & latest news</h3>

<!-- new class on form -->
	<form id="sfmc-form1" class="newsletter-form recaptcha-form"
		action="https://cloud.email.thelinuxfoundation.org/LFPH-Newsletter-Form-Submission">
		<label for="FirstName" >
			<span class="screen-reader-text">First Name</span>
			<input type="text" id="FirstName" name="FirstName"
				placeholder="First Name" autocomplete="given-name"
				spellcheck="false" >
		</label>
		<label for="LastName" >
			<span class="screen-reader-text">Last Name</span>
			<input type="text" id="LastName" name="LastName"
				placeholder="Last Name" autocomplete="family-name"
				spellcheck="false" >
		</label>
		<label for="Organization">
			<span class="screen-reader-text">Organization</span>
			<input type="text" id="Organization" name="Organization"
				placeholder="Organization"
				autcomplete="org"
				spellcheck="false">
		</label>
		<label for="EmailAddress" required>
			<span class="screen-reader-text">Email Address</span>
			<input type="email" id="EmailAddress" name="EmailAddress"
				placeholder="Email Address" autocomplete="email"
				spellcheck="false" required>
		</label>
    <!-- new class on button -->
		<button type="submit" class="sfmc-submit button"
			id="sfmc-submit1">Subscribe</button>
<!-- new class on recapctcha holder-->
		<div class="recaptcha-holder" style="display:none;"></div>
	</form>
<!-- new class for message holder -->
	<div id="sfmc-message1" class="form-message"></div>
	<p class="privacy-agreement">By submitting this form, you acknowledge that
		your
		information is subject to The Linux Foundation’s <a
			href="https://www.linuxfoundation.org/privacy/"
			rel="noopener" class="external is-white"
			target="_blank">Privacy Policy</a>.</p>
</section>

sfmc-forms.js

jQuery( document ).ready(
	function( $ ) {
		let renderInvisibleReCaptcha = function() {
			// count all the forms on the page.
			for ( let i = 0; i < document.forms.length; ++i ) {
				let form = document.forms[ i ];
				let holder = form.querySelector( '.recaptcha-holder' );
				if ( null === holder ) {
					continue;
				}
				holder.innerHTML = '';

				( function( frm ) {
					let submitElement = frm.querySelector( '.sfmc-submit' );
					let formAction = frm.getAttribute( 'action' );
					let messageSpace = frm.nextElementSibling;
					let holderId = grecaptcha.render( holder, {
						sitekey: '6LcOQ_wUAAAAAHQhy1jOTvWzRuwdKDhp83-9eq6E',
						size: 'invisible',
						badge: 'inline',
						callback( recaptchaToken ) {
							return new Promise( function( resolve, reject ) {
								if ( grecaptcha === undefined ) {
									// alert( 'Recaptcha not defined' );
									reject();
								}

								let response = grecaptcha.getResponse();

								if ( ! response ) {
									// alert( 'Coud not get recaptcha response' );
									reject();
								}

								let formData = serialize( frm );

								$.ajax( {
									type: 'POST',
									url: formAction,
									data: formData,
									beforeSend() {
										frm.style.display = 'none';
										messageSpace.classList.add( 'is-active' );
										messageSpace.textContent = 'Thank you for your submission. Your request is being processed...';
									},
									success( data ) {
										let msg = $( data ).find( 'p' ).text();
										messageSpace.classList.add( 'success' );
										messageSpace.textContent = msg;
										messageSpace.scrollIntoView( { behavior: 'smooth', block: 'center' } );
										resolve();
										grecaptcha.reset( holderId );
									},
									error( request, error ) {
										messageSpace.classList.add( 'error' );
										messageSpace.scrollIntoView( { behavior: 'smooth', block: 'center' } );
										messageSpace.textContent = 'There was an error processing your submission. Please try again or contact us directly at [email protected]';
										reject();
										grecaptcha.reset( holderId );
									},
                }
                );
								// need this?
								// grecaptcha.reset();
								// reject();
							} );
						},
						'expired-callback'( error ) {
							// Captcha expired action.
							messageSpace.classList.add( 'error' );
							messageSpace.textContent = 'The captcha image has expired. Please try again. ' + error + '';
							grecaptcha.reset( holderId );
						},
					} );

					// On Click submit event.
					if ( null !== submitElement ) {
						jQuery( submitElement ).off( 'click' ).on( 'click', function( theClick ) {
							theClick.preventDefault();
							// check all form fields are valid.
							if ( frm.checkValidity() ) {
								// submit to recaptcha.
								grecaptcha.execute( holderId );
							} else {
								frm.reportValidity();
							}
						} );
					}
					// in case jQuery not able to get submit element.
					else {
						frm.onsubmit = function( e ) {
							e.preventDefault();
							// submit to recaptcha.
							grecaptcha.execute( holderId );
						};
					}
				}( form ) );
			}
		};
		window.renderInvisibleReCaptcha = renderInvisibleReCaptcha;
	} );

/*!
 * Serialize all form data into a query string
 * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {Node}   form The form to serialize
 * @return {String}      The serialized form data
 */
var serialize = function( form ) {
	// Setup our serialized data
	let serialized = [];

	// Loop through each field in the form
	for ( let i = 0; i < form.elements.length; i++ ) {
		let field = form.elements[ i ];

		// Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields
		if ( ! field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button' ) {
			continue;
		}

		// If a multi-select, get all selections
		if ( field.type === 'select-multiple' ) {
			for ( let n = 0; n < field.options.length; n++ ) {
				if ( ! field.options[ n ].selected ) {
					continue;
				}
				serialized.push( encodeURIComponent( field.name ) + '=' + encodeURIComponent( field.options[ n ].value ) );
			}
		}

		// Convert field data to a query string
		else if ( ( field.type !== 'checkbox' && field.type !== 'radio' ) || field.checked ) {
			serialized.push( encodeURIComponent( field.name ) + '=' + encodeURIComponent( field.value ) );
		}
	}

	return serialized.join( '&' );
};