Remove last name field in newsletter form only and change first name field to full name

Hey,

I have a solution for this now:

Add to Code Injection --> Footer

<script>
document.addEventListener('DOMContentLoaded', function() {
  const newsletterForm = document.querySelector('.newsletter-form-body');
  const lnames = document.querySelectorAll('.last-name input');
  const lnameFields = document.querySelectorAll('.last-name');

  if (newsletterForm) {
    // Create the full name input field
    const fullNameInput = document.createElement('input');
    fullNameInput.className = 'newsletter-form-field-element field-element field-control';
    fullNameInput.name = 'fullname';
    fullNameInput.type = 'text';
    fullNameInput.spellcheck = 'false';
    fullNameInput.placeholder = 'Full Name';
    fullNameInput.maxLength = 60;
    fullNameInput.required = true;

    // Create the wrapper div for the full name input
    const fullNameWrapper = document.createElement('div');
    fullNameWrapper.className = 'newsletter-form-field-wrapper form-item fields name required';
    fullNameWrapper.style.verticalAlign = 'bottom';

    // Create the label for the full name input
    const fullNameLabel = document.createElement('label');
    fullNameLabel.className = 'newsletter-form-field-label title';
    fullNameLabel.textContent = 'Full Name';

    // Append the label and input to the wrapper div
    fullNameWrapper.appendChild(fullNameLabel);
    fullNameWrapper.appendChild(fullNameInput);

    // Find the existing first name and last name fields
    const firstNameField = newsletterForm.querySelector('.newsletter-form-field-wrapper.field.first-name');
    const lastNameField = newsletterForm.querySelector('.newsletter-form-field-wrapper.field.last-name');

    // Replace the first name field with the full name field
    if (firstNameField) {
      firstNameField.parentNode.replaceChild(fullNameWrapper, firstNameField);
    }

    // Hide the last name field and set its default value
    lnames.forEach(lname => {
      lname.value = "-";
    });
    lnameFields.forEach(lnameField => {
      lnameField.style.display = "none";
    });

    // Handle form submission
    newsletterForm.addEventListener('submit', function(event) {
      const fullName = fullNameInput.value.trim();

      if (!fullName) {
        event.preventDefault();
        alert('Please enter your full name.');
        return;
      }

      // Split the full name into first name and last name
      const nameParts = fullName.split(' ');
      const firstName = nameParts[0];
      const lastName = nameParts.slice(1).join(' ') || '-';

      // Create hidden inputs for first name and last name if not already present
      let firstNameHiddenInput = newsletterForm.querySelector('input[name="fname"]');
      let lastNameHiddenInput = newsletterForm.querySelector('input[name="lname"]');

      if (!firstNameHiddenInput) {
        firstNameHiddenInput = document.createElement('input');
        firstNameHiddenInput.type = 'hidden';
        firstNameHiddenInput.name = 'fname';
        newsletterForm.appendChild(firstNameHiddenInput);
      }

      if (!lastNameHiddenInput) {
        lastNameHiddenInput = document.createElement('input');
        lastNameHiddenInput.type = 'hidden';
        lastNameHiddenInput.name = 'lname';
        lastNameHiddenInput.value = '-';  // Set a default value for last name
        newsletterForm.appendChild(lastNameHiddenInput);
      }

      firstNameHiddenInput.value = firstName;
      lastNameHiddenInput.value = lastName;
    });
  }
});
</script>