De curând i-am propus cuiva care dorea un magazin online o platforma opensource pentru e-commerce(pe care i am adaptat-o după nevoi), și asta în principal pentru ca actual există câteva platforme e-commerce cu care poți acoperi aproape orice cerințe. Însa persoanei căreia i-am propus dorea și un fel de formular prin care să se poată trimite o comandă rapidă ( mai mult o forma de contact) ceea ce probabil nu o sa găsești implementat sub forma de modul/plugin pentru ca dedublează practic conceptul de comanda și este ceva care practic nu are legătura directă cu platforma.
Însă chiar și sub aceste aspecte în anumite circumstanțe un astfel de formular poate deveni un adaos benefic.
Asa ca am scris un astfel de formular care doar trimite email ( folosind PhpMailer class) cu datele respective din formular.
Practic exista 2 fișiere: 1 fișierul cu formularul, 2 fișierul care folosește clasa pentru mail.
Știu ca nu are metode de securitate în ceea ce privește abuzurile generate prin cereri externe dar se pot implementa câteva foarte ușor. De asemenea am ignorat multe bune practici din motive legate de timpul extrem de scurt de realizare.
1 Formular-ul
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Comanda Rapida</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<style type="text/css">
#cerere-form .fieldgroup label.error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
border-radius:.5em;
color: #D8000C;
background-color: #FFBABA;
background-image: url("data:image/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD60lEQVR42s2WW2gcVRiA///Mmb1mb1nNtrFNNQliEVQqglqSTY1GKOqDikofWrEvRUQRhL7ok770QUEwkvpU0AcpfaqX1mqTzfZCKUWtCFqxNWzb3BqTve9m5sz5/WdmTVNatVfwwGHOnjn///3XM4twiwf+bwA6L0NgJvtAlR3Q9lGRpeZNA1ijIAww36A7h3fowudg6PHtaOgPGaJvCkAfEt1qIT4m133RRXaJ1I8vnDXTzQHRr/+4YYDKoYHKeE9HtmyXq19GcixSE8NgqL07MOC8LfrJuSGAzot7VDWVk3ePdBCavGED2vOgzrw1KxO1AdGnf71ugJMHE2z5AcU2vYapIZjkgJBj0x1dVdQLB0gs7htG03mTvVDXBWDrH1CN9Khc807KIYCzPwvQyqaue8soqUFqaqQoI+UNnIuT1wzQhzCgm2InxZ/fYsTvAzJsOHPEAFI29KwvAloWONXfABvju0RQb2MvrGsD5MUjVj3zTWDN5jYkhWRacPqgCW6SeweLCIsW8Q+0JscqgWhxSGT1sasG6DyGVF18iumnnjNiGQ68DSAtmPiOAdqCux4vcnNY3r5TrQKVftgjo7SZvWheHSAnBpu1zi9DvdkQwCIhWAgcosKoW0UWdbEHpCxC0kgyA83fTzVDkcJGMaDH/hPA1ketIu4W6c6NZirMsQ8TGkEGSJg6HGEBpBX9NSQeSDaCmgZ7rkF6duHrQBJe5O6u/SvAGRNPN/5M7ImsLQX4OgASQCj4nACYyYXdI5R5rIFcVOwZ77sLClDtRNCOpGvPGoP6q38EsPXxxnljr9mb7JfpOXCVggH+051mS8LtXfpbyJ/2TAeoX+bGw6voGfaickWA+la8VJ/r+Kxt/axg69FVTlyZaAA6nIaZkRiIIFFmW8V9R6hZ3nGbj3FOAMsH4k7byvlNckjvvgzA1rdXT5n7Qw+3PyRvm/aUgmwBJGDt+yBceD/hmk4r3i1isNsmdPiM8gGouDWmV0Hz2OTx2Fp6UgxQcQlQ2gcY1mJrfX71zviGAismPzTLJi0iLHwSAwwSpF6pXAyVaj29aUJxfwe0dU5tVSG9K/KElye2/jAmyiejB6PZ5IMyfs63upVYL8noFo/vKZEfGv4SXBIizxte26Vuqh09dyKxzh4UfVTxxCgvMo35zJHQ/ckeNEqXKGUT/GqBZQBiQAvkJng5TNPt1PypcDq8svQo37QXPEEnx3eXlq/XJ5KvWuebIVLO5QVMSxkjgCu8c4cUEMgEGtGeykfCVB+7t+ySGoaYQkA7OGh6uvwSpSW95E/384IIF91iD721aL3XoLgH542sf4Xf8n8VfwHQCvgodZ0hJQAAAABJRU5ErkJggg==");
}
p.success, p.error{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
}
p.success {
color: #4F8A10;
background-color: #DFF2BF;
background: url("data:image/image/png;base64,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");
background-repeat: no-repeat;
background-position: 10px center;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
}
p.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url("data:image/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD60lEQVR42s2WW2gcVRiA///Mmb1mb1nNtrFNNQliEVQqglqSTY1GKOqDikofWrEvRUQRhL7ok770QUEwkvpU0AcpfaqX1mqTzfZCKUWtCFqxNWzb3BqTve9m5sz5/WdmTVNatVfwwGHOnjn///3XM4twiwf+bwA6L0NgJvtAlR3Q9lGRpeZNA1ijIAww36A7h3fowudg6PHtaOgPGaJvCkAfEt1qIT4m133RRXaJ1I8vnDXTzQHRr/+4YYDKoYHKeE9HtmyXq19GcixSE8NgqL07MOC8LfrJuSGAzot7VDWVk3ePdBCavGED2vOgzrw1KxO1AdGnf71ugJMHE2z5AcU2vYapIZjkgJBj0x1dVdQLB0gs7htG03mTvVDXBWDrH1CN9Khc807KIYCzPwvQyqaue8soqUFqaqQoI+UNnIuT1wzQhzCgm2InxZ/fYsTvAzJsOHPEAFI29KwvAloWONXfABvju0RQb2MvrGsD5MUjVj3zTWDN5jYkhWRacPqgCW6SeweLCIsW8Q+0JscqgWhxSGT1sasG6DyGVF18iumnnjNiGQ68DSAtmPiOAdqCux4vcnNY3r5TrQKVftgjo7SZvWheHSAnBpu1zi9DvdkQwCIhWAgcosKoW0UWdbEHpCxC0kgyA83fTzVDkcJGMaDH/hPA1ketIu4W6c6NZirMsQ8TGkEGSJg6HGEBpBX9NSQeSDaCmgZ7rkF6duHrQBJe5O6u/SvAGRNPN/5M7ImsLQX4OgASQCj4nACYyYXdI5R5rIFcVOwZ77sLClDtRNCOpGvPGoP6q38EsPXxxnljr9mb7JfpOXCVggH+051mS8LtXfpbyJ/2TAeoX+bGw6voGfaickWA+la8VJ/r+Kxt/axg69FVTlyZaAA6nIaZkRiIIFFmW8V9R6hZ3nGbj3FOAMsH4k7byvlNckjvvgzA1rdXT5n7Qw+3PyRvm/aUgmwBJGDt+yBceD/hmk4r3i1isNsmdPiM8gGouDWmV0Hz2OTx2Fp6UgxQcQlQ2gcY1mJrfX71zviGAismPzTLJi0iLHwSAwwSpF6pXAyVaj29aUJxfwe0dU5tVSG9K/KElye2/jAmyiejB6PZ5IMyfs63upVYL8noFo/vKZEfGv4SXBIizxte26Vuqh09dyKxzh4UfVTxxCgvMo35zJHQ/ckeNEqXKGUT/GqBZQBiQAvkJng5TNPt1PypcDq8svQo37QXPEEnx3eXlq/XJ5KvWuebIVLO5QVMSxkjgCu8c4cUEMgEGtGeykfCVB+7t+ySGoaYQkA7OGh6uvwSpSW95E/384IIF91iD721aL3XoLgH542sf4Xf8n8VfwHQCvgodZ0hJQAAAABJRU5ErkJggg==")
background-repeat: no-repeat;
background-position: 10px center;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
}
/*######## Smart Green ########*/
.smart-green {
width: 600px;
margin-right: auto;
margin-left: auto;
background: #FFF;
padding: 30px 30px 20px 30px;
box-shadow: rgba(194, 194, 194, 0.7) 0 3px 10px -1px;
-webkit-box-shadow: rgba(194, 194, 194, 0.7) 0 3px 10px -1px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.smart-green h1 {
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 20px 0px 20px 40px;
display: block;
margin: -30px -30px 10px -30px;
color: #FFF;
background: #9DC45F;
text-shadow: 1px 1px 1px #949494;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-bottom:1px solid #89AF4C;
}
.smart-green h1>span {
display: block;
font-size: 11px;
color: #FFF;
}
.smart-green label {
display: block;
margin: 0px 0px 5px;
}
.smart-green label>span {
float: left;
margin-top: 10px;
color: #5E5E5E;
}
.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
color: #555;
height:24px;
width: 96%;
padding: 3px 3px 3px 10px;
margin-top: 2px;
margin-bottom: 16px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
font: normal 14px/14px Arial, Helvetica, sans-serif;
}
.smart-green textarea{
height:100px;
padding-top: 10px;
}
.smart-green select {
background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width:100%;
height:30px;
}
.smart-green .button {
background-color: #9DC45F;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-border-radius: 5px;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
text-shadow: 1px 1px 1px #949494;
}
.smart-green .button:hover {
background-color:#80A24A;
}
}
.div1{
position: relative;
top:20px;
left:30px;
}
input.intal {
/*width: 80px!important;*/
height 20px!important;
font-size: 0.7em;!important;
}
textarea.textar{
width: 540px;
}
</style>
<script type="text/javascript">
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#cerere-form").validate({
rules: {
marca: "required",
tipvar: "required",
nrident: {
number: true
},
nume: {
required: true,
minlength: 4
},
telefon: {
number: true,
required: true,
minlength: 4
},
email: {
required: true,
email: true
},
anfab: {
number: true
},
cil: {
number: true
},
putere: {
number: true
},
textar: {
required: true,
minlength: 4
}
},
messages: {
marca: "Campul 'Marca' trebuie sa fie completat.",
tipvar: "Campul 'Marca' trebuie sa fie completat.",
nrident: {
number: "Acest camp trebuie sa contin date numercie."
},
nume: {
required: "Campul 'Nume/Prenume' trebuie sa fie completat.",
minlength: "Acest camp trebuie sa contina minim 4 caractere."
},
telefon: {
number: "Campul 'telefon' trebuie sa fie completat.",
required: "Acest camp trebuie sa contin date numercie.",
minlength: "Acest camp trebuie sa contina minim 4 caractere."
},
email: {
required: "Campul 'email' trebuie sa fie completat.",
email: "Campul 'email' trebuie sa contina un email valid."
},
anfab: {
number: "Acest camp trebuie sa contin date numercie."
},
cil: {
number: "Acest camp trebuie sa contin date numercie."
},
putere: {
number: "Acest camp trebuie sa contin date numercie."
},
textar: {
required: "Acest camp este necesar.",
minlength: "Acest camp trebuie sa contina minim 4 caractere."
}
},
submitHandler: function(form) {
$( "#putcontent" ).empty();
$.ajaxSetup({async: false});
$.get("ssemail/send.php",
{ marca: $("[name='marca']").val(),
tipvar: $("[name='tipvar']").val(),
nrident: $("[name='nrident']").val(),
nume: $("[name='nume']").val(),
telefon: $("[name='telefon']").val(),
email: $("[name='email']").val(),
anfab: $("[name='anfab']").val(),
putere: $("[name='putere']").val(),
cil: $("[name='cil']").val(),
carburant: $("[name='carburant']").val(),
textar: $("[name='textar']").val()
} , function(data,status){
$('#putcontent').append(data);
});
//form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
</script>
</head>
<body>
<div id="pag">
<form id="cerere-form" class="smart-green" method="post" >
<h1>Cerere rapida de piese Auto
<span>Campurile marcate cu asterix sunt obligatorii.</span>
<span>Procesarea dupa apasarea butonului de trimitere dureaza aproximativ 2-3 secunde.</span>
</h1>
<div id="putcontent"> &nbsp; </div>
<fieldset>
<h2 class="ht">Date automobil </h2>
<div class="fieldgroup">
<label for ="marca"><b>Marca* :</b></label>
<div class="div1"><input class="intal" name="marca" type="text" placeholder="Marca" /></div>
</div>
<div class="fieldgroup">
<label for ="tipvar"><b>Tipul Varianta* </b>:</label>
<div class="div1"><input class="intal" name="tipvar" type="text" placeholder="Tipul Varianta" /></div>
</div>
<div class="fieldgroup">
<label for ="nrident">Numar De Identificare :</label>
<div class="div1"><input class="intal" name="nrident" type="text" placeholder="Numar identificare" /></div>
</div>
<h2 class="ht">Date propietar </h2>
<div class="fieldgroup">
<label for ="nume"><b>Nume, Prenume* :</b></label>
<div class="div1"><input class="intal" name="nume" type="text" placeholder="ex: Ionut Popescu" /></div>
</div>
<div class="fieldgroup">
<label for ="telefon"><b>Telefon* :</b></label>
<div class="div1"><input class="intal" name="telefon" type="text" placeholder="ex: 0723XXXX42 " /></div>
</div>
<div class="fieldgroup">
<label for ="email"><b>Email* :</b></label>
<div class="div1"><input class="intal" name="email" type="text" placeholder="ex: andrei@XXXX.XXX" /></div>
</div>
<h2 class="ht">Detalii Automobil </h2>
<div class="fieldgroup">
<label for ="anfab">An fabricatie :</label>
<div class="div1"><input class="intal" name="anfab" type="text" placeholder="ex: 2006" /></div>
</div>
<div class="fieldgroup">
<div class="div1">
<label for ="putere">Putere :</label>
<input class="intal" name="putere" type="text" placeholder="ex: 70" /></div>
</div>
<div class="fieldgroup">
<div class="div1">
<label for ="cil">Cilindree :</label>
<input class="intal" name="cil" type="text" placeholder="ex: 60" /></div>
</div>
<div class="fieldgroup">
<label for ="carburant">Carburant :</label>
<div class="div1"><input class="intal" name="carburant" type="text" placeholder="ex: benzina" /></div>
</div>
<h2 class="ht">Cerere Piese*</h2>
<div class="fieldgroup">
<textarea class="textar" name="textar" placeholder="Doresc sa primesc oferta pentru urmatoarele piese:" ></textarea>
</div>
<div class="fieldgroup">
<input type="submit" value="Trimite Cerere" class="button" id="button" >
</div>
</fieldset>
</form>
</div>
</body>
</html>
2 Fisierul care utiliează clasa phpmailer :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Comanda Rapida</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<style type="text/css">
#cerere-form .fieldgroup label.error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
border-radius:.5em;
color: #D8000C;
background-color: #FFBABA;
background-image: url("data:image/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD60lEQVR42s2WW2gcVRiA///Mmb1mb1nNtrFNNQliEVQqglqSTY1GKOqDikofWrEvRUQRhL7ok770QUEwkvpU0AcpfaqX1mqTzfZCKUWtCFqxNWzb3BqTve9m5sz5/WdmTVNatVfwwGHOnjn///3XM4twiwf+bwA6L0NgJvtAlR3Q9lGRpeZNA1ijIAww36A7h3fowudg6PHtaOgPGaJvCkAfEt1qIT4m133RRXaJ1I8vnDXTzQHRr/+4YYDKoYHKeE9HtmyXq19GcixSE8NgqL07MOC8LfrJuSGAzot7VDWVk3ePdBCavGED2vOgzrw1KxO1AdGnf71ugJMHE2z5AcU2vYapIZjkgJBj0x1dVdQLB0gs7htG03mTvVDXBWDrH1CN9Khc807KIYCzPwvQyqaue8soqUFqaqQoI+UNnIuT1wzQhzCgm2InxZ/fYsTvAzJsOHPEAFI29KwvAloWONXfABvju0RQb2MvrGsD5MUjVj3zTWDN5jYkhWRacPqgCW6SeweLCIsW8Q+0JscqgWhxSGT1sasG6DyGVF18iumnnjNiGQ68DSAtmPiOAdqCux4vcnNY3r5TrQKVftgjo7SZvWheHSAnBpu1zi9DvdkQwCIhWAgcosKoW0UWdbEHpCxC0kgyA83fTzVDkcJGMaDH/hPA1ketIu4W6c6NZirMsQ8TGkEGSJg6HGEBpBX9NSQeSDaCmgZ7rkF6duHrQBJe5O6u/SvAGRNPN/5M7ImsLQX4OgASQCj4nACYyYXdI5R5rIFcVOwZ77sLClDtRNCOpGvPGoP6q38EsPXxxnljr9mb7JfpOXCVggH+051mS8LtXfpbyJ/2TAeoX+bGw6voGfaickWA+la8VJ/r+Kxt/axg69FVTlyZaAA6nIaZkRiIIFFmW8V9R6hZ3nGbj3FOAMsH4k7byvlNckjvvgzA1rdXT5n7Qw+3PyRvm/aUgmwBJGDt+yBceD/hmk4r3i1isNsmdPiM8gGouDWmV0Hz2OTx2Fp6UgxQcQlQ2gcY1mJrfX71zviGAismPzTLJi0iLHwSAwwSpF6pXAyVaj29aUJxfwe0dU5tVSG9K/KElye2/jAmyiejB6PZ5IMyfs63upVYL8noFo/vKZEfGv4SXBIizxte26Vuqh09dyKxzh4UfVTxxCgvMo35zJHQ/ckeNEqXKGUT/GqBZQBiQAvkJng5TNPt1PypcDq8svQo37QXPEEnx3eXlq/XJ5KvWuebIVLO5QVMSxkjgCu8c4cUEMgEGtGeykfCVB+7t+ySGoaYQkA7OGh6uvwSpSW95E/384IIF91iD721aL3XoLgH542sf4Xf8n8VfwHQCvgodZ0hJQAAAABJRU5ErkJggg==");
}
p.success, p.error{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
}
p.success {
color: #4F8A10;
background-color: #DFF2BF;
background: url("data:image/image/png;base64,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");
background-repeat: no-repeat;
background-position: 10px center;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
}
p.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url("data:image/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD60lEQVR42s2WW2gcVRiA///Mmb1mb1nNtrFNNQliEVQqglqSTY1GKOqDikofWrEvRUQRhL7ok770QUEwkvpU0AcpfaqX1mqTzfZCKUWtCFqxNWzb3BqTve9m5sz5/WdmTVNatVfwwGHOnjn///3XM4twiwf+bwA6L0NgJvtAlR3Q9lGRpeZNA1ijIAww36A7h3fowudg6PHtaOgPGaJvCkAfEt1qIT4m133RRXaJ1I8vnDXTzQHRr/+4YYDKoYHKeE9HtmyXq19GcixSE8NgqL07MOC8LfrJuSGAzot7VDWVk3ePdBCavGED2vOgzrw1KxO1AdGnf71ugJMHE2z5AcU2vYapIZjkgJBj0x1dVdQLB0gs7htG03mTvVDXBWDrH1CN9Khc807KIYCzPwvQyqaue8soqUFqaqQoI+UNnIuT1wzQhzCgm2InxZ/fYsTvAzJsOHPEAFI29KwvAloWONXfABvju0RQb2MvrGsD5MUjVj3zTWDN5jYkhWRacPqgCW6SeweLCIsW8Q+0JscqgWhxSGT1sasG6DyGVF18iumnnjNiGQ68DSAtmPiOAdqCux4vcnNY3r5TrQKVftgjo7SZvWheHSAnBpu1zi9DvdkQwCIhWAgcosKoW0UWdbEHpCxC0kgyA83fTzVDkcJGMaDH/hPA1ketIu4W6c6NZirMsQ8TGkEGSJg6HGEBpBX9NSQeSDaCmgZ7rkF6duHrQBJe5O6u/SvAGRNPN/5M7ImsLQX4OgASQCj4nACYyYXdI5R5rIFcVOwZ77sLClDtRNCOpGvPGoP6q38EsPXxxnljr9mb7JfpOXCVggH+051mS8LtXfpbyJ/2TAeoX+bGw6voGfaickWA+la8VJ/r+Kxt/axg69FVTlyZaAA6nIaZkRiIIFFmW8V9R6hZ3nGbj3FOAMsH4k7byvlNckjvvgzA1rdXT5n7Qw+3PyRvm/aUgmwBJGDt+yBceD/hmk4r3i1isNsmdPiM8gGouDWmV0Hz2OTx2Fp6UgxQcQlQ2gcY1mJrfX71zviGAismPzTLJi0iLHwSAwwSpF6pXAyVaj29aUJxfwe0dU5tVSG9K/KElye2/jAmyiejB6PZ5IMyfs63upVYL8noFo/vKZEfGv4SXBIizxte26Vuqh09dyKxzh4UfVTxxCgvMo35zJHQ/ckeNEqXKGUT/GqBZQBiQAvkJng5TNPt1PypcDq8svQo37QXPEEnx3eXlq/XJ5KvWuebIVLO5QVMSxkjgCu8c4cUEMgEGtGeykfCVB+7t+ySGoaYQkA7OGh6uvwSpSW95E/384IIF91iD721aL3XoLgH542sf4Xf8n8VfwHQCvgodZ0hJQAAAABJRU5ErkJggg==")
background-repeat: no-repeat;
background-position: 10px center;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
}
/*######## Smart Green ########*/
.smart-green {
width: 600px;
margin-right: auto;
margin-left: auto;
background: #FFF;
padding: 30px 30px 20px 30px;
box-shadow: rgba(194, 194, 194, 0.7) 0 3px 10px -1px;
-webkit-box-shadow: rgba(194, 194, 194, 0.7) 0 3px 10px -1px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.smart-green h1 {
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 20px 0px 20px 40px;
display: block;
margin: -30px -30px 10px -30px;
color: #FFF;
background: #9DC45F;
text-shadow: 1px 1px 1px #949494;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-bottom:1px solid #89AF4C;
}
.smart-green h1>span {
display: block;
font-size: 11px;
color: #FFF;
}
.smart-green label {
display: block;
margin: 0px 0px 5px;
}
.smart-green label>span {
float: left;
margin-top: 10px;
color: #5E5E5E;
}
.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
color: #555;
height:24px;
width: 96%;
padding: 3px 3px 3px 10px;
margin-top: 2px;
margin-bottom: 16px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
font: normal 14px/14px Arial, Helvetica, sans-serif;
}
.smart-green textarea{
height:100px;
padding-top: 10px;
}
.smart-green select {
background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width:100%;
height:30px;
}
.smart-green .button {
background-color: #9DC45F;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-border-radius: 5px;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
text-shadow: 1px 1px 1px #949494;
}
.smart-green .button:hover {
background-color:#80A24A;
}
}
.div1{
position: relative;
top:20px;
left:30px;
}
input.intal {
/*width: 80px!important;*/
height 20px!important;
font-size: 0.7em;!important;
}
textarea.textar{
width: 540px;
}
</style>
<script type="text/javascript">
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#cerere-form").validate({
rules: {
marca: "required",
tipvar: "required",
nrident: {
number: true
},
nume: {
required: true,
minlength: 4
},
telefon: {
number: true,
required: true,
minlength: 4
},
email: {
required: true,
email: true
},
anfab: {
number: true
},
cil: {
number: true
},
putere: {
number: true
},
textar: {
required: true,
minlength: 4
}
},
messages: {
marca: "Campul 'Marca' trebuie sa fie completat.",
tipvar: "Campul 'Marca' trebuie sa fie completat.",
nrident: {
number: "Acest camp trebuie sa contin date numercie."
},
nume: {
required: "Campul 'Nume/Prenume' trebuie sa fie completat.",
minlength: "Acest camp trebuie sa contina minim 4 caractere."
},
telefon: {
number: "Campul 'telefon' trebuie sa fie completat.",
required: "Acest camp trebuie sa contin date numercie.",
minlength: "Acest camp trebuie sa contina minim 4 caractere."
},
email: {
required: "Campul 'email' trebuie sa fie completat.",
email: "Campul 'email' trebuie sa contina un email valid."
},
anfab: {
number: "Acest camp trebuie sa contin date numercie."
},
cil: {
number: "Acest camp trebuie sa contin date numercie."
},
putere: {
number: "Acest camp trebuie sa contin date numercie."
},
textar: {
required: "Acest camp este necesar.",
minlength: "Acest camp trebuie sa contina minim 4 caractere."
}
},
submitHandler: function(form) {
$( "#putcontent" ).empty();
$.ajaxSetup({async: false});
$.get("ssemail/send.php",
{ marca: $("[name='marca']").val(),
tipvar: $("[name='tipvar']").val(),
nrident: $("[name='nrident']").val(),
nume: $("[name='nume']").val(),
telefon: $("[name='telefon']").val(),
email: $("[name='email']").val(),
anfab: $("[name='anfab']").val(),
putere: $("[name='putere']").val(),
cil: $("[name='cil']").val(),
carburant: $("[name='carburant']").val(),
textar: $("[name='textar']").val()
} , function(data,status){
$('#putcontent').append(data);
});
//form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
</script>
</head>
<body>
<div id="pag">
<form id="cerere-form" class="smart-green" method="post" >
<h1>Cerere rapida de piese Auto
<span>Campurile marcate cu asterix sunt obligatorii.</span>
<span>Procesarea dupa apasarea butonului de trimitere dureaza aproximativ 2-3 secunde.</span>
</h1>
<div id="putcontent"> &nbsp; </div>
<fieldset>
<h2 class="ht">Date automobil </h2>
<div class="fieldgroup">
<label for ="marca"><b>Marca* :</b></label>
<div class="div1"><input class="intal" name="marca" type="text" placeholder="Marca" /></div>
</div>
<div class="fieldgroup">
<label for ="tipvar"><b>Tipul Varianta* </b>:</label>
<div class="div1"><input class="intal" name="tipvar" type="text" placeholder="Tipul Varianta" /></div>
</div>
<div class="fieldgroup">
<label for ="nrident">Numar De Identificare :</label>
<div class="div1"><input class="intal" name="nrident" type="text" placeholder="Numar identificare" /></div>
</div>
<h2 class="ht">Date propietar </h2>
<div class="fieldgroup">
<label for ="nume"><b>Nume, Prenume* :</b></label>
<div class="div1"><input class="intal" name="nume" type="text" placeholder="ex: Ionut Popescu" /></div>
</div>
<div class="fieldgroup">
<label for ="telefon"><b>Telefon* :</b></label>
<div class="div1"><input class="intal" name="telefon" type="text" placeholder="ex: 0723XXXX42 " /></div>
</div>
<div class="fieldgroup">
<label for ="email"><b>Email* :</b></label>
<div class="div1"><input class="intal" name="email" type="text" placeholder="ex: andrei@XXXX.XXX" /></div>
</div>
<h2 class="ht">Detalii Automobil </h2>
<div class="fieldgroup">
<label for ="anfab">An fabricatie :</label>
<div class="div1"><input class="intal" name="anfab" type="text" placeholder="ex: 2006" /></div>
</div>
<div class="fieldgroup">
<div class="div1">
<label for ="putere">Putere :</label>
<input class="intal" name="putere" type="text" placeholder="ex: 70" /></div>
</div>
<div class="fieldgroup">
<div class="div1">
<label for ="cil">Cilindree :</label>
<input class="intal" name="cil" type="text" placeholder="ex: 60" /></div>
</div>
<div class="fieldgroup">
<label for ="carburant">Carburant :</label>
<div class="div1"><input class="intal" name="carburant" type="text" placeholder="ex: benzina" /></div>
</div>
<h2 class="ht">Cerere Piese*</h2>
<div class="fieldgroup">
<textarea class="textar" name="textar" placeholder="Doresc sa primesc oferta pentru urmatoarele piese:" ></textarea>
</div>
<div class="fieldgroup">
<input type="submit" value="Trimite Cerere" class="button" id="button" >
</div>
</fieldset>
</form>
</div>
</body>
</html>
