Email capture with Ajax and PHP

There are many occasions where you want to offer your users with a way to provide their email address to be informed of new articles, new product release, or just simple increase your own marketing email data base for later implement a campaign. You know, that small form field with a subscribe button that allows you to get in your inbox the email of the user who submitted.

When the email capture feature can be made in different ways, most of the time you would need to change your current HTML webpage to PHP to provide this feature, but a nice approach is using Ajax which will show a message to your users when the action has been successfully achieved without refreshing the browser page, and more important without changing your file extension (so you can keep it as HTML and avoid changing all your internal links). Our friend PHP will send the information filled in the form as an email which will arrive in your inbox, but it will do it without affecting your current files.

Let see first our HTML code:

Above you can see we have created 2 containers. One is for the message that you will receive when the email has been sent, and the other one contains the form itself (an input field and a submit button). As you can see we have ID our form “form1” and it will help us to identify it later in the Ajax process. In the same way our input fields have been ID’s “input_mail” and “bot_mail” to be called in the Ajax.

Now let’s to show you the Ajax code that will add in the header section of our HTML document (just before the < / head > close) :

$(document).ready(function() {

                        $("#bot_mail").click(function(){
				var data = $("#form1").serialize();

					$.ajax
						({
						type: "POST",
						url: "mail.php",
						data: data,
						cache: false,
						success: function()
							{
								//hide the form
                    			$('.capture').hide();                
                    			//show the success message
                    			$('.done').fadeIn('fast',
								function() {
								$('.done').delay(2000).fadeOut('slow');
								});
							}
						});
					return false;
			});
		});

Now lets’s to detail the javascript above:

• We action the process on clicking the submit button (“#bot_mail”), and indicate what is going to happens to our form (“#form1”).
• Later we opened the Ajax properties and indicate to Post the data in the mail.php file (we will see this lines below).
• When the action is successful we will order the container “.capture” to hide, and to show the container “.done” with the success message. To make the container to open with a nice effect we will add a fadeOut in slow motion and only after 2 second of delay.

The last piece is our mail.php that will send the email submitted to your inbox, then you can add it to your records. The PHP code for this is pretty easy and simple. Here it goes:

The code above is simple. It gets the POST from the email field in your HTML form, and uses it to indicate: a) who is sending the email (the users who submitted the form), and also; b) as a body of the message. All these information is send to your email specify in this example as “[email protected] (be sure to replace it with your email before to use it).

Done, you are ready to add a new feature in your website with a nice Ajax effect, and without modifying your current HTML to any other language. Enjoy.