Creare modulo contatti in Php MySql e jQuery

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:

<style>
            a.back{
                width:184px;
                height:32px;
                position:absolute;
                bottom:10px;
                left:10px;
                background:transparent url(back.png) no-repeat top left;
            }
            a.switchstyle{
                width:184px;
                height:32px;
                position:absolute;
                top:10px;
                left:10px;
                background:transparent url(switchstyle.png) no-repeat top left;
            }
        </style>
    </head>
    <body>
        <div id="contact">
            <h1>Contattaci</h1>
            <form id="ContactForm" action="">
                <p>
                    <label>Nome</label>
                    <input id="name" name="name" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
					<span class="error" style="display:none;"></span>
                </p>
                <p>
                    <label>Email</label>
                    <input id="email" name="email" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
					<span class="error" style="display:none;"></span>
                </p>
                <p>
                    <label>Website<span>(optional)</span></label>
                    <input id="website" name="website" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
                </p>
                <p>
                    <label>Messaggio<br /> <span>300 characters allowed</span></label>
                    <textarea id="message" name="message" class="inplaceError" cols="6" rows="5" autocomplete="off"></textarea>
					<span class="error" style="display:none;"></span>
                </p>
                <p class="submit">
                    <input id="send" type="button" value="Submit"/>
                    <span id="loader" class="loader" style="display:none;"></span>
					<span id="success_message" class="success"></span>
                </p>
				<input id="newcontact" name="newcontact" type="hidden" value="1"></input>
            </form>
        </div>

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!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

ommenti

Lascia una risposta
  1. demo fenomenale fuziona perfettamente. a differenza dei comandi trovati in altri tutorial in giro per il web che col mi servere non ne vogliono sapere di funzionare

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *