PHP/MySQL Contact Form with jQuery

Here’s an implementation of a contact form with PHP and jQuery. Usually, one would only want the message posted by the user to be sent to an email address. This script does that and also saves all these messages in the database for the admin to keep track of them. The table […]

ContactForm

View demoDownload source

Here’s an implementation of a contact form with PHP and jQuery. Usually, one would only want the message posted by the user to be sent to an email address. This script does that and also saves all these messages in the database for the admin to keep track of them.

The table to store this data is the following:

CREATE TABLE CONTACT(
pk_contact 	INT UNSIGNED NOT NULL auto_increment,
name			VARCHAR(120) NOT NULL,
email 			VARCHAR(120) NOT NULL,
website		VARCHAR(120) NOT NULL DEFAULT "",
message		VARCHAR(300) NOT NULL,
added_date 	TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
primary key(pk_contact)
)type=innodb DEFAULT CHARACTER SET utf8	COLLATE utf8_general_ci;

We will keep track of the name, email, website (optional), the message, and the date when the message was sent. Feel free to change the limits of the fields, but don’t forget to change them as well in the PHP files.

We use jQuery for the front end, and AJAX for submitting the form. All the validations are done on the server side, and the user will be notified when one of the fields is not correct. If the message is inserted into the database, an email is sent to the admin, notifying him about a new message.
We provide two CSS templates for the contact form.

Concerning the installation, all you need to do is run the database script (db_main_script.sql) and configure your database connection in config.php:

define('DB_SERVER', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'ContactForm');

You can also configure the email parameters in this file, like the Email Message Subject.

View demoDownload source

Message from TestkingSing up for 642-436 online course to become IT expert. Pass your a+ certification exam on first attempt using scbcd prep material.
Previous:
Next:

Tagged with:

Chadking is an absolute geek that rarely leaves the comfort of his 3-screen desk. He is a self taught programmer and is addicted to all possible legal drugs.

View all contributions by

Website: http://tympanus.net/codrops/author/chadking/

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 29

Comments are closed.
  1. 1

    This isn’t a bad tutorial, but it could have been better. The main thing I would suggest is to use PHPMailer with support for SMTP. Since most shared servers will have mail() either shut down entirely or require it to be sent via SMTP.

    Also, using a different MySQL class something like ezsql. Or even use MDB2 from PEAR (but though some shared hosts don’t have PEAR installed).

    It’s a good article, and for the ones looking for a intro into forms and such then it’s a good move. We use CakePHP at http://theeasyapi.com which includes exceptional lightweight API access.

    Nice work though

  2. 5

    i don’t see the tutorial but any the demo is beautiful will study the download source thanks

  3. 9

    I got an issue with the form.
    I tried to embed it into my MVC-Framework and it doesn’t work anymore.

    I click on the submit button and get the loader image, but nothing happens next.

    i read all the files and nothing seems to have a wrong link to a resource file.

  4. 11

    This also needs to validate whats with the input and others inside a p tag???

    PHPmailer is easy to implement but the validation makes it look like a hack.

  5. 13

    after downloading this site and configuring .. its not working anymore ..can somebody help me please

  6. 14

    I think the index1 style looks horrible, however the code behind this app is sweet, very easy to modify.. thanks! 🙂

  7. 15

    is there a way to get an error message to echo out on the form page if the submission doesn’t work? I assume there is. I am submitting in my local try-out and just getting the spinning wheel. Probably an issue with connecting to the DB, but an error msg. would let me know for sure.

  8. 17

    Does any one know how to change the submission confirmation from a one line that appears below the form to a separate confirmation page? Also, I need to create an interim page that displays the user’s information for their confirmation before they submit. Any ideas?

  9. 18

    Very beautiful and original form! Thank you for the fact that we have the opportunity to come to you and learn a lot! Thank you again!

  10. 19

    it doesn’t send any email…?
    i have an apache server in my room, what can i do?
    thank’s

  11. 20

    I noticed that if you enlarge the textfield in the demo; the items get out of place and the image does’nt grow with it.

    just a tip.

Comments are closed.