Brainleaf
Web Resources

In questo tutorial vedremo come realizzare un semplice form di contatto utilizzando una combinazione di linguaggi: HTML,CSS,Javascript, Json e PHP.
Questo modulo di contatto lavorerà in maniera asincrona, senza nessun reload della pagina ed è proprio per questa ragione che possiamo chiamarlo ajax form.

Requisiti

Utilizzando la funzione php per l'invio della mail, per poter utilizzare o semplicemente testare gli script sarà neccessario disporre anche di un server web con installato PHP alla versione 5

 

Scarica qui sotto BL contactForm

Download Ajax ContactForm

Tutorial

Prima di procedere alla stesura dei file del progetto procuriamoci una copia aggiornata della libreria jQuery.


Il markup HTML

Per prima cosa occupiamoci del markup del form, creando appunto un form con all'interno alcuni campi.

Per un corretto funzionamento degli script è necessario rispettare la nomenclatura delle classi e delle id.

 

<form id="bl-contact-form" class="bl-contact-form" method="post" action="#">
    <h3 class="bl-cf-title">contactUs!</h3>    
    <p class="bl-cf-intro">
    Feel free to contact us!<br>
    Use this form to send us a message.
    </p> 
    <div id="generic-form-error-msg">Form Error!</div>
    
    
    <label for="bl-cf-name-input">Name</label>
    <div class="input-error"></div>
    <input type="text" id="bl-cf-name-input" name="bl-cf-name-input" class="input-text" placeholder="Write here your name">

    <label for="bl-cf-surname-input">Surname</label>
    <div class="input-error"></div>
    <input type="text" id="bl-cf-surname-input" name="bl-cf-surname-input" class="input-text" placeholder="Write here your surname">
    
    <label for="bl-cf-email-input">Your email</label>
    <div class="input-error"></div>
    <input type="email" id="bl-cf-email-input" name="bl-cf-email-input" class="input-text" placeholder="Write here your email address">
    
    <label for="bl-cf-subject-input">Subject</label>
    <div class="input-error"></div>
    <input type="text" id="bl-cf-subject-input" name="bl-cf-subject-input" class="input-text" placeholder="Write here the message subject">

    <label for="bl-cf-message-input">Message</label>
    <div class="input-error"></div>
    <textarea class="input-textarea" id="bl-cf-message-input" name="bl-cf-message-input"></textarea>
    
    <label for="bl-cf-privacy-input">Privacy</label>
    <div class="input-error"></div>
    <div class="input-field-row">
        <input type="checkbox" id="bl-cf-privacy-input" name="bl-cf-privacy-input" class="input-checkbox">
        I accept the <a href="#" title="Privacy Policy">privacy policy</a>
    </div>
    
    <div class="bl-cf-captcha-quiz-box">
        <span>Captcha Quiz</span>
        To prevent spam, please choose a question below and solve the simple quiz. (eg. question:2+2; answer: 4)
        <label for="bl-cf-question-input">Quiz Questions</label>
        <select id="bl-cf-question-input" name="bl-cf-question-input" class="input-select">
            <option value="1">2 + 2</option>
            <option value="2">2 x 2</option>
            <option value="3">2 + 3</option>
            <option value="4">3 - 2</option>
        </select>
        
        <label for="bl-cf-answer-input">Quiz Answer</label>
        <div class="input-error"></div>
        <input type="text" class="input-text" id="bl-cf-answer-input" name="bl-cf-answer-input" placeholder="Write here the answer">
         
    </div>
    
    
    <p>
        <button type="submit" id="bl-cf-send" class="button">Send Message</button>
    </p>
</form>

Ricordatevi ad inserire nel markup, sopra o sotto il form, le seguenti righe per attivare il loader durante l'invio della mail e il box dove verrà stampato il messaggio di ritorno dello script.

 

<div id="bl-cf-loader" class="bl-cf-boxes ajax-loader"></div>
<div id="bl-cf-msg" class="bl-cf-boxes"></div>

Il Javascript

Adesso che abbiamo un markup disponibile è il momento di occuparci della stesura del file javascript. A tal proposito utilizzeremo la libreria jQuery che ci offre una sintassi semplificata e più rapida.

Creeremo una funzione di controllo e verifica dei dati inseriti (la verifica effettuata è molto blanda) con anche una sorta di simpatico captcha fatto in casa. Superata la validazione del form, la  funzione invierà i dati, inseriti dall'utente, allo script php che eseguirà l'invio della mail e a sua volta invierà indietro al file javascript una risposta in formato json.

Nell'immagine seguente potete vedere il flusso di tutto il form di contatto.

