18 March 2021

Dynamically Changing a Netlify Form Name

Netlify forms are easy to use because they are simple in scope. Add a little power with this cool trick.

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:

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:

  1. The second form is hidden. Netlify will still know it's a form that can be submitted on the site.
  2. 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

Thanks for taking the time to read this!

If you enjoyed it, and think others would benefit from the read then feel free to share it on Twitter (or elsewhere). I’m always up for a discussion about anything I’ve written too, so get in touch if you want to chat!

If you’ve spotted something out of place or something needs correcting, feel free to let me know.

A newer entry How to Install Node.js and NPM on Mac

8 January 2022 Install Node.js and NPM on Mac, using the Homebrew package manager. This simple tutorial walks you through all the necessary steps.

An older entry What you need to know about Netlify Forms

21 December 2020 Netlify forms are an incredibly powerful feature. They enable you to accept dynamically-driven user data on your static site. But you must understand a few key concepts about Netlify forms if you're going to have success working with them.