Testreszabható visszacsatolási űrlap: Hogyan lehet online létrehozni? Hogyan készítsünk egy gyönyörű POP -UP visszacsatolási űrlapot HTML és PHP telefonnal, és küldjünk megrendelést E -Mail -rel?

Utasítások a visszacsatolási űrlap létrehozásához a HTML -en és a CSS -en, valamint a kész formák és útmutató gyűjteménye a csatlakoztatáshoz és a konfiguráláshoz.

Manapság minden olyan személy, aki még nem rendelkezik programozási készségekkel, könnyen létrehozhat saját webhelyét, ha letölt egy kész sablont a hálózatból, és telepíti azt a használt motorra.

Ugyanakkor nem minden kész sablon képes kielégíteni a felhasználó igényeit. Sokan „sajt” formában vannak ábrázolva, és nem rendelkeznek olyan fontos szakaszokkal és funkciókkal, mint például a visszacsatolási forma.

Ez a webhelyblokk rendkívül fontos az online áruházak és a nagy információs portálok tulajdonosai számára. Cikkünkben információkat talál arról, hogyan lehet önállóan létrehozni egy visszacsatolási űrlapot, hol lehet letölteni egy kész sablont, és hogyan telepítheti azt a webhelyére.

1. ábra: Mi a visszacsatolási forma és miért szükséges?

Mi a visszacsatolási űrlap, és miért szükséges?

• Bármely tisztességes webhely egyik legfontosabb funkciója a visszacsatolási forma. A látogató és az erőforrás -adminisztráció közötti interakcióra szolgál. Tehát a segítségével fellebbezést írhat a műszaki támogatáshoz, vagy elküldheti a szükséges adatokat a közigazgatásoknak. Például a fizetési részletek az online áruházakban vagy a megrendelt áruk nevében. Erősen ajánlott, hogy ilyen formában legyen a portálon, mivel a látogatókkal és az ügyfelekkel való állandó kapcsolat a sikeres fejlődés kulcsa.

A visszacsatolási űrlap külön oldal vagy blokk (osztály), amely a szövegbemenet több mezőjéből és a „Küldés” gombból áll. Általános szabály, hogy a standard forma a következő mezőkkel rendelkezik:

• Teljes név
• E-mail (e-mail cím)
• mobiltelefon szám
• A webhely címei
• Mező a szöveges üzenet megadásához

A mezők azonban annyira lehetnek, amennyit csak akar, és aláírhatók, ahogy tetszik. Minden az Ön igényeitől és a képzeletétől függ.

2. ábra: Mi a visszacsatolási forma és miért szükséges?

• Ezenkívül egyes tulajdonosok hozzáadják a Google vagy a Yandex kártyákat a visszacsatolási űrlaphoz, a webhely belépésének formáit a „Vkontakte”, a „Facebook”, a „Google+” és így tovább szociális hálózatokkal. De a visszajelzés legegyszerűbb formájának létrehozásáról fogunk beszélni, amelyhez kizárólag a jelölőnyelv alapjainak ismerete lesz szüksége Html És semmi több.

Hogyan lehet létrehozni a webhely legegyszerűbb visszacsatolási űrlapot a HTML -en és a PHP -n?

Annak érdekében, hogy a cikket ne alakítsuk ki egy teljes unalmas tankönyvbe, abból a tényből fakadunk, hogy már ismeri a jelölőnyelv alapjait Html És van egy általános elképzelésed arról, hogyan működik. Ha nincs ilyen képessége, mielőtt egy űrlap létrehozását készíti, akkor erősen ajánlott, hogy egy kicsit szigorítsa ismereteit egy ingyenes erőforrással htmlbook.ru- Ellenkező esetben nemcsak elhagyhatja ezt a vállalkozást, hanem elronthatja a webhely kódját is.

A visszajelzés működési formájának újjáépítéséhez három fontos elemre van szüksége, amelyek közül az egyik felelős az űrlap jelöléséért és felépítéséért ( Html), a második a külső kialakításához ( CSS) és a harmadik az adatok feldolgozására és továbbítására ( PHP). Kezdjük a sorrendben:

HTML -kód írása a visszajelzéshez

• 1. lépés- Annak jelzésére, hogy a forma be van -e jelölni Html A címkét használják ‹Form› ‹/forma›- Belül a beállítási méret, stílus és a forma egyéb létfontosságú tulajdonságai lesznek. A címke rögzítésekor be kell állítania egy osztályt, amely jelzi, amely tovább segít az űrlap telepítésében CSS Stílusok.

1. ábra.