La funzione, che chiamiamo contactForm() conterrà come prima cosa le operazioni di validazione del form, ovvero controllerà se l'utente ha riempito tutti i campi e se ha risposto correttamente alla domanda di controllo per evitare i robot.

function contactForm(){
    
    $('#bl-cf-send').on('click', function(e){    
        
        e.preventDefault();
        
        $('#generic-form-error-msg').hide();
        $('.input-error').hide();
       
        var formValid = true;
        
        var errorMsg = {
            "name":{"msg":"Error! Enter your name!"},
            "surname":{"msg":"Error! Enter your surname!"},
            "email":{"msg":"Error! Enter an email!"},
            "subject":{"msg":"Error! Enter a subject for the message!"},
            "message":{"msg":"Error! Enter a message!"},
            "privacy":{"msg":"Error! Accept the privacy policy!"},
            "security":{"msg":"Error! Enter an answer!"},
            "answer":{"msg":"Error! Wrong answer. Try again."},
            "mailsuccess":{"msg":"<h3>Message sent!</h3> <p>Your message has been sent. <br>We will reply as quick as we can!</p>"},
            "mailerror":{"msg":"<h3>Error!</h3> <p>Sorry but the server failed to send your message.<br>Try again!</p>"},
            "btnreopen":{"msg":"reOpen Form"}
        };

        var name = $('#bl-cf-name-input');
        var surname = $('#bl-cf-surname-input');
        var email = $('#bl-cf-email-input');
        var subject = $('#bl-cf-subject-input');
        var message = $('#bl-cf-message-input');
        var security = $('#bl-cf-answer-input');
        var privacy = $('#bl-cf-privacy-input');
        
        var question = $('#bl-cf-question-input').val();
        switch(question) {
            case "1":
                var correctAnswer = 4;
                break;
            case "2":
                var correctAnswer = 4;
                break;
            case "3":
                var correctAnswer = 5;
                break;
            case "4":
                var correctAnswer = 1;
                break;
        }
        if (name.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            name.prev('.input-error').text(errorMsg.name.msg).show();
            name.addClass('error');
        }
        if (surname.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            surname.prev('.input-error').text(errorMsg.surname.msg).show();
            surname.addClass('error');
        }
        if (email.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            email.prev('.input-error').text(errorMsg.email.msg).show();
            email.addClass('error');
        }
        if (subject.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            subject.prev('.input-error').text(errorMsg.subject.msg).show();
            subject.addClass('error');
        }
        if (message.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            message.prev('.input-error').text(errorMsg.message.msg).show();
            message.addClass('error');
        }
        if (security.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            security.prev('.input-error').text(errorMsg.security.msg).show();
            security.addClass('error');
        }else{
            // Check the answer
            if (security.val() != correctAnswer) {
                security.prev('.input-error').text(errorMsg.answer.msg).show();
                security.addClass('error-answer');
            }else{
                security.removeClass('error-answer');
                security.removeClass('error');
            }
        
        }
        if (privacy.prop("checked")) {
        }else{
            var formValid = false;
            $('#generic-form-error-msg').show();
            privacy.parent('.input-field-row').prev('.input-error').text(errorMsg.privacy.msg).show();
            privacy.parent('.input-field-row').addClass('error');
        }
        
        
    });// end of "on click"
    
} // end of "contactForm()"

Superato questo primo blando controllo, lo script eseguirà una chiamata ajax al file php incaricato di inviare la mail. Ciò che il file javascript si attende è una risposta in formato json dal file php, che notificherà l'avvenuto invio o l'insuccesso dell'operazione. Di seguito il file competo utilizzabile.

/* 
**  BRAINLEAF contactFormTM | (c)2013 by www.brainleaf.eu
**  Version 1.0
**  See more and download at -> http://brainleaf.eu/index.php/tutorial-html5-js-ajax-php/75-form-di-contatto-in-ajax-e-php-tutorial-e-download
**  Commercial use allowed
*/


