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>
MuhammadIsa's post in Remove last name field in newsletter form only and change first name field to full name was marked as the answer
