Formspree is a great solution for adding forms to static sites. It’s super simple, it’s free and it works.
At its most simple it’s just a case of setting your form action so that your data gets POST-ed to Formspree. Here’s the basic example given on the FormSpree site:
Add this to your page and change email@example.com to (yes) your email. Then send a test submission which will result in a confirmation email being sent to prevent spam. Once you confirm this you’re good to go.
You can add fields to this basic example to you heart’s content. Each field will appear in the resulting emails like so:
Controlling what happens upon submission
There are three options covered on the Formspree site:
- Send the user to the default thanks page
- Send the user to an alternate URL
- Use AJAX (and essentially do whatever you like)
Send the user to the default thanks page
This is the default option and what will happen if you use the example code given above. It’s not the worst solution in the world, but a) it provides an inconsistent experience for the user in terms of branding and b) the thanks page is a deadend – users are going to have to hit ‘back’ if they’re to return to your site.
Provide an alternate URL
Adding a hidden field with the name ‘_next’ lets us send the user where we want:
This allows you to use an acknowledgement page within your own site, a nice step-up in consistency. In instances where the form is the main focus of the page it’ll probably feel like the right solution, but when the form appers in a sidebar or an overlay, loading a new page will still feel heavyhanded and interupt the user’s experience.
Use AJAX to make the submission
Using AJAX is referenced on the Formspree site, but the example given is only really included to highlight the need to set
dataType:"json" to avoid running into same-origin policy issues:
Clearly there are some missing steps here, which shouldn’t be too difficult to spot:
- The form data needs serialising into a JSON string
- We need to get the response from the server and do something – e.g. show a message depending on success/failure
Following these steps we end up with something like:
When I came to implement a Formspree form on a Jekyll blog, I reached the step above but had already decided not to use jQuery on the site.
The advantage of skipping jQuery for me was to keep things fast and simple – the site was a basic blog and I felt that adding jQuery shouldn’t be necessary.
Handling browser inconsistencies
This is the area where jQuery shines so it’s an important thing to consider when you’re considering going alone. This really needs to be handled on a case by case basis, but the solution here really is simple – we can wrap our code in a conditional statement checking support for what we need, and if there’s any issue here the form will fallback to its basic POST implementation. You can view the use of AJAX as progressive enhancement or the fallback to POST as graceful degradation, it really doesn’t matter here.
The thing we’re going to check for is the FormData interface. It makes things very easy, but it’s not supported in IE 9 or below.
While checking for FormData support, we’ll also check that there’s a form in the document’s forms collection. Note that
document.forms is only looking for the first instance of a form – you’ll need to adapt this if you’re likely to have more than one form on a page.
Really this can be split into three simple parts:
- Some simple assignments (defining the status messages and creating a container for them)
- Creating a new instance of XMLHttpRequest, specifying the type of request with its
- Listening for the submit event and then:
- Preventing the default submission
- Attaching the container we created earlier for our status messages
- Grabbbing the data from our form with the FormData object
– Sending the data with the XMLHttpRequest’s
- Listening for the response with the
.onreadystatechangemethod and displaying the relevant status message accordingly.
The full code
In the image below you can see the filled out form on the left, and the response displayed if submission is successful on the right.
- You might not need jQuery offers up lots of code examples for solving problems without jQuery