Netlify Forms are super cool. They are built to be simple and easy to use. But sometimes we need more than a handful of static fields on our form. Sometimes we require a bit of interactivity to add some power to these forms.
What if (for whatever reason) you wanted the data from the form to be saved as two separate forms, depending on some input by the user?
Well, I've found that you can do that on the fly with just a little JavaScript.
Understanding the form-name
Attribute ¶
In my Netlify Forms Intro Guide, I mentioned that the form-name
attribute that comes along with the data submitted to Netlify is extremely important. It’s what tells Netlify where to put your submission, which can determine additional behavior, such as email notifications.
You'll notice that if you're working with a truly static site — whether plain HTML, or using a static site generator like Eleventy that outputs static HTML — Netlify performs some magic for you.
Let's say you publish an HTML page with a form that looks like this:
<form name="My Form" netlify><!-- ... ---></form>
If you then look at the deployed site, the markup is actually a little different. It'll look something like this:
<form name="My Form">
<input type="hidden" name="form-name" value="My Form" />
<!-- ... --->
</form>
During the build, Netlify reads your form name and builds a field that gets submitted along with the rest of your field data.
That means you could change the value
attribute of the form-name
field and, voila! You'd be submitting the data to a different form, right!?
WAIT! GOTCHA! ¶
Well ... sort of.
Netlify must know about the form after your site is built. In other words, you technically need to render a form with a name
attribute for every form you want to submit on the site.
But there are ways to be clever about that. You could hide the forms. You could put them on a page that no one ever sees. It doesn't really matter, they just have to be somewhere on the site so Netlify can process them. And that form must include all the fields you want to accept for it.
These are security measures Netlify puts in place to ensure proper content is being submitted as form entries.
If you just make up a value for form-name
on the fly, Netlify is not going to store the data. It'll ignore the submission with the assumption that you're trying to do something suspicious.
Dynamically Changing the form-name
Field ¶
Let’s say that we have a simple contact form with three fields:
subject
email
message
If subject
is set to Sales
then I want to save the submission in a "Contact-Sales" form in Netlify. Otherwise, I want the form to be submitted to a "Contact-Other" form.
The HTML Markup ¶
Remember, we technically need a form for both options. So our HTML code may look something like this:
<form name="Contact-Sales" method="POST" netlify>
<select name="subject" required>
<option value="Sales">Sales</option>
<option value="Other">Other</option>
</select>
<input type="email" name="email" required />
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>
<form name="Contact-Other" method="POST" netlify style="display: none;">
<select name="subject" required>
<option value="Sales">Sales</option>
<option value="Other">Other</option>
</select>
<input type="email" name="email" required />
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>
note
Two important notes from this code:
- The second form is hidden. Netlify will still know it's a form that can be submitted on the site.
- The form fields are duplicated within the hidden form. This seems verbose (and it is), but it's another protection Netlify puts in place. You must show all the fields available for each variation of the form.
The JavaScript ¶
To add the interactivity, we just need a little JavaScript. In the simplest example, we can assume the form has a id
attribute of conditional-form
.
Then we could write a function (changeFormName
) that fires when the subject field changes (we'll come back to that). The JS code might look something like this:
function changeFormName(event) {
// Get the value of the subject field.
var value = event.target.value;
// Build the name we're to use for form-name field.
var name = `Contact-${value}`;
// Find the form object.
var form = document.querySelector("#conditional-form");
// Set the name attribute on it (just to be safe).
form.setAttribute("name", name);
// Then find the form-name field and set its value.
document
.querySelector('#conditional-form [name="form-name"]')
.setAttribute("value", name);
}
Add Event Listener to Subject Field ¶
Back in our HTML, we could add our event listener to the subject
field. Let's listen for an onchange
event:
<select name="subject" required onchange="changeFormName(event)"></select>
Putting This into Practice ¶
Note that this is a quick and dirty solution. I do not recommend using onchange
attributes and global functions in a static context. This is just to demonstrate the foundation. The potential for where you take this is up to you!
What cool and interactive things are you doing with Netlify forms? Where do you plan to take what you learned here? Let's talk