Thank Your Users By Name On Form Submit

Use this code to personally thank your visitors by name when they submit a form.

Copy Code

<script>
document.addEventListener('DOMContentLoaded', function () {
  // declarations
  const formSelector = '[data-form-element="form"]';
  const nameInputSelector = '[data-form-element="name-input"]';
  const messageSelector = '[data-form-element="success-message"]';
  const form = document.querySelector(formSelector);

  // fail-safe
  if (!form) return;
  const nameInput = form.querySelector(nameInputSelector);
  const messageDiv = document.querySelector(messageSelector);

  if (!nameInput || !messageDiv) return;

  // form is submitted
  nameInput.addEventListener('input', function () {
    const nameValue = nameInput.value;

    if (nameValue && nameValue !== '') {
      // Use innerHTML for a line break, use innerText for one line
      messageDiv.innerHTML = `Thank you, ${nameValue}!<br>I'll get back to you soon.`;
    } else {
      messageDiv.innerHTML = `Your submission has been received!<br>I'll get back to you soon.`;
    }
  });
});
</script>

This little snippet is super simple to work with, and can have a powerfully positive effect on a users experience.

Here's what you'll need to do:

First, copy and paste the above code into the page settings of your Webflow project. Before the </body> tag works great.

Next, select your form block in Webflow (or go find your form block in your HTML document if you're doing this by hand), and add this custom data attribute: data-form-element="form"

Then you'll want to go select the appropriate input field (the one where the users are going to be typing their name) and give it this custom attribute: data-form-element="name-input"

Finally you'll want to select your success message (by default in Webflow it should be a plain text block with a class of `success message` or something similar) and give it this attribute: data-form-element="success-message"

So just to recap and keep things closer together:

Form Block: data-form-element="form"
Name Input: data-form-element="name-input"
Success Message: data-form-element="success-message"

That's pretty much it! Publish your project to your .webflow.io staging domain to test it out.

Note: If it's not working, make sure all of your data attributes are free of spelling errors, and that they're directly applied to the elements we specified above.