• 2. lépés- Továbbá, hogy létrehozzuk űrlapunk első mezőjét a címke belsejében \u003cForma\u003e Block címkét kell írnia ‹P›amely felelős egy új vonal létrehozásáért.

2. ábra.

• 3. lépés- Belső címke ‹P› Az új sorból a következő címkét írjuk be: ‹Label for \u003d" név "›Név \u003c/Címke\u003e- Ő felel a jövőbeni formaterület nevéért.

3. ábra.

• 4. lépés- Az új vonalon minden ugyanabban a címkében van ‹P› Felírjuk a mező létrehozásának címkéjét a következő értékekkel: ‹Input type \u003d" text »name \u003d" name "plotholder \u003d"Adja meg nevét »Szükséges \\›- Paraméter " type \u003d "szöveg"" Beállítja a szövegmező típusát és a paramétert " helyőrző \u003d "Adja meg nevét «» Beállítja a kezdeti szöveget ebben a nagyon szövegmezőben. Paraméter " kÍVÁNT»A helyszíni látogató számára világossá teszi, hogy ez a mező kötelező a kitöltéshez. Ennek eredményeként kapjon egy űrlapot egy mezővel, amint az az alábbi képernyőképen látható.

4. ábra.

• 5. lépés- A fenti példával adja hozzá a fennmaradó mezőket, minden alkalommal, amikor a címkétől kezdve ‹P›- A szöveges üzenettel rendelkező mező telepítéséhez használja a címkét ‹Textarea name \u003d" üzenet "cols \u003d" 50 ″ rows \u003d "6 ″ szükséges›/textarea ›- Opciók " cols"És" és sorok»A szöveges mező szélességéért és magasságáért felelősek. Beállíthatja a jobban kedvelt paramétereket. Kapjon valami ilyesmit az alábbi képernyőképen.

5. ábra.

• 6. lépés- Annak érdekében, hogy megvédje magát a botoktól, amelyek ma elég sok az interneten, hozzon létre egy újabb sort a TAG -val ‹Input name \u003d" BezSpama "type \u003d" text »style \u003d" display: no "value \u003d" " /›- A paraméter miatt " style \u003d "Display: Nincs"»Ez a mező nem lesz látható a puszta halandók által, de a robotok automatikusan kitöltődnek. Így mindig megkülönböztetheti az élő embert a programtól.

6. ábra.

• 7. lépés- A jelölés utolsó szakasza a küldő gomb létrehozása lesz. A címkét ehhez használják \u003cGomb\u003e- Hozzon létre egy új blokkot ‹P› És benne írja be a gombkódot a következő paraméterekkel: ‹Button class \u003d" Submit "type \u003d" Submit "›üzenetet küldeni \u003c/Gomb\u003e- Hasonló eredménynek kell lennie, amint az a képernyőképen látható.

7. ábra.

Munka a lépcsőzetes stílusokkal (CSS)

• Ahogyan a jelölés folyamatában már észrevetted, kiderült, hogy valami nagyon görbe, nem író és undorító. Annak érdekében, hogy a visszajelzés többé -kevésbé szép megjelenést, egy nyelvet adjon Html Nem lesz elég. Erre a célra a stílusok használatát kell igénybe vennie CSS.
• Abban az esetben, ha kihasználta a tanácsadást az alapvető készségek megszorításához az erőforráson htmlbook.ru, majd állítson be bizonyos tervezési paramétereket az űrlap minden részére a használatával CSS Neked nem lesz nehéz. Ha nincs vágya vagy ideje, hogy összezavarja mindezt, akkor készen állunk egy kész kóddal, és elmondjuk, hogyan kell csatlakoztatni.

8. ábra.

Csatlakoztassa a stílusokat CSS nak nek Html Kétféle módon lehet:

• Másolja a kódot a lépcsőzetes táblázatból a fájl aljára style.cssamely a webhely tárhelyén található
• Mozgassa a stílusfájlunkat a tárhelyre, és csatlakoztassa azt

Irat style.css Csatlakoztatja a címkét ‹Head› ‹/fej› Szkript használata ‹Link rel \u003d" Stylesheet "média \u003d" screen "href \u003d" style.css "›- Abban az esetben, ha egy stílusú fájl nem ugyanabban a mappában fekszik, mint a fő HTML fájl, akkor meg kell határoznia az elérési utat. A stílusokkal ellátott fájlunkban minden elemnek megnevezése van. Ha szeretné, megváltoztathatja saját magának a paramétereket, csak az alapvető programozási készségek vezetésével.

