Kontaktný formulár 7 je doplnok WordPress neuveriteľne populárne pri vytváraní kontaktných formulárov. Umožňuje vám vytvárať formuláre bez kódovania HTML. títo formuláre môže ponúkať funkcie ako CAPTCHA, sťahovanie súborov, polia prieskumu atď ...

Aj keď predvolený štýl kontaktného formulára 7 je dostatočný pre väčšinu základných kontaktných formulárov, musíte ho často zmeniť.

Týmto sa zmení predvolená štruktúra formulára, aby bola prístupnejšia. Pridáva tiež shortcode [responzívne] nad formulárom, takže ak sa vyskytne chyba pri odosielaní formulára, bude to uvedené na formulári.

Ak ste nikdy nevytvorili web WordPress, zistite to Ako nainštalovať blog WordPress s FTP klientom

Pre štandardný formulár je kód vygenerovaný doplnkom:

[odpoveď] Vaše meno (požadované) [text * vaše meno-meno: vaše-meno] Váš e-mail (povinné) [e-mail * vaše-e-mail ID: váš-e-mail] Váš predmet [text vaše-predmet ID: váš-predmet] Vaša správa [textarea your-message id: your-message] [send "Send"]

Niektoré zásuvné moduly prispôsobiť formulár Kontaktný formulár 7

1. Kontaktný formulár 7 Style

plugin Kontaktný formulár 7 Style má na výber niekoľko štýlov.

Pre používateľov témy Dvadsať pätnásť je k dispozícii aj kompatibilný štýl.

Ak chcete použiť štýl, prejdite na „ Kontaktovanie štýlov> Rýchle úpravy Skontrolujte formu, v ktorej chcete použiť štýl, a potom kliknite na „ aktualizovať ".

2. Kontaktný formulár Skiny 7

Ak chcete používať skiny Kontaktný formulár 7, vytvorte nový Kontaktný formulár a posuňte stránku nadol do časti Vzhľady. Môžete si vybrať šablónu a štýl pre svoj formulár.

Nájdete modely venované formámEVENEMENTS, registrácia a oznámenie.

Takto vyzerá forma prieskumu v štýle Topaz pomocou témy Dvadsať pätnásť.

3. Materiál pre kontaktný formulár

Tieto štýly sú založené na štýle materiál dizajn.

Tento doplnok navrhuje, aby ste vymazali predvolený formulár a použili jeho krátke kódy.

Tu je príklad s témou Hestia. Keď sa ukazovateľ presunie do poľa vo formulári, všimnite si plávajúci štítok.

Kontaktný formulár 7 test na niektorých Témy WordPress

Kontaktný formulár s témou WordPress ColorMag

Kontaktný formulár 7 väčšinou zdedí štýl vašej témy WordPress. Toto je prípad témy Coral tmavo.

Kontaktný formulár s témou WordPress ColorMag

Tu je formulár bez vlastného štýlu. Zdedí farbu modrého tlačidla Téma ColorMag WordPress.

Začal som nahraním fotografie, ktorá sa má použiť ako obrázok na pozadí formulára, a zmenou kódu štítkov formulára zo šedej na bielu s modrým tieňom na texte.

Nasledujúce zmeny mali zväčšiť okraje medzi štítkami formulárov a poľami formulára, upraviť tlačidlo odčítania a pridať orámovanie, keď ukazovateľ vstúpi do polí formulára.

Malo by sa tiež zmeniť zobrazenie chybových / úspešných správ pri odoslaní formulára, aby sa zobrazovali správne.

GIF rotujúci pri odoslaní formulára sa nezobrazil správne, našiel som alternatívu k načítaniu.io a odkazoval som na ňu pomocou CSS.

Výsledná forma:

Tu je kód:

