When you click submit on our modified form, it redirects the visitor to the Mail Chimp site. But, we can also recreate Mail Chimp's Ajax form submission without j Query for a better user experience.The first thing we want to do is prevent the form from submitting via a page reload like it normally would.This code can be on the server and called on AJAX when user tabs out of the email field.The entire check will take less than 2 seconds to run and you can make sure that the email is correct.While our message will be easily spotted by sighted users, people using assistive technology like screen readers may not inherently know a message has been added to the DOM.We'll use Java Script to bring our message into focus.
This file is 140kb (minified), and includes the entire j Query library, two third-party plugins, and some custom Mail Chimp code. See the Pen Form Validation: The Mail Chimp Standard Signup Form by Chris Ferdinandi (@cferdinandi) on Code Pen.
In order to do so, we'll also need to add a There's a good chance this will add a blue outline to our status message. That's 15.5× smaller than the version Mail Chimp provides.
This is a really important accessibility feature for links, buttons, and other naturally focusable content areas, but it's not necessary for our message. We now have a lightweight, dependency-free script that validates our Mail Chimp form and submits it asynchronously.
First, let's grab a Mail Chimp form without any of the bloat.
In Mail Chimp, where you get the code for your embeddable form, click on the tab labelled "Naked." This version includes none of the Mail Chimp CSS or Java Script.