function contactForm(){
    
    $('#bl-cf-send').on('click', function(e){    
        
        e.preventDefault();
        
        $('#generic-form-error-msg').hide();
        $('.input-error').hide();
       
        var formValid = true;
        
        var errorMsg = {
            "name":{"msg":"Error! Enter your name!"},
            "surname":{"msg":"Error! Enter your surname!"},
            "email":{"msg":"Error! Enter an email!"},
            "subject":{"msg":"Error! Enter a subject for the message!"},
            "message":{"msg":"Error! Enter a message!"},
            "privacy":{"msg":"Error! Accept the privacy policy!"},
            "security":{"msg":"Error! Enter an answer!"},
            "answer":{"msg":"Error! Wrong answer. Try again."},
            "mailsuccess":{"msg":"<h3>Message sent!</h3> <p>Your message has been sent. <br>We will reply as quick as we can!</p>"},
            "mailerror":{"msg":"<h3>Error!</h3> <p>Sorry but the server failed to send your message.<br>Try again!</p>"},
            "btnreopen":{"msg":"reOpen Form"}
        };

        var name = $('#bl-cf-name-input');
        var surname = $('#bl-cf-surname-input');
        var email = $('#bl-cf-email-input');
        var subject = $('#bl-cf-subject-input');
        var message = $('#bl-cf-message-input');
        var security = $('#bl-cf-answer-input');
        var privacy = $('#bl-cf-privacy-input');
        
        var question = $('#bl-cf-question-input').val();
        switch(question) {
            case "1":
                var correctAnswer = 4;
                break;
            case "2":
                var correctAnswer = 4;
                break;
            case "3":
                var correctAnswer = 5;
                break;
            case "4":
                var correctAnswer = 1;
                break;
        }
        if (name.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            name.prev('.input-error').text(errorMsg.name.msg).show();
            name.addClass('error');
        }
        if (surname.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            surname.prev('.input-error').text(errorMsg.surname.msg).show();
            surname.addClass('error');
        }
        if (email.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            email.prev('.input-error').text(errorMsg.email.msg).show();
            email.addClass('error');
        }
        if (subject.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            subject.prev('.input-error').text(errorMsg.subject.msg).show();
            subject.addClass('error');
        }
        if (message.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            message.prev('.input-error').text(errorMsg.message.msg).show();
            message.addClass('error');
        }
        if (security.val() === "") {
            var formValid = false;
            $('#generic-form-error-msg').show();
            security.prev('.input-error').text(errorMsg.security.msg).show();
            security.addClass('error');
        }else{
            // Check the answer
            if (security.val() != correctAnswer) {
                security.prev('.input-error').text(errorMsg.answer.msg).show();
                security.addClass('error-answer');
            }else{
                security.removeClass('error-answer');
                security.removeClass('error');
            }
        
        }
        if (privacy.prop("checked")) {
        }else{
            var formValid = false;
            $('#generic-form-error-msg').show();
            privacy.parent('.input-field-row').prev('.input-error').text(errorMsg.privacy.msg).show();
            privacy.parent('.input-field-row').addClass('error');
        }
        
        // SENDMAIL
        if (formValid === true) {
            var contactForm = $('#bl-contact-form').serialize();
            scrollOnTop('#bl-contact-form');
            $('#bl-contact-form').hide();
            $('#bl-cf-loader').fadeIn();
            
            $.ajax({
                type: 'post',
                url: 'php/bl-contactForm.php',
                data: contactForm,
                dataType: 'json',
                success: function(data){
                    switch(data.result) {
                        case "success":
                            $('#bl-cf-msg').html(errorMsg.mailsuccess.msg);
                            setTimeout(function(){
                                $('#bl-cf-loader').hide();
                                $('#bl-cf-msg').fadeIn();
                            }, 1000);
                            break;
                        case "fail" :
                            $('#bl-cf-msg').html(errorMsg.mailerror.msg);
                            $('#bl-cf-msg').append('<button id="reOpenForm" class="button">'+ errorMsg.btnreopen.msg +'</button>');
                            setTimeout(function(){
                                $('#bl-cf-loader').hide();
                                $('#bl-cf-msg').fadeIn();
                            }, 1000);
                            reOpenForm();
                            break;
                    }
                    
                },
                error: function(){
                    $('#bl-cf-msg').html(errorMsg.mailerror.msg);
                    $('#bl-cf-msg').append('<button id="reOpenForm" class="button">'+ errorMsg.btnreopen.msg +'</button>');
                    setTimeout(function(){
                        $('#bl-cf-loader').hide();
                        $('#bl-cf-msg').fadeIn();
                    }, 1000);
                    reOpenForm();
                }
                
            });// end .ajax
            
        }// end Sendmail
        
    });// end of "on click"
    
} // end of "contactForm()"


function resizeContctBoxes(){
    var contactFormH = $('#bl-contact-form').height() / 4;
    $('.bl-cf-boxes').height(contactFormH);
}

function scrollOnTop(element){
    var pos = $(element).position().top;
    console.log(pos);
    $('html, body').animate({scrollTop: pos}, 500);
}

function reOpenForm() {
    $('#reOpenForm').on('click', function(e){
        e.preventDefault();
        $('#bl-cf-msg').hide();
        $('#bl-contact-form').fadeIn();
    });
}
$(document).on('ready', function(){
    resizeContctBoxes();
    contactForm();
});

$(window).on('resize', function(){
    resizeContctBoxes();
});

