Formulár prispôsobiteľnej spätnej väzby: Ako vytvoriť online? Ako vytvoriť krásny formulár Pop -up Form Form HTML a PHP s telefónom a odoslanie objednávky pomocou e -mail?

Pokyny na vytvorenie formulára spätnej väzby na HTML a CSS, ako aj zbierka pripravených formulárov a sprievodcu na ich pripojenie a konfiguráciu.

Dnes môže každá osoba, ktorá nemá ani programovacie zručnosti, ľahko vytvoriť svoju vlastnú stránku stiahnutím pripraveného šablóny zo siete a inštaláciou ju do použitého motora.

Nie každá pripravená šablóna však dokáže splniť požiadavky používateľa. Mnohé z nich sú zastúpené v „syrovej“ forme a nemajú také dôležité sekcie a funkcie, napríklad formulár spätnej väzby.

Tento blok stránok je mimoriadne dôležitý pre vlastníkov internetových obchodov a veľkých informačných portálov. V našom článku nájdete informácie o tom, ako nezávisle vytvoriť formulár spätnej väzby, kde si môžete stiahnuť dokončenú šablónu a ako ju nainštalovať na svoj web.

Obrázok 1. Čo je formulár spätnej väzby a prečo je to potrebné?

Čo je formulár spätnej väzby a prečo je to potrebné?

• Jednou z najdôležitejších funkcií akejkoľvek slušnej stránky je formulár spätnej väzby. Slúži na interakciu medzi návštevníkom a správou zdrojov. Takže s jej pomoci môžete napísať výzvu na technickú podporu alebo poslať potrebné údaje do správy. Napríklad podrobnosti platby v internetových obchodoch alebo názov objednaného tovaru. Dôrazne sa odporúča mať takúto formu na vašom portáli, pretože neustály kontakt s jeho návštevníkmi a zákazníkmi je kľúčom k jeho úspešnému vývoju.

Formulár spätnej väzby je samostatná stránka alebo blok (oddelenie), pozostávajúca z niekoľkých polí textového vstupu a tlačidla „Send“. Štandardný formulár má spravidla nasledujúce polia:

• Celé meno
• E-mail (e-mailová adresa)
• Číslo mobilného telefónu
• Adresy vašich stránok
• Pole pre zadanie textovej správy

Polia však môžu byť také, ako sa vám páči, a môžu sa podpísať tak, ako chcete. Všetko záleží na vašich potrebách a fantázii.

Obrázok 2. Čo je formulár spätnej väzby a prečo je to potrebné?

• Niektorí majitelia navyše pridávajú karty Google alebo Yandex do formulára spätnej väzby, formy zadávania stránok pomocou sociálnych sietí „vkoontakte“, „Facebook“, „Google+“ atď. Budeme však hovoriť o vytvorení najjednoduchšej formy spätnej väzby, pre ktorú budete potrebovať výlučne znalosti o základoch značkového jazyka Html A nič viac.

Ako vytvoriť najjednoduchší formulár spätnej väzby pre web na HTML a PHP?

Aby sme tento článok nezmenili na úplnú nudnú učebnicu, budeme postupovať zo skutočnosti, že už poznáte základy značkového jazyka Html A máte všeobecnú predstavu o tom, ako to funguje. Ak také zručnosti nemáte, pred nadviazaním formulára sa dôrazne odporúča trochu sprísniť vaše vedomosti na bezplatnom zdroji htmlbook.ru. V opačnom prípade môžete tento podnik nielen opustiť, ale tiež pokaziť kód vašej stránky.

Na vytvorenie pracovnej formy spätnej väzby potrebujete tri dôležité prvky, z ktorých jeden je zodpovedný za označenie a štruktúru formulára ( Html), druhý pre jeho externý dizajn ( CSS) a tretí na spracovanie a prenos údajov ( Php). Začnime v poriadku:

Písanie kódu HTML pre spätnú väzbu

• Krok 1. Na označenie formulára v Html Používa sa značka ‹Formulár› ‹/Form›. Vo vnútri bude nastavená veľkosť, štýly a ďalšie dôležité vlastnosti formy. Pri nahrávaní samotnej značky musí nastaviť triedu, ktorá bude označená, čo ďalej pomôže inštalovať pre formulár CSS Štýly.

