Un formular de contact este ceva esential intr-un site web. El reprezinta modul in care vizitatorii interactioneaza cu site-ul dar si o sursa de informatii pretioase pentru webmaster: adresa de e-mail, adresa IP si ce mai doreste el sa afle.

O sa spuneti: "Oh, nu! Inca un formular de contact". Da, aveti dreptate, e plin internetul de ele, dar acesta are un comportament mai putin obisnuit. Nu va da mesaje de eroare daca gresiti ci va sugereaza printr-o "negare" daca ceva nu este in regula. In plus validarea datelor se face client-side cu Ajax, deci e mai rapid decat un formular cu php.

A, si ceea ce ar trebui sa va convinga, are "stil" (CSS, evident), merge si, mai ales, este gratis.

Dupa cum spuneam in articol, scopul este de a construi un formular de contact prin care vizitatorul site-ului nostru sa poata comunica cu noi.

Problema

Sa punem la indemana vizitatorului un formular de contact cat mai atractiv. Apasati pe Submit fara sa completati nimic.

Solutie

Folosim un formular de contact clasic la care validarea o facem cu ajutorul Ajax. Abordarea solutiei presupune realizarea a patru fisiere si utilizarea unor plug-in-uri jQuery.

Cele patru fisiere vor fi unul principal, HTML, care contine formularul, unul PHP, care trimite efectiv e-mail-ul, unul, evident pentru stil, CSS si ultimul, un fisier JS, prin care se initializeaza functiile jQuery.

Creati mai intai fisierul CSS pe care il inserati in fisierul principal de stil al site-ului, fie direct, fie prin @import url("contact.css");.

.row { margin:0 auto; width:960px; overflow:hidden; margin:0 -16px 0 -16px; width:auto; display:inline-block; }
.grid_6 { width:448px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.wrapper-block label{ padding:0; display:block;text-align:left; width:120px; float:left; font-size:20px; font-weight:200; }
.wrapper-block [type="text"]{ font-size:15px; padding:10px 4px; border:solid 1px #748493; width:300px; margin:2px 0 20px 10px;}
.wrapper-block textarea{ padding:10px 4px; border:solid 1px #748493; width:300px; margin:2px 0 20px 10px; font-size:15px; overflow:hidden;}
input.btn-form{ width:110px; margin:0 0 5px 130px; padding:10px 20px; display:inline-block; font-size:14px; border:none; background:#FF0033; color: #f8f8f8;cursor:pointer; font-weight:400; text-transform:uppercase; float:right;}
input.btn-form:hover{ background:#FF9966;}
#form .error-input {border-color: #CC0033;}
.sending{margin:0; padding:3px;font-size:15px; display:none; position:absolute; bottom:10px; right:20px; color:#FFFFFF;}
.mess {display: none; padding:40px 0 40px 0;}
.mess h5{ font-weight:400; padding:10px;}

Fisierul PHP foloseste functia mail() pentru a trimite mail-ul de contact si are forma cea mai simpla posibila:

Fisierul HTML care contine formularul de contact:

<!doctype html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<title></title>
<!-- Il invatam HTML5 pe IE9 -->
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/style.css" type='text/css'>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.ufvalidator-1.0.5.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
            <div class="row">
                    <div class="grid_6">
                            <form id="form" name="form" method="post" action="lib/contact.php">
                                <div class="wrapper-block left">
                                    <label for="name">
                                        Nume
                                    </label>
                                    <input type="text" name="name" id="name" title="Your Name" class="req-string"/>
                                </div>
                                <div class="wrapper-block left">
                                    <label for="email">
                                        E-mail
                                    </label>
                                    <input type="text" name="email" id="email" title="Your E-mail" class="req-email"/>
                                </div>
                                <div class="wrapper-block left">
                                    <label for="message">
                                        Mesaj
                                   </label>
                                    <textarea id="message" name="message" rows="6" cols="10" title="Your Message" class="req-string"></textarea>
                                </div>
                                <input type="submit" value="Submit" class="submit btn-form" id="submit"/>
                            </form>
                            <span class="sending">
                                send...
                            </span>
                            <div class="mess center">
                            </div>
                    </div>
            </div>
</body>
</html>

Si, in sfarsit, fisierul JS:

jQuery(document).ready(function() {

    $('#submit').formValidator({
        scope: '#form'
    });

    $('#submit').click(function() {
        $('input.error-input, textarea.error-input').delay(300).animate({
            marginLeft: 0
        },
        100).animate({
            marginLeft: 10
        },
        100).animate({
            marginLeft: 0
        },
        100).animate({
            marginLeft: 10
        },
        100);
    });

    var options = {

        beforeSubmit: function() {
            $('.sending').show();

        },
        success: function() {
            $('.sending').hide();
            $('#form').hide();
            $(".mess").show().html('Multumim! Mesajul dumneavoastra a fost trimis';
            $('.mess').delay(3000).fadeOut(function() {

                $('#form').clearForm();
                $('#form').delay(3500).show();

            });
        }
    };

    $('#form').submit(function() {
        $(this).ajaxSubmit(options);
        return false;
    });

});

Pe langa aceste fisiere se mai utilizeaza libraria jQuery si plug-in-urile jQuery, jquery.form si jquery.ufvalidator.

Explicatii

Exemplul poate fi folosit ca atare, dar puteti sa-l integrati intr-o pagina de contact mult mai complexa.

Multe multumiri...

Internetului ca exista si celor care ne mai spun pe gratis cate ceva, chiar daca i-a costat mult timp sa invete!

Daca articolul v-a fost util, va rugam sa lasati un comentariu, sa dati un Like sau un Tweet.