PHP fájlkapcsolat és beállítása

Mint korábban említettük, a forgatókönyv PHP felelős a visszacsatolási űrlap végrehajtásáért. Annak érdekében azonban, hogy többé -kevésbé megértsék a nyelvi munka elvét PHP, el kell olvasnia egy nagy mennyiségű irodalmat, és tisztességes számú órát kell töltenie a gyakorlatra. Ezért, mint a CSS, Biztosítunk Önnek egy kész fájlt egy PHP szkripttel, amelyet csak a dokumentumhoz kell csatolnia az űrlapmal.

A fájltól eltérően style.css, egy PHP szkripttel rendelkező fájl csatolva van az űrlap tulajdonságaiban. Kezdjük a sorrendben:

• 1. lépés- Nyissa meg a korábban írt kódot, és keressen egy sort egy nyitott űrlapcímkével. Adjon hozzá tulajdonságokat " action \u003d "Contact-Form.php""És" és method \u003d "Post"". Nézze meg egy példát a képernyőképen.

9. ábra. Hogyan lehet létrehozni a webhely legegyszerűbb visszacsatolási űrlapot a HTML -en és a PHP -n?

• 2. lépés- Töltse le a PHP fájlt, és tegye a tárhelyre ugyanabban a mappában, ahol a HTML dokumentum található. Így a PHP és a HTML fájlok kölcsönhatásba lépnek egymással.

10. ábra.

• 3. lépés- Ezután konfigurálnia kell a szkriptet magának. Nyissa meg a fájlt, és állítsa be a változókat, és hozzárendelje őket, mint a HTML szkriptben. Ha további mezőket adott hozzá az űrlaphoz, akkor pontosan adja hozzá a PHP szkriptbe, ahogy a képernyőképen látható.

11. ábra. Hogyan lehet létrehozni a webhely legegyszerűbb visszacsatolási űrlapot a HTML -en és a PHP -n?

• 4. lépés- Ezután további két változót kell hozzáadnia az e -mail címéhez és a betű témájához, amely megjelenik a dobozán. Egy változóval rendelkező sorban " $ Cím"Jelölje meg az e-mailt, és a sorban" $ sub»A betű témája a képernyőképen látható.

12. ábra. Hogyan lehet létrehozni a webhely legegyszerűbb visszacsatolási űrlapot a HTML -en és a PHP -n?

• 5. lépés- Egy változóval rendelkező sorban " $ MS»A levél formátuma, amelyet e -mailben kap, konfigurálva van. Változatlanul átírhatja, vagy szerkesztheti saját ízlését.

13. ábra Hogyan lehet létrehozni a webhely legegyszerűbb visszacsatolási űrlapot a HTML -en és a PHP -n?

• 6. lépés- Az összes többi sor felelős az üzenet elküldéséért és a botok elleni védelem beállításainak visszatartásáért, ezért ezeket változatlanul kell hagyni. Ennek eredményeként a teljes kódnak valami ilyesmit kell kinéznie az alábbi képernyőképen.

14. ábra. Hogyan lehet létrehozni a webhely legegyszerűbb visszacsatolási űrlapot a HTML -en és a PHP -n?

Töltse le a CSS és a PHP fájlokat a visszajelzéshez

Miután elvégezte az összes műveletet a kimeneten, kap egy ilyen egyszerű, szép visszajelzési űrlapot

15. ábra. Hogyan lehet létrehozni a webhely legegyszerűbb visszacsatolási űrlapot a HTML -en és a PHP -n?

A HTML -ről és a CSS -ről származó visszajelzések gyönyörű tervezési formáinak kiválasztása különböző célokra

• A fenti utasítások alapján könnyen „rajzolhatja” a visszacsatolási űrlapot a saját ízlése szerint. Ha azonban nincs ideje vagy vágya, hogy a semmiből hozzon létre egy űrlapot, megtalálhatja az interneten kész tervezési űrlapokat, és alapvető készségekkel rendelkezik Html Szerkessze magának.

1. ábra.

• Miután egy kicsit kerestünk, találtunk egy választékot 35 Gyönyörű pop -up tervezési formák a visszajelzésekről, amelyekre írunk Html és CSS- Ezek a formák olyan motorok számára alkalmasak, mint például WordPress és JoomlaEgy egyszerű és fényes beállítással rendelkeznek a kezelőpanelről, és tökéletesek a motor nélküli helyekhez is.

Töltse le a helyszínek visszajelzési formáinak válogatott formáit

Videó: Readpress átdolgozott visszacsatolás visszacsatolás