Obrázok 1. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 2. Ďalej vytvorte prvé pole nášho formulára vo vnútri značky ‹Formulár› Musíte napísať blokovú značku ‹P›ktorý je zodpovedný za vytvorenie novej linky.

Obrázok 2. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 3. Vnútorná značka ‹P› Z nového riadku zadávame nasledujúcu značku: ‹Štítok pre \u003d" name "›názov ‹/Štítok›. Je zodpovedný za mená budúcej oblasti formy.

Obrázok 3. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 4. Na novom riadku je všetko v rovnakej značke ‹P› Predpisujeme značku vytvorenia poľa s nasledujúcimi hodnotami: ‹Typ input \u003d" Text »name \u003d" name "Senceonder \u003d"Zadajte svoje meno "Požadovaný \\\u003e. Parameter “ type \u003d "text"" Nastavuje typ textového poľa a parameter " zákonný symbol \u003d "Zadajte svoje meno «» Nastavuje počiatočný text v tomto veľmi textovom poli. Parameter “ pOŽADOVANÝ»Pre návštevníkovi stránky je jasné, že toto pole je povinné vyplniť. V dôsledku toho by ste mali získať formulár s jedným poľom, ako je to znázornené na snímke obrazovky nižšie.

Obrázok 4. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 5. Do vyššie uvedeného príklade pridajte zostávajúce polia, ktoré potrebujete, zakaždým, keď začína od značky ‹P›. Ak chcete inštalovať pole s textovou správou, použite značku ‹Name textarea \u003d" Message "cols \u003d" 50 ″ riadky \u003d "6 ″ požadované› ‹/textarea›. Možnosti " stĺpka„A“ riadok»Sú zodpovední za šírku a výšku textového poľa. Môžete nastaviť parametre, ktoré sa vám páčia viac. Mali by ste získať niečo také zobrazené na snímke obrazovky nižšie.

Obrázok 5. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 6. Ak sa chcete chrániť pred robotmi, ktoré sú dnes na internete dosť veľa, vytvorte si ďalšiu riadok so značkou ‹Vstupné name \u003d" bezspama "type \u003d" text »style \u003d" display: none "value \u003d" " /›. Kvôli parametru “ style \u003d "Display: None"»Toto pole nebude viditeľné iba smrteľníkmi, ale roboty budú automaticky vyplnené. Preto môžete vždy odlíšiť živú osobu od programu.

Obrázok 6. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 7. Poslednou fázou označenia bude vytvorenie tlačidla odosielania. Na to sa používa značka ‹Tlačidlo›. Vytvorte nový blok ‹P› A vo vnútri zadajte kód tlačidla s nasledujúcimi parametrami: ‹Tlačidlo triedu \u003d" odoslať "type \u003d" odoslať "›poslať správu ‹/Tlačidlo›. Podobný výsledok by sa mal ukázať, ako je znázornené na snímke obrazovky.

Obrázok 7. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

Práca s kaskádovými štýlmi (CSS)

• Ako ste si už všimli v procese označovania, ukázali sme niečo veľmi krivé, nedescript a nechutné. S cieľom poskytnúť spätnú väzbu viac alebo menej úhľadný vzhľad, jeden jazyk Html Nebude to stačiť. Na tento účel sa budete musieť uchýliť k používaniu štýlov CSS.
• V prípade, že ste využili rady na sprísnenie svojich základných zručností v zdroji htmlbook.ru, potom nastavte určité konštrukčné parametre pre všetky časti formulára pomocou CSS Nebude to pre vás ťažké. Ak nemáte túžbu alebo čas, aby ste sa s tým všetkým pokazili, poskytneme vám pripravený kód vyrobený a povieme vám, ako ho pripojiť.

Obrázok 8. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

Štýl CSS do Html Môžete dvoma spôsobmi:

• Skopírujte kód z našej kaskádovej tabuľky do spodnej časti súboru Štýl.cssktorý je prítomný na hosťovaní stránok
• Presuňte súbor nášho štýlu do svojho hostingu a pripojte ho

