Modálny kontaktný formulár html. Čo je vyskakovací kontaktný formulár pre wordpress. Pluginy na inštaláciu kontextového formulára

Odosielanie správy

Tvoj email



Zadajte svoju správu
</ textarea ></p><p> <button id = "send" >Poslať email</ button ><br> </ form ><br> </ div ></p> </td> </tr></tbody></table><p>Pridajme do formulára dve polia – text správy a emailovú adresu odosielateľa, ako aj tlačidlo odoslať. Po tom, čo používateľ zadá e-mail, text správy a klikne na odoslať, najskôr skontrolujeme správnosť zadaných údajov, následne údaje odošleme do PHP skriptu pomocou ajax requestu.</p> <p>Formulár je spočiatku skrytý:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"> </td><td><p>#inline ( zobrazenie : žiadne ;)</p> </td> </tr></tbody></table><h3>Štýly formulárov</h3> <p>Niekoľko štýlov na zdobenie polí formulára a niekoľko tried použitých na polia, keď údaje nie sú zadané správne. Po odstránení chýb sa štýl polí stane normálnym.:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br></p> </td><td><p>TXT( <br>displej : inline-block ; <br>farba : #676767 ; <br>šírka: 420px <br><br>margin-bottom : 10px ; <br><br>padding : 5px 9px ; <br>veľkosť písma: 1,2em; <br>výška riadku: 1,4 em; <br>} </p><p>txarea( <br>displej : blok ; <br>zmena veľkosti: žiadna <br>farba : #676767 ; <br>font-family : Arial, Tahoma, bezpätkové ; <br>margin-bottom : 10px ; <br>šírka: 500px <br>výška: 150px; <br>orámovanie : 1px bodkovaný #ccc ; <br>padding : 5px 9px ; <br>veľkosť písma: 1,2em; <br>výška riadku: 1,4 em; <br>} </p><p>Txt: focus, <br>.txarea : focus( <br>okrajový štýl : pevný ; <br>border-color : #bababa ; <br>farba : #444 ; <br>} </p><p>input.error, <br>textarea.error( <br>border-color : #973d3d ; <br>okrajový štýl : pevný ; <br>pozadie : #f0bebe ; <br>farba : #a35959 ; <br>} </p><p>Input.error : focus , <br>textarea.error : focus( <br>border-color : #973d3d ; <br>farba : #a35959 ; <br>} </p> </td> </tr></tbody></table><p>Ak chcete navrhnúť tlačidlo "Odoslať", urobíme .:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br></p> </td><td><p>#poslať( <br>farba : #dee5f0 ; <br>displej : blok ; <br>kurzor : ukazovateľ ; <br>padding : 5px 11px ; <br>veľkosť písma: 1,2em; <br>orámovanie : plné 1px #224983 ; <br>border-radius : 5px ; <br>pozadie : #1e4c99 ; <br>background : -webkit-gradient(linear, left top , left bottom , from(#2f52b7 ) , to(#0e3a7d ) ) ; <br>pozadie : -moz-linear-gradient(top , #2f52b7 , #0e3a7d ); <br>pozadie : -webkit-linear-gradient(top , #2f52b7 , #0e3a7d ); <br>pozadie : -o-linear-gradient(top , #2f52b7 , #0e3a7d ); <br>pozadie : -ms-linear-gradient(top , #2f52b7 , #0e3a7d ); <br>pozadie : linear-gradient(top , #2f52b7 , #0e3a7d ); <br>filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#2f52b7" , endColorstr= "#0e3a7d" ) ; <br>} </p><p>#poslať : podržte kurzor myši ( <br>pozadie : #183d80 ; <br>background : -webkit-gradient(linear, left top , left bottom , from(#284f9d ) , to(#0c2b6b ) ) ; <br>pozadie : -moz-linear-gradient(top , #284f9d , #0c2b6b ) ; <br>pozadie : -webkit-linear-gradient(top , #284f9d , #0c2b6b ) ; <br>pozadie : -o-linear-gradient(top , #284f9d , #0c2b6b ) ; <br>pozadie : -ms-linear-gradient(top , #284f9d , #0c2b6b ) ; <br>pozadie : linear-gradient(top , #284f9d , #0c2b6b ); <br>filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#284f9d" , endColorstr= "#0c2b6b" ) ; <br>} </p><p>#poslať : aktívne ( <br>farba : #8c9dc0 ; <br>background : -webkit-gradient(linear, left top , left bottom , from(#0e387d ) , to(#2f55b7 ) ) ; <br>pozadie : -moz-linear-gradient(top , #0e387d , #2f55b7 ); <br>pozadie : -webkit-linear-gradient(top , #0e387d , #2f55b7 ); <br>pozadie : -o-linear-gradient(top , #0e387d , #2f55b7 ); <br>pozadie : -ms-linear-gradient(top , #0e387d , #2f55b7 ); <br>pozadie : linear-gradient(top , #0e387d , #2f55b7 ); <br>filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#0e387d" , endColorstr= "#2f55b7" ) ; <br>} </p> </td> </tr></tbody></table><h3>Efektná krabica</h3> <p>Prejdeme k tomu najzaujímavejšiemu, k použitiu pluginu. Voláme metódu .fancybox s triedou odkazu, ktorá funguje ako selektor:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"> </td><td><p>$(document).ready(function()( <br>$(".modalbox") <br>$("#kontakt" ) .submit (funkcia () ( return false ; ) ) ;</p> </td> </tr></tbody></table><p>Taktiež rušíme štandardnú akciu odoslania formulára, čo nám umožní použiť vlastnú ajax požiadavku. Pri volaní metódy som nepoužil viac ako jeden parameter, nechal som všetky predvolené hodnoty. Za zmienku však stoja:</p> <table><tr><td><b>názov</b> </td> <td><b>Popis</b> </td> </tr><tbody><tr><td><b>vypchávka</b> </td> <td>Odsadenie podľa obsahu v okne (predvolené 15 pixelov)</td> </tr><tr><td><b>marža</b> </td> <td>Vzdialenosť od okrajov prehliadača k oknu (predvolená hodnota 20 pixelov)</td> </tr><tr><td><b>šírka</b> </td> <td>Predvolená šírka pre obsah „iframe“ a „swf“. Tiež pre objekty „inline“, „AJAX“ a „HTML“, ak je „AutoSize“ nastavené na „false“. Môže byť numerický alebo "Automatický". (predvolené 800 pixelov)</td> </tr><tr><td><b>výška</b> </td> <td>Predvolená výška pre obsah „IFRAME“ a „SWF“. Tiež pre objekty „inline“, „AJAX“ a „HTML“, ak je „AutoSize“ nastavené na „false“. Môže byť numerický alebo "Automatický". (predvolené 600 pixelov)</td> </tr><tr><td><b>minWidth</b> </td> <td>Minimálna šírka okna (predvolená 100px)</td> </tr><tr><td><b>minVýška</b> </td> <td>Minimálna výška okna (predvolená hodnota 100 pixelov)</td> </tr><tr><td><b>maxWidth</b> </td> <td>Maximálna šírka okna (predvolená hodnota 9999 pixelov)</td> </tr><tr><td><b>maxHeight</b> </td> <td>Maximálna výška okna (predvolená hodnota 9999 pixelov)</td> </tr><tr><td><b>automatická veľkosť</b> </td> <td>Ak je "pravda", potom autoHeight a autoWidth sú tiež "true" (predvolená hodnota true)</td> </tr><tr><td><b>autoHeight</b> </td> <td>Ak je nastavené na „true“, „inline“, „AJAX“ a „HTML“ obsah bude mať výšku určenú automaticky (predvolená hodnota je nepravda)</td> </tr><tr><td><b>automatická šírka</b> </td> <td>Ak je nastavené na hodnotu „true“, „inline“, „AJAX“ a „HTML“ obsah automaticky zistí šírku (predvolená hodnota je nepravda)</td> </tr><tr><td><b>autoResize</b> </td> <td>Ak je nastavené na "true", veľkosť obsahu sa zmení podľa zmeny okna.</td> </tr><tr><td><b>autoCenter</b> </td> <td>Ak je nastavené na „true“, obsah bude vycentrovaný</td> </tr><tr><td><b>fitToView</b> </td> <td>Ak je nastavené na „true“, veľkosť okna sa pred otvorením zmení na veľkosť prehliadača (predvolená hodnota true)</td> </tr><tr><td><b>pomer strán</b> </td> <td>Ak je nastavené na „true“, zmena veľkosti je obmedzená pomerom strán (predvolená hodnota je nepravda)</td> </tr><tr><td><b>topRatio</b> </td> <td>vertikálne polohovanie. Ak je nastavená na 0,5, vzdialenosť k hornej a dolnej časti okna prehliadača bude rovnaká. Ak je 0, modal bude navrchu (predvolená hodnota 0,5)</td> </tr><tr><td><b>ľavý pomer</b> </td> <td>Podobný parameter len pre horizontálne umiestnenie (predvolená hodnota 0,5)</td> </tr><tr><td><b>rolovanie</b> </td> <td>Zobraziť posuvníky. Dá sa nastaviť na „auto“, „áno“, „nie“ alebo „viditeľné“ (predvolené nastavenie je automatické)</td> </tr><tr><td><b>wrapCSS</b> </td> <td>Vlastná trieda CSS</td> </tr><tr><td><b>šípky</b> </td> <td>Ak je nastavené na „true“, zobrazia sa navigačné tlačidlá (predvolená hodnota true)</td> </tr><tr><td><b>closeBtn</b> </td> <td>Ak je nastavené na "true", potom sa zobrazí tlačidlo na zatvorenie okna (predvolená hodnota true)</td> </tr><tr><td><b>zavrieťKlik</b> </td> <td>Ak je „pravda“, kliknutím na obsah sa okno zatvorí (predvolená hodnota je nepravda)</td> </tr><tr><td><b>ďalejKliknite</b> </td> <td>Ak je nastavené na "true", potom v galérii, keď kliknete na obsah, sa presunie na ďalší obrázok (predvolená hodnota je nepravda)</td> </tr><tr><td><b>koliesko myši</b> </td> <td>Ak je "pravda", potom je možné posúvať galériu pomocou kolieska myši (predvolená hodnota true)</td> </tr><tr><td><b>automatické prehrávanie</b> </td> <td>Ak je „pravda“, pri otvorení prvého prvku galérie sa spustí prezentácia (predvolená hodnota je nepravda)</td> </tr><tr><td><b>rýchlosť prehrávania</b> </td> <td>Rýchlosť prezentácie (predvolená 3 000 milisekúnd)</td> </tr><tr><td><b>predpätie</b> </td> <td>Počet miniatúr obrázkov pod hlavným obrázkom (predvolené 3)</td> </tr><tr><td><b>modálny</b> </td> <td>Ak je pravda, navigačné tlačidlo a tlačidlo zatvorenia budú zakázané (predvolená hodnota je nepravda)</td> </tr><tr><td><b>slučka</b> </td> <td>Ak je "pravda", potom v galérii po dosiahnutí konca začne znova (predvolená hodnota true)</td> </tr><tr><td><b>ajax</b> </td> <td>Možnosť ajax žiadosti</td> </tr><tr><td><b>iframe</b> </td> <td>Možnosť ovládania iframe</td> </tr><tr><td><b>swf</b> </td> <td>Možnosť ovládania obsahu swf</td> </tr><tr><td><b>kľúče</b> </td> <td>Môžete definovať klávesy na navigáciu v prezentácii</td> </tr><tr><td><b>smer</b> </td> <td>Smer navigácie</td> </tr><tr><td><b>posúvať Vonku</b> </td> <td>Ak je nastavené na "true", skript sa vyhne vytváraniu posuvníkov (predvolená hodnota true)</td> </tr><tr><td><b>index</b> </td> <td>Prepíše index počiatočnej skupiny (predvolená hodnota 0)</td> </tr><tr><td><b>typu</b> </td> <td>Prepíše typ obsahu. Podporované typy „image“, „inline“, „AJAX“, „IFRAME“, „SWF“ a „HTML“ (predvolená hodnota je null)</td> </tr><tr><td><b>href</b> </td> <td>Prepíše zdroj obsahu odkazom (predvolená hodnota je null)</td> </tr><tr><td><b>obsahu</b> </td> <td>Prepíše obsah, ktorý sa zobrazí (predvolená hodnota je null)</td> </tr><tr><td><b>titul</b> </td> <td>Prepíše názov, dá sa nastaviť na akýkoľvek HTML (predvolená hodnota je null)</td> </tr><tr><td><b>tpl</b> </td> <td>Objekt obsahujúci rôzne šablóny</td> </tr><tr><td><b>openEffect / <br>closeEffect / <br>ďalší efekt / <br>prevEffect</b> </td> <td>Animačný efekt pre akcie, možné hodnoty sú 'fade', 'fade', 'elastic', 'elastic'</td> </tr><tr><td><b>openSpeed ​​/ <br>closeSpeed ​​/ <br>nextSpeed ​​/ <br>prevSpeed</b> </td> <td>Rýchlosť animácie (predvolená 250)</td> </tr><tr><td><b>openEasing / <br>closeEasing / <br>nextEasing / <br>prevEasing</b> </td> <td>Metóda uvoľnenia pre každý typ prechodu (predvolený je výkyv)</td> </tr><tr><td><b>openOpacity/ <br>closeOpacity</b> </td> <td>Ak je nastavené na „true“, priehľadnosť sa zmení (predvolená hodnota je pravda)</td> </tr><tr><td><b>openMethod/ <br>closemethod/ <br>ďalšia metóda/ <br>prevMetóda</b> </td> <td>Efekt prechodu môže nadobúdať hodnoty „zoomIn“ / „zoomOut“ / „changeIn“ / „changeOut“</td> </tr><tr><td><b>rodič</b> </td> <td>Nadradený prvok v kontajneri. To je užitočné pre ASP.NET, kde je horný prvok „formulár“ (predvolené je telo)</td> </tr></tbody></table> <p>Použitie týchto možností je veľmi jednoduché, povedzme, že chceme zmenšiť výplň na obsah obsahu a výšku obsahu:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br></p> </td><td><p>$(".modalbox") <br>výplň: 0 <br>výška: 100 <br>} ) ; </p> </td> </tr></tbody></table><h4>Odosielanie správy</h4> <p>Pred odoslaním skontrolujeme správnosť zadaných údajov, správnosť zadanej e-mailovej adresy. Potrebujeme teda overovaciu funkciu. Použijeme regulárny výraz:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br></p> </td><td><p>function validateEmail(email) ( <br>varreg= <span>/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(\[(1,3)\.(1,3)\.(1, 3)\.(1,3)\])|((+\.)+(2,)))$/</span>; <br>vrátiť reg.test (e-mail) ; <br>} </p> </td> </tr></tbody></table><p>Posledným krokom je odoslanie správy. Sledujeme udalosť kliknutia na tlačidlo „Odoslať“:</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br></p> </td><td><p>$("#poslať" ) .on ("kliknúť" , funkcia () ( <br>var emailval = $("#email" ) .val () ; <br>var msgval = $("#msg" ) .val () ; <br>var msglen = msgval.length ; <br>var mailvalid = validateEmail(emailval) ; <br><span>// Skontrolujte, či je e-mailová adresa správna</span><br>if (mailvalid == false ) ( <br>$("#email" ) .addClass("chyba" ) ; <br>} <br>else if (mailvalid == true ) ( <br>$("#email" ) .removeClass ("chyba" ) ; <br>} <br><span>// Skontrolujte dĺžku správy</span><br>ak (msglen< 4 ) { <br>$("#msg" ) .addClass("chyba" ) ; <br>} <br>else if (msglen >= 4 ) ( <br>$("#msg" ) .removeClass ("chyba" ) ; <br>} </p> </td> </tr></tbody></table><p>Do prvých dvoch premenných vložíme údaje, ktoré používateľ zadal. Zistíme dĺžku správy ( msglen ) a overíme zadanú emailovú adresu ( mailvalid ). Ďalej skontrolujeme, či je premenná mailvalid false , potom bola e-mailová adresa zadaná nesprávne a tento vstup bude zvýraznený červenou farbou. Skontrolujeme aj počet zadaných znakov v texte správy, ak je menej ako 4 znaky, potom ukážeme, že ide o chybu (zadanie textu zvýraznite červenou farbou). $("#contact" ).serialize() , <br>úspech: funkcia(údaje)( <br>if (údaje == "pravda" ) ( <br>$("#contact" ).fadeOut("rýchlo" , funkcia () ( <br>$(toto ).predtým ( <span>"<strong>Úspešne! Vaša správa bola odoslaná :)</strong>" </span>) ; <br>setTimeout("$.fancybox.close()" , 1000 ); <br>} ) ; <br>} <br>} <br>} ) ; <br>} <br>} ) ; </p> <p>Ak sú obe polia zaškrtnuté, tak namiesto tlačidla „odoslať“ zobrazíme text, že sa správa odosiela. To dáva používateľovi potvrdenie, že obe polia sú overené a proces prebieha.</p> <p>Teraz požiadavka AJAX. Prvým parametrom požiadavky je typ prenosu dát (POST alebo GET). Ďalej zadajte obslužný súbor ( sendmessage.php ). Ďalším parametrom sú dáta (data), metódou serializácie pripravíme dáta vo formulároch na odoslanie na server.</p> <p>Ak dostaneme dobrú odpoveď zo servera (tieto údaje vytvoríme v súbore php), kontaktný formulár skryjeme a zobrazíme správu o úspešnosti odoslania. Používam SetTimeout() na to, aby sa modal nezatvoril okamžite, ale jednu sekundu po odoslaní údajov.</p> <h4>PHP skript</h4> <p>Údaje zadané používateľom pomocou jQuery posielame na sendmessage.php . V PHP formulár získame tieto údaje z poľa POST, vytvoríme formulár a odošleme správu. Ak bolo odoslanie úspešné, vráťte hodnotu true späť do jQuery, inak hodnotu false .</p> <p>V premennej $sendto uvádzame emailovú adresu, na ktorú sa budú listy posielať.</p> <table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br></p> </td><td><p>$sendto = "email@mail.ru" ; <br>$usermail = $_POST [ "e-mail" ] ; <br>$content = nl2br ($_POST [ "správa" ] ) ;</p><p>// Vytvorenie hlavičky listu</span><br>$predmet = <span>"Nová správa"</span>; <br>$headers = "Od: " . strip_tags ($usermail) . " <span>\r\n"</span>; <br>$headers .= "Odpoveď: " . strip_tags ($usermail) . " <span>\r\n"</span>; <br>$headers .= "Verzia MIME: 1.0 <span>\r\n"</span>; <br>$headers .= <span>"Typ obsahu: text/html;charset=utf-8 \r \n "</span>; </p><p>// Formovanie tela listu</span><br>$msg = <span>"<html><body style="font-family:Arial,sans-serif;">" </span>; <br>$msg .= <span>"<h2 style="font-weight:bold;border-bottom:1px dotted #ccc;">Nová správa</h2>\r\n"</span>; <br>$msg .= <span>"<p><strong>Od koho:</strong> " </span>. $usermail . "</p><span>\r\n"</span>; <br>$msg .= <span>"<p><strong>Správa:</strong> " </span>. $obsah. "</p><span>\r\n"</span>; <br>$msg .= "" ;</p><p>// poslať správu</span><br>if (@ mail ($sendto , $subject , $msg , $headers ) ) ( <br>echo "pravda" ; <br>) inak ( <br>echo "false" ; <br>} </p> </td> </tr></tbody></table><script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body></html> <p>Ahoj. V tejto lekcii vytvoríme úplný formulár <a href="https://rzdoro.ru/sk/program/ajax-vsplyvayushchaya-forma-obratnoi-svyazi-wordpress-forma-obratnoi-svyazi.html">spätná väzba</a> a zobrazí sa v modálnom okne kliknutím na tlačidlo na stránke. Túto lekciu som urobil sám, úplne od začiatku, len s použitím rámca jQuery a jedného malého JavaScriptu. Lekcia je veľmi zaujímavá, takže ju prosím neprechádzajte! Nižšie si môžete pozrieť ukážku formulára, ktorý som dostal, a tiež stiahnuť <a href="https://rzdoro.ru/sk/microsoft-office/proga-dlya-poiska-otkrytyh-ftp-kak-naiti-neobhodimye-faily-na.html">potrebné súbory</a> pre prácu:</p> <table style="width: 545px;" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td> </td> <td> </td> </tr></tbody></table><p><b>Krok 1.</b> <a href="https://rzdoro.ru/sk/network/lenovo-ideatab-s6000-h-usilenie-signala-3g-planshet-lenovo-ideatab-s6000-opisanie-obshchie.html">všeobecný popis</a> a ako funguje formulár spätnej väzby:</p> <p>Najprv vám poviem, aké súbory budeme potrebovať a v skutočnosti, prečo sú potrebné:</p> <ul><li><b>snímky</b>- priečinok, kde sú uložené všetky obrázky nášho formulára;</li> <li><b>index.html</b>- hlavný súbor "index", ktorý bude obsahovať tlačidlo na vyvolanie formulára spätnej väzby;</li> <li><b>kontakt.html</b>- súbor, ktorý obsahuje samotný formulár. Je to tento súbor, ktorý bude pripojený k modálnemu oknu;</li> <li><b>odoslať.php</b>- súbor obsluhy, ktorý posiela list;</li> <li><b>jquery.js</b>- základný rámec jQuery;</li> <li><b>style.css</b>- súbor s <a href="https://rzdoro.ru/sk/network/kakoe-rasshirenie-imeet-fail-tablic-kaskadnyh-stilei.html">kaskádové tabuľky</a>štýly pre našu formu.</li> </ul><p>Takže poďme ďalej a po poriadku... Práca formy bude <a href="https://rzdoro.ru/sk/iron/kommentarii-v-html-oformlyayutsya-sleduyushchim-obrazom-chto-takoe-kommentarii-v.html">nasledujúcim spôsobom</a>: Používateľ vstúpi na stránku, na ktorej sa nachádza tlačidlo na vyvolanie modálneho okna, klikne naň, následne sa zobrazí formulár, do ktorého návštevník zadá všetky údaje a text správy a odošle, následne je presunutý na stránku so správou o úspešnom alebo neúspešnom odoslaní listu. To je všetko a teraz začnime zostavovať náš formulár...</p> <p><b>Krok 2</b> Tlačidlo na zavolanie formulára.</p> <p>Takže to, naše <a href="https://rzdoro.ru/sk/beginners/html-otkryt-modalnoe-okno-sozdaem-modalnoe-okno-s-pomoshchyu-html5-i.html">modálne okno</a> sa objavil s formulárom, musíte to nejako urobiť. Na to nám stačí umiestniť na stránku obyčajné tlačidlo. Kód pre takéto tlačidlo je uvedený nižšie spolu so štýlmi, ktoré sú naň použité:</p> <p> <button type="button">Napíšte správu administrátorovi</button> <div class="overlay" id="overlay"> <div class="wrap"></div> </div> </p><p><b>Krok 3</b> Samotný formulár + nastavenia k nemu</p> <p>Teraz poďme zistiť, kde bude náš formulár spätnej väzby stále umiestnený. A bude to v súbore <b>kontakt.html</b>, ktorý sa už nachádza v zdrojovom kóde lekcie. <a href="https://rzdoro.ru/sk/entertainment/polovoi-muzhchiny-search-php-submit-forma-otpravki-dannyh-v-php-post-get-html.html">Tento formulár</a> pomerne malý, takže jeho kód umiestnim nižšie:</p><p> <h1 class="contact-title">Odoslanie správy administrácii:</h1> <form action="send.php" method="post"> <table> <tbody><tr> <th class="lable">*Názov:</th> <td class="input"><input name="name" size="40" maxlength="40" class="input" type="text"></td> </tr> <tr> <th class="lable">*E-mail:</th> <td class="input"><input name="email" size="40" maxlength="40" class="input" type="text"></td> </tr> <tr> <th class="lable">téma:</th> <td class="input"><input name="subject" size="40" maxlength="40" class="input" type="text"></td> </tr> <tr> <th class="lable">*Správa:</th> <td class="input"><textarea name="text_message" cols="40" rows="10" class="input">