Tutoriál: Ako vytvoriť responzívny e-mailový formulár s využitím jQuery a kaskádových štýlov

Ako si vytvoriť responzívny e-mailový formulár s využitím jQuery a CSS

Mailový formulár patrí k najčastejšie používaným elementom vo webových stránkach. Na jeho tvorbu a správne fungovanie potrebujeme okrem jazyka HTML a kaskádových štýlov CSS aj skriptovací jazyk. Dá sa použiť serverový napr. PHP alebo klientsky napr. ActionScript. V tomto článku sa budeme venovať tvorbe formulára v HTML 5 a jeho úpravy pomocou kaskádových štýlov. V nasledujúcom článku spojazdníme jeho funkčnosť pomocou skriptovacieho jazyka PHP.

Vzhľadom na skutočnosť, že v súčasnosti väčšina používateľov si prezerá internetový obsah na iných zariadeniach ako je klasický počítač či notebook (tablet, smartfón), vytvoríme responzívny formulár, ktorý sa bude prispôsobovať veľkosti obrazovky zobrazovacieho zariadenia.

Formulár je na webovej stránke schovaný. Po kliknutí na odkaz sa zobrazí v samotnom okne pri stmavení pozadia. Tento efekt vytvoríme pomocou jQuery.


Zdrojový kód formulára v HTML:

<body>
<section id="top-panel"><a id="kontakt" class="modalbox" href="#inline">Web Mail Form</a></section>
<script type="text/javascript">
	$(document).ready(function() {
		$(".modalbox").fancybox();

	});
</script>

<section id="inline">
	 <section id="form-left">
	     <header id="form-title"><img src="napiste-nam.png" alt="napíšte nám"></header>
	     <article id="form-popis">
		   <p>Kontaktujte nás prostredníctvom e-mailového formulára alebo 
                   na dole uvedených telefónnych číslach.</p>
             </article>
         <article id="form-contact">
             <h3>StromoStav, s.r.o.</h3>
             <em>Mliečna dráha 1</em> 
             <em>040 00 Košice </em>
             <em>ičo: 12 345 678</em>
             <em>e-mail: info(at)stromostav.sk</em>
             <em>url: www.stromostav.sk</em>
             <em>tel.: +421 904 123 456 </em>
         </article>
     </section>

     <section id="form-right">
	    <form action="#" method="post" id="form-mail">
    	  <p>
            <input type="text"  name="name"  class="txt" placeholder="Vaše meno" autofocus required>         	
            <input type="email" name="email" class="txt" placeholder="Váš e-mail" required>	
          </p>
          <p>
        	<textarea name="obsah" class="area" placeholder="Váš text" required></textarea>
          </p>
          <p>
        	<input type="submit" name="submit" value="odošli e-mail" class="btn">
          </p>
        </form>
     </section>
</section>
</body>

Vysvetlenie niektorých elementov a atribútov:

action - atribút, ktorý určuje cestu k súboru so skriptom na spracovanie údajov z formulára
autofocus - automatické zameranie kurzora

required - povinné pole, musíme ho vyplniť

placeholder - predpísaný text

input type text - textové pole


Kaskádové štýly:

@charset "utf-8";
/* CSS Document */

body {
  	  background:#f4f4f4 url(bg.gif) repeat top left;

}

/*..............................top panel.....................................*/
#top-panel {
	        width: 150px;
			margin: auto;
			padding: 20px;
			background: #333;
 		    border-radius: 5px;
			text-align: center;
			

}
#top-panel #kontakt {
	                 text-decoration: none;
					 color: #666;
					 font-family: Verdana, Geneva, sans-serif;
					 font-size: 100%;
}
#top-panel #kontakt:hover {
	                       color: #999;
}




/*....................  formular  .......................*/
#inline { 
        display: none;
		width: auto;
		height: auto;
}
#form-left {
	        max-width: 400px;
			height: auto;
			float: left;
}
#form-right {
	        max-width: 400px;
			height: auto;
			float: right;
}
#form-title img {
	             max-width: 100%;
				 border: none;
}
#form-popis, #form-contact {
	                        max-width: 300px;
			                color: #333;
			                font-family: Verdana, Geneva, sans-serif;
			                font-size: 90%;
							line-height: 20px;
}
#form-contact h3 {
	              padding: 0;
				  margin: 0;
}
#form-contact em {
	              font-style: normal;
				  font-size: 100%;
				  display: block;
}
#form-mail .area {
	             width: 98%;
 			     min-height: 250px;
			     color: #333;
			     font-family: Verdana, Geneva, sans-serif;
			     font-size: 90%;
}
#form-mail .txt {
	             width: 95%;
				 padding: 5px;
				 margin-bottom: 10px;
				 color: #333;
			     font-family: Verdana, Geneva, sans-serif;
			     font-size: 90%;
}
#form-mail .txt:focus, .area:focus {
	                                background: #FF6;
									color: #333;
}
#form-mail .btn {
	             width: 150px;
				 height: 30px;
				 background: #900;
				 color: #FFF;
			     font-family: Verdana, Geneva, sans-serif;
				 -moz-border-radius: 5px;
                 -webkit-border-radius: 5px;
                 border-radius: 5px;			 
}

/*..................RESPONSIVE CSS............................*/

@media only screen and (max-width: 800px) {
#inline { 
        display: none;
		width: 100%;
		height: auto;
}
#form-left, #form-right {
	        width: auto;
			height: auto;
			float: none;
			margin: auto;
}
 

Použitie jQuery:

Formulár nebude na stránke hneď zobrazený. Po kliknutí na odkaz sa zobrazí pomocou okna, ktoré sa otvorí súčasne so stmavením pozadia. Takémuto oknu hovoríme fancybox. Aby to fungovalo správne, potrebujeme pripojiť k stránke, na ktorej budeme fancybox používať jQuery knižnicu a šablónu s CSS. Linky sú umiestnené v hlavičke head.

<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/fancybox/jquery.fancybox.js?v=2.0.6"></script>

Ďalším krokom je vloženie JavaScriptu, ktorý zabezpečí, že po kliknutí na odkaz Web Mail Form sa náš skrytý formulár zobrazí pomocou fancyboxu. Tento kód je potrebné vložiť v časti body ma webovej stránke, a to buď pred alebo po kóde formulára. My ho umiestnime pred formulár súčasne s kódom pre odkaz:

<section id="top-panel"><a id="kontakt" class="modalbox" href="#inline">Web Mail Form</a></section>
<script type="text/javascript">
	$(document).ready(function() {
		$(".modalbox").fancybox();

	});
</script>

Tento kód zatiaľ len zapíšeme. jQuery sa budeme podrobne venovať v samostatnej sérii článkov a tutoriálov.
Výsledky:





Rubriky: 
Priložiť súbor: