Adding Name field to Form Submission Success Message

[tuanphan]

To add Name field to Form Submission Success Message in Squarespace like this. You can follow these.

#1. Make sure you added Name Fields

#2. Make sure you added text to Success Message

#3. Hover on Page where you use Form Block > Click Gear icon

#4. Click Advanced > Paste this code

<script>
(function() {
  const NAME_KEY = 'sqs_form_name';

  document.addEventListener('input', function(e) {
    const form = e.target.closest('form');
    if (form) {
      const fname = form.querySelector('input[name="fname"]')?.value || '';
      const lname = form.querySelector('input[name="lname"]')?.value || '';
      if (fname || lname) {
        sessionStorage.setItem(NAME_KEY, (fname + ' ' + lname).trim());
      }
    }
  }, true);

  function injectName() {
    const storedName = sessionStorage.getItem(NAME_KEY);
    if (!storedName) return;

    const selectors = [
      '.form-submission-text p',
      '.sqs-form-block-submission-html p',
      '.form-submission-html p'
    ];

    selectors.forEach(selector => {
      const elements = document.querySelectorAll(selector);
      elements.forEach(el => {
        const text = el.innerText.trim();
        if (text.toLowerCase().includes('thank you') && !el.dataset.named) {
          el.innerText = 'Thank you ' + storedName + '!';
          el.dataset.named = 'true';
          setTimeout(() => sessionStorage.removeItem(NAME_KEY), 3000);
        }
      });
    });
  }

  setInterval(injectName, 100);
})();
</script>

#5. If you need to add other fields to Success Message, you can use this AI Tool, It can help you tweak this on your Squarespace site.

#6. If you don’t want to use complex code, you can use this Contact Form tool, then just enter format like this.

Thank you [first_name] [last_name]