E-mail Newsletter Form with jQuery, AJAX, MySQL and PHP

Download files: newsletter_files.zip

Difficulty level: Intermediate

To get started, download all of the files necessary. They are contained within the .zip file you see above.

Once you unpack the .zip file on your computer, your next step is to adapt the files for use with your website. There are some elements you'll want to keep, and some you won't, and this guide will explain how to change what you want to how you want it.

First, you need to create a database in which to store the files. If you already have a database, then your next step is to setup a table. I would recommend a table with the name newsletterdb, and with two columns: id as a standard primary key, and email to house the e-mail addresses. These are the table and fields that the scripts utilize by default. You are going to have to change the mysqlConnect.php file to match the information for your database. If you don't know what the parameters are, or how to set them, please refer to information on mysql_connect() and mysql_select_db().

Note: You can capture as much information as you like, but in my experience, people generally like to give out as little information as possible. With the prospect of a newsletter, they are already opening up themselves to an unknown number of solicitations. I wouldn't take advantage of that.
Once you have the database information squared away, it's just a matter of connecting the dots. The files in the .zip file are arranged in various folders. They are done so because their references are by relative placement within the file structure. That is to say, site.js is in the js folder because that's where the html_form.html looks for it. Make sure that if you don't plan on keeping these files in their respective folder names, that you go back into the files and adjust the references. I would really only recommend this for someone who is well versed in JavaScript, HTML and PHP.

You may also opt to change out the images being used. If you do so, you'll want to go into the stylesheet (css/stylesheet.css), and adjust #nomatch, #match and #submitButton, along with their relevant derivative definitions. This would include changing settings for height, width and background-position.

If you have any questions, let me know, and I'll try to help best I can.