La funzione .ajax() invia al file php/bl-contactForm.php i dati passati dal form e attende che esso esegua le operazioni di invio. Come avrete capito lo script "legge" la risposta del file php che è in formato json: {"result":"success"} in caso di successo e {"result":"fail"} in caso di errore e si comporterà in modo diverso a seconda del risultato, stampando un messaggio nell'apposito box.

Nello script è stata inserita anche una funzione di resize che imposta l'altezza del loader e del messaggio in base all'altezza del form.

Il file PHP

Diamo infine uno sguardo al file php che si occupa della gestione vera e propria dell'invio della mail. Eccone il codice completo.

<?php

// BRAINLEAF contactFormTM | (c)2013 by www.brainleaf.eu
// Version 1.0
// See more and download at -> http://brainleaf.eu/index.php/tutorial-html5-js-ajax-php/75-form-di-contatto-in-ajax-e-php-tutorial-e-download
// Commercial use allowed


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CONFIGURATION
// Edit before use!!

// Mail Configuration

$subject = "Mail from your site: "; // This is the prefix of the message subject
$to = "youremail[@]yourdomain"; // Your email inbox


// Message Configuration

$messageTitle ="New Message"; // A title for the message (will be displayed inside the message)
$messageSubTitle = "This is a message from your site"; // A subtitle for the message (will be displayed inside the message)
$messageImage = ""; //Write here a valid url (eg: http://yoursite.com/images/mail-logo.jpg) to show an image inside the message. If you don't want any image just leave this option empty;


// Message CSS Style

$text_size = "18px"; // common text font size 
$text_color = "#555"; // common text color 
$title_size = "24px"; // title font size 
$title_color = "#555"; // title color
$subtitle_size = "20px"; // subtitle font size 
$subtitle_color = "#555"; // subtitle color


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// DO NOT EDIT BELOW THIS ALERT!!!!

$name = trim(stripslashes ($_REQUEST['bl-cf-name-input']));
$surname = trim(stripslashes ($_REQUEST['bl-cf-surname-input']));
$name = $name." ".$surname;
$email = trim(stripslashes ($_REQUEST['bl-cf-email-input']));
$subject .= trim(stripslashes ($_REQUEST['bl-cf-subject-input']));
$msg = trim(stripslashes ($_REQUEST['bl-cf-message-input']));
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= "From: " . $email . "\r\n"; // Sender's E-mail
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "Content-Transfer-Encoding: 7bit\n\n";

$message .= "<div style=\"font-family: Helvetica,Arial,sans-serif; font-size:".$text_size."; color:".$text_color.";\">";
if ($messageImage != "") {
    $message .= "<img src=\"".$messageImage."\" alt=\"contact form image\"";
}

$message .= "<h1 style=\"font-size:".$title_size."; color:".$title_color."; margin:10px 0 0 0;\">".$messageTitle."</h1>";
$message .= "<h2 style=\"font-size:".$subtitle_size."; color:".$subtitle_color."; margin:10px 0 0 0;\">".$messageSubTitle."</h2>";
$message .= "<p>Messaggio inviato da: " .$name. "<br>";
$message .= "E-mail per la risposta: " .$email."</p>";
$message .= "<p>".$msg."</p>";
$message .= "<p style=\"font-size:14px; color:#ccc;\"><em>Message sended by BRAINLEAF contactForm&trade;</em></p>";
$message .= "</div>";

$ok = mail($to,$subject,$message,$headers);
$resultmsg['result'] = $ok?"success":"fail";
$json = json_encode($resultmsg);
echo $json;

?>

Lo script php è molto semplice e richiede poche spiegazioni. Dopo una prima assegnazione di variabili riguardanti la mail i testi di default del messaggio e il suo stile grafico, lo script procede con la composizione del messaggio utilizzando i dati inviati dal javacript, per procedere poi con l'invio vero e proprio. A seconda dell'avvenuto invio o meno, la funzione inserisce un messaggio di ritorno all'interno di un array. La funzione json_encode() permette infine di formattare in json l'array creato con la risposta della funzione mail() e permettere così che esso venga correttamente interpretato dallo script javascript.

Download

Questa serie di script è stata messa a disposizione in un pacchetto da scaricare e utilizzare all'interno dei vostri progetti. Il form è stato anche rilasciato con due diversi stili css, ed è copletamente personalizzabile.

Scarica qui sotto BL contactForm

Download Ajax ContactForm

 

Nuova Versione

Abbiamo pubblicato una nuova versione del form di contatto completamente rinnovata e potenziata. La puoi trovare su GitHub o scaricarla direttamente da qui.

Joomla SEF URLs by Artio