div.wpcf7 {margin: 0; polstrovanie: 1.5em; pozadie: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-okraj-polomer: 3px; polomer okrajov: 3px; } .wpcf7 label, .wpcf7-submit {farba: biela; textový tieň: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: Hover {background: #186d8e; } .wpcf7-form-control: zaostrenie {okraj: 2px solid #289dcc; } div.wpcf7-response-output {pozadie: # F8F8F8; text-align: center; šírka: 92.5%; marža: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-okraj-polomer: 3px; polomer okrajov: 3px; } span.wpcf7-neplatný tip {background: # F8F8F8; zobrazenie: inline-block; šírka: auto; polstrovanie: 1%; -webkit-border-radius: 3px; -moz-okraj-polomer: 3px; polomer okrajov: 3px; } div.wpcf7 .ajax-loader {pozadie-obrázok: url ('your_loading_image_url_here'); šírka: 50px; výška: 50px; }

Ak kód nepotrebujete čmárať, odporúčame vám pozrieť sa na náš Doplnky 10 WordPress na vytvorenie kontaktného formulára na vašom blogu

Objavte tiež prémiové alternatívy 3, ktoré vám pomôžu vytvoriť vaše kontaktné formuláre. 

1. Kontaktný formulár W8

Kontaktný formulár W8 je jedným z doplnkov Kontaktný formulár najpopulárnejší na WordPress. Ponúka množstvo funkcií, ako je odoslanie viacerým príjemcom, podpora animácií, neobmedzená tvorba formulárov, rôzne štýly a široká škála ďalších možností prispôsobenia.

Okrem toho poskytuje vášmu webu alebo blogu profesionálny systém, ktorý uľahčuje kontakt s vašimi zákazníkmi. Budete mať možnosť prispôsobiť všetky svoje formuláre podľa svojich potrieb a vkusu.

Stiahnuť | demo | web hosting

2. Kontaktný formulár

Contact Us Form je responzívny doplnok WordPress a jednoduchý nástroj, ale bohatý na možnosti prispôsobenia, ktorý vám umožňuje zobraziť jasný a povzbudzujúci formulár, v ktorom vás môžu návštevníci kontaktovať zanechaním svojej správy.

Budete môcť definovať potrebné polia, zvoliť najlepšie rozloženie polí a úplne ich prispôsobiť, aby ste svojich zákazníkov alebo návštevníkov povzbudili, aby zanechali svoje návrhy alebo správy.

Stačí nastaviť e-mailovú adresu, na ktorú chcete dostávať správy, a pomocou nej môžete rozvinúť svoje podnikanie tým najziskovejším smerom.

Stiahnuť | demo | web hosting

3. Slick Popup Pro

Slick Popup Pro je a Rozšírenie WordPress pomerne jednoduchý a ľahký, ktorý konvertuje akúkoľvek formu vytvorenú doplnkom Kontaktný formulár 7 v popup. Používa tento formulár a prevádza ho na krásny a dokonale reagujúci popup.

Vyskakovací formulár môže mať niekoľko použití vrátane: formulára na zhromažďovanie informácií, a Kontaktný formulár, registračný formulár, formulár cenovej ponuky, formulár pre návrh / sťažnosť a ďalšie.

Stiahnuť | demo | web hosting

Odporúčané zdroje

Vyskúšajte ďalšie odporúčané zdroje, ktoré vám pomôžu lepšie vytvárať a spravovať kontaktné formuláre na vašom webe alebo blogu. 

• Zásuvné moduly 6 WordPress pre overenie prostredníctvom formulára CAPTCHA
• Ako pridať kontaktný formulár s WordPress Forma kontaktu 7
• Ako vytvoriť formuláre kompatibilné s GDPR v aplikácii WordPress

záver

Voila! To je všetko pre tento tutoriál, dúfam, že budete mať viac nápadov na prispôsobenie kontaktného formulára. Neváhaj zdieľať so svojimi priateľmi na obľúbených sociálnych sieťach. 

Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress.

Medzitým nám ale povedz niečo o svojom Komentáre a návrhy vo vyhradenej sekcii.

...