Splitting the Name input field in a subscriber form

Hi

I'm hoping this is possible. I've done a bit of searching but can't find anything that refers to it.

So I need to be able to get subscribers to enter a separate Name and Lastname in the subscription form added to the website. Currently it seems that everything is added to the Name variable. The reason I need to do this is the client wants to be able to send emails that specify the Name and Surname in the To: field of the email. So unfortunately personalisation will not work in this case as there seems to be no way to edit the To: field.

The reason I need it split is that without 2 individual input fields for both Name and Lastname the client may only add  their first name and not their surname.

Is there anyway to do this?

Thanks in advance for any help.

Cheers

dedra dedra, 4 years ago

Hi lettie16,

as CM functionality in subscribers lists exist field "Name", which identified for campaign personalization as:

1) "fullname" - all field "Name", used as alias in "To:" mail message field
2) "firstname" - as name suggest, it's a first name from "Name" field, "Name"
3) "lastname" - as name suggest, it's a last name from "Name" field, "Surname"

Sure, most subscribers lists use "Lastname Firstname" form. Then if you have this form and you can personalize your campaign, you must remember about switch "firstname" and "lastname" fields.

When you need to enter subscribers name as a separate Name (firstname) and Surname (lastname), then simply prepare your site script and form to this, but before you send (POST) your form to CM subscribers list, prepare from these two fields only one field "Name" (simply concatenate two strings with space) and then send all needed fields with POST method to CM.

roshodgekiss roshodgekiss, 4 years ago

Hi lettie16, dedra is on the right track. Just to save you a little effort, here's a sample of the code that you'd use to validate, then combine a First Name and Last Name field into Name prior to submitting the subscribe form:

<script language="javascript" type="text/javascript">

function concatNames() {

  concatForm = document.forms['subForm'];

  var firstname = concatForm.elements['cm-firstname'].value;
  var lastname = concatForm.elements['cm-lastname'].value;
  var email = concatForm.elements['cm-iyilii-iyilii'].value;
  
  var fullname = firstname + ' ' + lastname;
  
  var error_message = 'Form fields must not be empty';
  
  var error_flag = false;

  if(firstname == '' || lastname == '' || email == '') {
      error_flag = true;
  }

  if(error_flag) {
      alert(error_message);
      return false;
  } else {
      concatForm.elements['cm-name'].value = fullname;
      return true;
  }

}
</script>

<!-- Edit form below so it submits to your list -->

<form action="http://xxxyyy.createsend.com/t/xxx" method="post" id="subForm" onSubmit="return concatNames()">
<div>
<label for="cm-firstname">First Name:</label><br /><input type="text" name="cm-firstname"/><br />
<label for="cm-lastname">Last Name:</label><br /><input type="text" name="cm-lastname" /><br />
<div style="display: none;"><label for="name">Name:</label><br /><input type="text" name="cm-name" /><br /></div>
<label for="iyilii-iyilii">Email:</label><br /><input type="text" name="cm-iyilii-iyilii" id="iyilii-iyilii" /><br />

<input type="submit" value="Subscribe" />
</div>
</form>

Hope this helps!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Swinburne, 4 years ago

Hey all,

Roshodgekiss' solution works great, although every once in a blue moon we have a user who does not have javascript enabled, in which case we get no information coming through for the firstname or lastname fields. At the very least we can capture their first names without javascript with this small modification - use the 'cm-name' field as the first name field, and append the surname to it once submitted:

<script language="javascript" type="text/javascript">
function concatNames() {
  concatForm = document.forms['subForm'];

  var firstname = concatForm.elements['cm-name'].value;
  var lastname = concatForm.elements['cm-lastname'].value;
  var email = concatForm.elements['cm-iyilii-iyilii'].value;
  var fullname = firstname + ' ' + lastname;

  var error_message = 'Form fields must not be empty';
  var error_flag = false;

  if(firstname == '' || lastname == '' || email == '') {
      error_flag = true;
  }

  if(error_flag) {
      alert(error_message);
      return false;
  } else {
      concatForm.elements['cm-name'].value = fullname;
      return true;
  }
}
</script>

<!-- Edit form below so it submits to your list -->

<form action="http://xxxyyy.createsend.com/t/xxx" method="post" id="subForm" onSubmit="return concatNames()">
<div>
<label for="name">First Name:</label><br /><input type="text" id="cm-name" name="cm-name"/><br />
<label for="name">Last Name:</label><br /><input type="text" id="cm-lastname" name="cm-lastname" /><br />
<label for="iyilii-iyilii">Email:</label><br /><input type="text" name="cm-iyilii-iyilii" id="iyilii-iyilii" /><br />

<input type="submit" value="Subscribe" />
</div>
</form>

If anyone is using an external validation plugin like jQuery validate, note that this should only run once the form has passed validation (or else it'll keep adding the surname on when the validation fails).

In the case of jQuery validate, this involves overriding the default submit handler like so:

$(document).ready(function(){
    $("#subForm").validate({
        // join names after validation by overriding the default submit handler
        submitHandler: function(form) {
            $('#cm-name').val($('#cm-name').val() + " " + $('#cm-surname').val());
            form.submit();
        }
    });
});

Hope this is useful to somebody.

roshodgekiss roshodgekiss, 4 years ago

This is the best, Swinburne - a huge thank you for making a massive contribution like this on your first post! I'll be sure to share this around. Keep up the great work!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
penny0l0, 4 years ago

This works well. Just a note about adapting this for your own form - I expect that 'cm-iyilii-iyilii' needs to be changed to the code for your specific form - is that right?

My client often has couples sign up together, i.e. Mary & John Smith. Using the directions above I can concatenate to make Mary & John Smith appear as the full name. However, when using the [firstname] personalization, only the first name, i.e. Hi Mary, is returned. My client would prefer that both names appear, i.e. Hi Mary & John. Is there a way that I can assign the first name that is entered to more than one field, i.e. another field called firstname1? Or is there another way I can get both names to appear?

Cheers, and thanks!

Mathew Mathew, 4 years ago

Yes, the specific form element name will need to match the one for your particular list.

You would need to use custom fields to separate the "first" name, so you could store "Mary & John" in one field, and then "Smith" in another field. Your form then could save both the full name and the separate "first" name as two fields, perhaps using a hidden field on your form.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
penny0l0, 4 years ago

Hi Matthew,

My question wasn't very clear. I do have 2 custom fields (FirstName and LastName), which I'm concatenating into the fullname field. I would also like the information entered into those fields on the signup form to populate the corresponding fields in the database but I'm not sure how to get the correct values into the hidden fields. Is there something I can add to the concatenation script or would I need a separate script? Or is there a simpler way to do this?

roshodgekiss roshodgekiss, 4 years ago

Hi penny0l0, the concatenation code snippet that I posted above (2 months ago) will do what you have described, if you amend it to add values to your FirstName and LastName custom fields, ie. replace:

<label for="cm-firstname">First Name:</label><br /><input type="text" id="cm-firstname" name="cm-firstname"/><br />
<label for="cm-lastname">Last Name:</label><br /><input type="text" id="cm-lastname" name="cm-lastname" />

With:

<label for="cm-f-xxxx">First Name:</label><br /><input type="text" name="cm-f-xxxx" id="FirstName" /><br />
<label for="cm-f-yyyy">Last Name:</label><br /><input type="text" name="cm-f-yyyy" id="LastName" />

... or the equivalent code that the 'Create a subscribe form' generator provides. Oh, don't forget to replace cm-firstname / cm-lastname in the JS script with the cm-f-xxxx names that the generator adds. Let us know if you have any questions about this :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098