Home Forums Porto Template FAQ’s How to add fields in the Newsletter Integration (Mailchimp)

This topic contains 0 replies, has 1 voice, and was last updated by  Support 3 years, 6 months ago. This post has been viewed 3076 times

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #10008917

    Support
    Keymaster

    HTML:

    <form id="newsletterForm" action="php/newsletter-subscribe.php" method="POST">
    	<div class="row">
    		<div class="form-group mb-xs">
    			<div class="col-md-12">
    				<input class="form-control" placeholder="First Name" data-msg-required="Please enter your first name." name="newsletterFirstName" id="newsletterFirstName" type="text">
    			</div>
    		</div>
    	</div>
    	<div class="row">
    		<div class="form-group mb-xs">
    			<div class="col-md-12">
    				<input class="form-control" placeholder="Last Name" data-msg-required="Please enter your last name." name="newsletterLastName" id="newsletterLastName" type="text">
    			</div>
    		</div>
    	</div>
    	<div class="row">
    		<div class="form-group mb-sm">
    			<div class="col-md-12">
    				<input class="form-control" placeholder="Email Address" data-msg-required="Please enter your email." name="newsletterEmail" id="newsletterEmail" type="text">
    			</div>
    		</div>
    	</div>
    	<div class="row">
    		<div class="form-group">
    			<div class="col-md-12">
    				<input type="submit" value="Submit" class="btn btn-primary pull-right">
    			</div>
    		</div>
    	</div>
    </form>

    JS
    (js/custom.js)

    $.extend(theme.Newsletter, {
    
    	build: function() {
    		if (!($.isFunction($.fn.validate))) {
    			return this;
    		}
    
    		var self = this,
    			$firstName = self.$wrapper.find('#newsletterFirstName'),
    			$lastName = self.$wrapper.find('#newsletterLastName'),
    			$email = self.$wrapper.find('#newsletterEmail'),
    			$success = $('#newsletterSuccess'),
    			$error = $('#newsletterError');
    
    		self.$wrapper.validate({
    			submitHandler: function(form) {
    
    				$.ajax({
    					type: 'POST',
    					url: self.$wrapper.attr('action'),
    					data: {
    						'fname': $firstName.val(),
    						'lname': $lastName.val(),
    						'email': $email.val()
    					},
    					dataType: 'json',
    					success: function(data) {
    						if (data.response == 'success') {
    
    							$success.removeClass('hidden');
    							$error.addClass('hidden');
    
    							$email
    								.val('')
    								.blur()
    								.closest('.control-group')
    								.removeClass('success')
    								.removeClass('error');
    
    						} else {
    
    							$error.html(data.message);
    							$error.removeClass('hidden');
    							$success.addClass('hidden');
    
    							$email
    								.blur()
    								.closest('.control-group')
    								.removeClass('success')
    								.addClass('error');
    
    						}
    					}
    				});
    
    			},
    			rules: {
    				newsletterFirstName: {
    					required: true
    				},
    				newsletterLastName: {
    					required: true
    				},
    				newsletterEmail: {
    					required: true,
    					email: true
    				}
    			},
    			errorPlacement: function(error, element) {
    
    			}
    		});
    
    		return this;
    	}
    
    });

    PHP:
    (php/newsletter-subscribe.php)


Viewing 1 post (of 1 total)