Kontaktní formulář 7 je plugin WordPress neuvěřitelně populární pro vytváření kontaktních formulářů. To vám umožní vytvářet formuláře bez kódování HTML. tito formuláře může nabídnout funkce jako CAPTCHA, stahování souborů, průzkumová pole atd ...

Přestože výchozí styl kontaktního formuláře 7 je dostačující pro většinu základních kontaktních formulářů, musíte jej často změnit.

Tím se změní výchozí struktura formuláře, aby byla přístupnější. Přidá také zkrácený [responzivní] nad formulářem, takže pokud dojde k chybě při odesílání formuláře, je to na formuláři uvedeno.

Pokud jste nikdy nevytvořili web WordPress, zjistěte to Jak nainstalovat blog WordPress s FTP klientem

Pro standardní formulář je kód vygenerovaný pluginem následující:

[odpověď] Vaše jméno (vyžadováno) [text * vaše jméno-jméno: vaše-jméno] Váš e-mail (povinné) [e-mail * vaše-e-mail ID: váš-e-mail] Váš předmět [text vaše-předmět ID: váš-předmět] Vaše zpráva [textarea your-message id: your-message] [odeslat "Odeslat"]

Některé pluginy přizpůsobte Kontaktní formulář 7

1. Kontaktní formulář 7 Style

plugin Kontaktní formulář 7 Style má na výběr několik stylů.

Pro uživatele tématu Dvacet patnáct je k dispozici také kompatibilní styl.

Chcete-li použít styl, přejděte na „ Styly kontaktů> Rychlé úpravy Zkontrolujte formulář, ve kterém chcete styl použít, a klikněte na „ Aktualizovat ".

2. Kontaktní formulář Skiny 7

Používat skiny Kontaktní formulář 7, Vytvoř nový kontaktní formulář a přejděte na stránce dolů do sekce Vzhledy. Můžete si vybrat šablonu a styl formuláře.

Najdete modely věnované formámEVENEMENTS, registrace a oznámení.

Takto vypadá formulář průzkumu se stylem Topaz pomocí motivu Dvacet patnáct.

3. Materiálové provedení pro kontaktní formulář

Tyto styly jsou založeny na stylu Materiálové provedení.

Tento plugin navrhuje, abyste odstranili výchozí formulář a použili jeho krátké kódy.

Zde je příklad s tématem Hestia. Při přesunutí ukazatele do pole ve formuláři si všimněte plovoucího štítku.

Kontaktní formulář 7 test na některých Témata WordPress

Kontaktní formulář s tématem ColorMag WordPress

Kontaktní formulář 7 většinou zdědí styl vašeho motivu WordPress. Toto je případ tématu Tmavý korál.

Kontaktní formulář s tématem WordPress ColorMag

Zde je formulář bez vlastního stylu. Zdědí barvu modrého tlačítka ColorMag WordPress téma.

Začal jsem nahráním fotografie, která se má použít jako obrázek na pozadí formuláře, a změnou kódu štítků formuláře ze šedé na bílou s modrým stínem na textu.

Následující změny měly zvýšit okraje mezi popisky formuláře a poli formuláře, změnit tlačítko Odečíst a přidat ohraničení, když ukazatel zadá pole ve formuláři.

Mělo by se také změnit zobrazení chybových / úspěšných zpráv při odeslání formuláře, aby se zobrazovaly správně.

GIF rotující při odeslání formuláře se nezobrazil správně, našel jsem alternativu k Loading.io a odkazoval na něj pomocí CSS.

Zde je výsledná podoba:

Zde je kód:

div.wpcf7 {okraj: 0; polstrování: 1.5em; pozadí: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-okraj-poloměr: 3px; okraj poloměru: 3px; } .wpcf7 label, .wpcf7-submit {barva: bílá; textový stín: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: přejet {background: #186d8e; } .wpcf7-form-control: zaostření {okraj: 2px solid #289dcc; } div.wpcf7-odezva-výstup {pozadí: #F8F8F8; text-align: centrum; šířka: 92.5%; okraj: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-okraj-poloměr: 3px; okraj poloměru: 3px; } span.wpcf7-neplatný tip {pozadí: # F8F8F8; zobrazení: inline-block; šířka: auto; polstrování: 1%; -webkit-border-radius: 3px; -moz-okraj-poloměr: 3px; okraj poloměru: 3px; } div.wpcf7 .ajax-loader {pozadí-obrázek: url ('your_loading_image_url_here'); šířka: 50px; výška: 50px; }

Pokud kód nepotřebujete čmárat, doporučujeme podívat se na náš Doplňky 10 WordPress k vytvoření kontaktního formuláře na vašem blogu

Objevte také prémiové alternativy 3, které vám pomohou vytvořit kontaktní formuláře. 

1. Kontaktní formulář W8

Kontaktní formulář W8 je jedním z pluginů kontaktní formulář nejoblíbenější na WordPressu. Nabízí mnoho funkcí, jako je odeslání více příjemcům, podpora animací, neomezené vytváření formulářů, různé styly a širokou škálu dalších možností přizpůsobení.

Navíc poskytuje vašemu webu nebo blogu profesionální systém, který usnadňuje kontakt s vašimi zákazníky. Budete moci přizpůsobit všechny své formuláře podle svých potřeb a vkusu.

Stáhnout | Demo | Web hosting

2. Kontaktujte nás

Contact Us Form je responzivní WordPress plugin a jednoduchý nástroj, ale bohatý na možnosti přizpůsobení, který vám umožní zobrazit jasný a povzbudivý formulář, ve kterém vás mohou návštěvníci kontaktovat zanecháním své zprávy.

Budete moci definovat potřebná pole, vybrat nejlepší rozložení polí a úplně je přizpůsobit, abyste povzbudili své zákazníky nebo návštěvníky, aby zanechali své návrhy nebo zprávy.

Stačí nastavit e-mailovou adresu, na kterou chcete přijímat zprávy, a použít ji k růstu vašeho podnikání nejziskovějším směrem.

Stáhnout | Demo | Web hosting

3. Slick Popup Pro

Slick Popup Pro je a Rozšíření WordPress poměrně jednoduchý a lehký, který převede jakoukoli formu vytvořenou pluginem Kontaktní formulář 7 v popupu. Používá formulář a převede jej do krásného a dokonale reagujícího okna.

Vyskakovací formulář může mít několik použití, včetně: formuláře pro shromažďování informací, a kontaktní formulář, registrační formulář, formulář nabídky, formulář pro návrh / stížnost a další.

Stáhnout | Demo | Web hosting

Doporučené zdroje

Podívejte se na další doporučené zdroje, které vám pomohou lépe vytvářet a spravovat kontaktní formuláře na vašem webu nebo blogu. 

• Zásuvné moduly 6 WordPress pro ověření pomocí formuláře CAPTCHA
• Jak přidat kontaktní formulář s WordPress Forma kontaktu 7
• Jak vytvořit formuláře kompatibilní s GDPR v aplikaci WordPress

Proč investovat do čističky vzduchu?

Voila! To je vše pro tento tutoriál, doufám, že budete mít více nápadů, jak přizpůsobit svůj kontaktní formulář. Neváhej sdílet se svými přáteli na svých oblíbených sociálních sítích. 

Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress.

Ale mezitím nám pověz o svém commentaires a návrhy ve vyhrazené sekci.

...