Podložka Štýl.css Pripája sa vo vnútri značky ‹Hlava› ‹/hlava› Pomocou skriptu ‹Link rel \u003d" StylesHeet "Media \u003d" Screen "href \u003d" Style.css "›. V prípade, že súbor so štýlmi leží v rovnakom priečinku ako hlavný súbor HTML, musíte zadať cestu k nemu. V našom súbore so štýlmi má každý prvok označenie. Ak si želáte, môžete zmeniť parametre pre seba, riadené iba základnými programovacími schopnosťami.

Pripojenie k súboru PHP a jeho nastavenie

Ako už bolo spomenuté, skript Php je zodpovedný za vykonanie formulára spätnej väzby. Aby však viac -menej pochopili zásadu jazykovej práce Php, musíte si prečítať veľký objem literatúry a stráviť slušný počet hodín na prax. Preto, ako v prípade CSS, poskytneme vám hotový súbor so skriptom PHP, ktorý bude musieť pripojiť k dokumentu iba s formulárom.

Na rozdiel od súboru Štýl.css, súbor so skriptom PHP je pripojený do vlastností samotného formulára. Začnime v poriadku:

• Krok 1. Otvorte predtým písomný kód a nájdite riadok so značkou otvoreného formulára. Pridajte k tomu vlastnosti “ action \u003d "contact-form.php"„A“ metóda \u003d "Post"„ Pozrite si príklad na snímke obrazovky.

Obrázok 9. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 2. Stiahnite si náš súbor PHP a umiestnite ho na hosting v rovnakom priečinku, kde sa nachádza dokument HTML. Súbory PHP a HTML teda budú navzájom interagovať.

Obrázok 10. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 3. Ďalej musíte sami nakonfigurovať skript. Otvorte súbor a nastavte premenné a priradte im rovnaké názvy ako v skripte HTML. Ak do formulára pridáte ďalšie polia, pridajte ich do skriptu PHP presne tak, ako je to znázornené na snímke obrazovky.

Obrázok 11. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 4. Ďalej musíte pridať ďalšie dve premenné s adresou vášho e -mailu a témy písmena, ktoré sa zobrazia vo vašom políčku. V riadku s premennou “ $ Adresa„Uveďte e-mail av riadku“ $»Téma listu je uvedená na snímke obrazovky.

Obrázok 12. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 5. V riadku s premennou “ $ MS»Formát listu, ktorý dostanete poštou, je nakonfigurovaný. Môžete ho prepísať nezmenené alebo upraviť svoj vlastný vkus.

Obrázok 13 Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

• Krok 6. Všetky ostatné riadky sú zodpovedné za odoslanie správy a obsahujú nastavenia ochrany proti robotom, takže musia zostať nezmenené. Výsledkom je, že celý kód by mal vyzerať niečo také zobrazené na snímke obrazovky nižšie.

Obrázok 14. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

Stiahnite si súbory CSS a PHP pre spätnú väzbu

Po vykonaní všetkých akcií na výstupe dostanete taký jednoduchý formulár spätnej väzby

Obrázok 15. Ako vytvoriť najjednoduchší formulár spätnej väzby pre stránku na HTML a PHP?

Výber krásnych dizajnových foriem spätnej väzby na HTML a CSS na rôzne účely

• Na základe vyššie uvedených pokynov môžete ľahko „nakresliť“ formulár spätnej väzby podľa vlastného vkusu. Ak však nemáte čas ani nechcete vytvoriť formulár od nuly sami, nájdete pripravené -vytvorené formuláre dizajnu na internete a máte základné zručnosti Html Upravte ich pre seba.

Obrázok 1. Výber krásnych dizajnových foriem spätnej väzby na HTML a CSS na rôzne účely

• Keď sme sa trochu prehľadali, našli sme pre vás výber 35 Krásne pop -upové dizajnérske formy spätnej väzby, ktoré sú napísané Html a CSS. Tieto formuláre sú vhodné pre motory, ako napríklad Slovník a JoomlaMajú jednoduché nastavenia a svetlo z ovládacieho panela a sú tiež ideálne pre miesta bez motora.

Stiahnite si výber dizajnérskych foriem spätnej väzby pre stránky

VIDEO: Readpress FAMPRAMED FOCKERFOCK spätná väzba