Creare modulo contatti in Php MySql e jQuery

Oggi vogliamo creare un form per i contati in Php e implementato con jQuery. Inoltre vogliamo tenere traccia di tutti i messaggi che riceviamo e quindi salvarli nel nostro database.

Al lavoro!

DEMO

DOWNLOAD

Iniziamo subito con il creare la tabella che ci servira’ per salvare tutti i messaggi che riceviamo:

CREATE DATABASE ContactForm;
USE ContactForm;
DROP TABLE IF EXISTS CONTACT;
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;

Con questo semplice codice Sql, creiamo una tabella contact con i campi che noi vogliamo salvare, se volete la potete implementare a vostro piacimento, ma ricordatevi di modificare anche il file index1.php (che troverete scaricando la demo). Questo codice lo trovate nel file chiamato db_main_script.sql. In questo caso specifico, teniamo traccia della mail, del nome di chi ci ha contattato, del suo sito, del messaggio inviato e della data di invio.

Nel file index1.php abbiamo inserito il seguente codice:

    
    
        
            
Contattaci
            
                

                    Nome
                    
					
                
                

                    Email
                    
					
                
                

                    Website(optional)
                    
                
                

                    Messaggio
 300 characters allowed
                    
					
                
                
				
            
        

Usiamo jQuery per il front end e Ajax per la presentazione del modulo. La sintassi e’ molto semplice, se volete aggiungere dei campi che vorrete salvare sul vostro databsae, oltre che aggiungere sulla vostra tabella (come detto sopra), dovete introdurre dei <label> nel codice della index1.php.

Per quanto riguarda l’istallazione di questo modulo contatti, tutto quello che dovete fare e’ caricare e creare la tabella sul vostro database e modificare il file config che si trova nella cartella php del download della demo e andare a cambiare la connessione al vostro database:

define('DB_SERVER'			, 'localhost'); /*qui inserite i dati per accesso al vostro database*/
define('DB_USER'			, 'root');
define('DB_PASS'			, '');
define('DB_NAME'			, 'ContactForm');

/*
 * Email Settings      questi sono i dati da cambiare con i vostri
 */
define('EMAIL_TO'			, 'hello@iwebdesigner.it');
define('EMAIL_FROM_NAME'	, 'iwebdesigner');
define('EMAIL_FROM_ADDR'	, 'www.iwebdesigner.it');
define('MESSAGE_SUBJECT'	, 'New Message From Contact Form');
define('SEND_EMAIL'			, true); /* if set to true, an email is sent to admin after a message is inserted */

Ecco fatto, avete creato il vostro form contatti con il salvataggio di tutti i messaggi che ricevete.

Se cliccate sull’immagine magoo style vedrete il secondo stile del modulo di contatti che vi rimanda alla index2.php. In tal modo avete due stili del form su cui potete lavorare.

DEMO

DOWNLOAD

Alla prossima!