Newsletter Block: Hide the Last Name Field

Here's a quick and easy javascript code that you may use to remove the last name field in Squarespace's newsletter block. I hope you find it helpful. This solutions works with both Squarespace 7.0 and Squarespace 7.1

---

First Step: Add the JQUERY Library

The JQUERY Library is the most popular JQUERY Library. If you are using other plugins , it is likely that you’ve added this library already. Please make sure to just reference this one in your Code Injection.

Paste this code under Settings>Advanced>Code Injection>Footer

Ideally in the first line

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Second Step: Add the script that hides the last name field

Paste this code under Settings>Advanced>Code Injection>Footer

Please note that the last name will still be recorded in the backed but it will have the value “-”.

IMPORTANT:

This will also alter the last name fields in other forms across the site. I suggest using a simple text field if you wish to collect both first name and last name in contact forms.

<script>
 const lnames = document.querySelectorAll('.last-name input')
   const lnameFields = document.querySelectorAll('.last-name')
  $(document).ready(function(){

     lnames.forEach(lname => {
   lname.value = "-"
  })

     lnameFields.forEach(lnameField => {
     lnameField.style.display = "none"
  })
      
     
 });
</script>

Join the mailing list to stay in the know and check out our quick courses on CSS hacks and stylish sections.

Easily Create this Split Scrolling section in Squarespace