How to add more fields on Mailchimp Newsletter Subscribe Form

[Support]

You can create custom fields on MailChimp.

1) Go to your list and create a new field called name:

2) Open the php file, php/newsletter-subscribe.php and add the new filed on the $merge_vars:
(Make sure the name of the var is the same you added on Mailchimp)

3) The HTML for the form:

<form class="form-inline" id="newsletterForm" action="php/newsletter-subscribe.php" method="POST">
	<div class="row controls">
		<div class="span3 control-group">
			<label>Your name *</label>
			<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" name="name" id="name">
		</div>
		<div class="span3 control-group">
			<label>Your email address *</label>
			<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" name="email" id="email">
		</div>
	</div>
	<div class="btn-toolbar">
		<input type="submit" value="Subscribe" class="btn btn-primary btn-large" data-loading-text="Loading...">
	</div>
</form>

4) The JS to be replaced on the file js/theme.js:

newsletter: function() {

	$("#newsletterForm").validate({
		submitHandler: function(form) {

			$.ajax({
				type: "POST",
				url: $("#newsletterForm").attr("action"),
				data: {
					"name": $("#newsletterForm #name").val(),
					"email": $("#newsletterForm #email").val()
				},
				dataType: "json",
				success: function (data) {
					if (data.response == "success") {

						$("#newsletterSuccess").removeClass("hidden");
						$("#newsletterError").addClass("hidden");

					} else {

						$("#newsletterError").html(data.message);
						$("#newsletterError").removeClass("hidden");
						$("#newsletterSuccess").addClass("hidden");

					}

					$("#newsletterForm #name, #newsletterForm #email")
						.val("")
						.blur()
						.closest(".control-group")
						.removeClass("success")
						.removeClass("error");
					
				}
			});

		},
		rules: {
			name: {
				required: true
			},
			email: {
				required: true,
				email: true
			}
		},
		errorPlacement: function(error, element) {

		},
		highlight: function (element) {
			$(element)
				.closest(".control-group")
				.removeClass("success")
				.addClass("error");
		},
		success: function (element) {
			$(element)
				.closest(".control-group")
				.removeClass("error")
				.addClass("success");
		}
	});

},

5) The result:

---

[Support]

Hello, with Bootstrap 3 it changed a little bit, here’s what you can do:

<form class="form-horizontal" id="newsletterForm" action="php/newsletter-subscribe.php" method="POST">
	<div class="form-group">
		<div class="col-sm-12">
			<input class="form-control" placeholder="Email Address" name="newsletterEmail" id="newsletterEmail" type="text">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-12">
			<input class="form-control" placeholder="Email Address" name="" id="" type="text">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-12">
			<button class="btn btn-default pull-right" type="submit">Subscribe</button>
		</div>
	</div>
</form>

Please let me know if you have any questions.

Thanks.

---

[Support]

Hello, if you added the rule for the “name” in the validation function:

(Please make sure that the field has the “name” and “id” as you set in the JS)

Something like:

<div class="form-group">
	<div class="col-sm-12">
		<input class="form-control" placeholder="Name" name="newsletterName" id="newsletterName" type="text">
	</div>
</div>

Please let me know if you have any questions.

Thanks.

---

[Author]

Posts