Více než 1 milion aktivních uživatelů využívá jeden z nejoblíbenějších kontaktních formulářů pro WordPress. Jde o plugin Contact form 7 a v tomto článku vám ukáži, jak stylovat Contact form 7 formuláře ve WordPressu. Jedna z nevýhod Contact form 7 je ta, že po samotné instalaci pluginu dostanete pouze jednoduchý formulář, který nevypadá moc líbivě. Velkou výhodou ale je, že jej můžete snadno nastylovat pomocí CSS. Tak začneme Budu předpokládat, že jste si plugin Contact form 7 již nainstalovali a máte vytvořený svůj první formulář. Druhým krokem je vložit formulář na stránku. Zkopírujte si shortcode (zkrácený kód), který máte zobrazený u vašeho formuláře a vložte ho na stránku, kde chcete aby se vám formulář zobrazoval. Pro účely tohoto článku jsem vložil kontaktní formulář na stránku WordPressu a jak vidíte na obrázku, nevypadá moc dobře. Já jsem použil základní šablonu WordPressu. U vás v závislosti na použité šabloně může formulář vypadat trochu jinak. Je pravděpodobné, že si formulář přebere některé styly z vaší aktuální šablony. Všechny úpravy budeme provádět pomocí CSS a je několik možností jak to udělat. Je možno provádět úpravy uvnitř zdrojových souborů šablony nebo child theme. To mi přijde zbytečně složité a pro začátečníky vůbec. Já vám ukáži způsob, jak vše upravovat v prostředí WordPressu. Krok 1 Nainstalujte si plugin WP Add Custom CSS. To je plugin, díky kterému dokážete vkládat na každou stránku nebo do každého příspěvku ve WordPressu samostatně CSS styly. Po nainstalování a aktivování pluginu přibylo v editaci stránky nebo příspěvku nové pole s názvem Custom CSS. Právě sem můžete vkládat CSS styly a vyhnete se tak úpravám zdrojových souborů. Krok 2 Contact form 7 generuje přehledný a standardně kompilovaný kód pro své formuláře. Každý prvek ve formuláři má své ID a třídu s ním spojené. Každý kontaktní formulář používá CSS třídy .wpcf7, které použijeme pro stylování (úpravy) formuláře. /* UPRAVUJE TEXTOVÉ, EMAILOVÉ POLE A POLE PRO SAMOTNÝ TEXT (TEXTAREA) */ .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea { width: 90%; font-family: arial, verdana; border: 1px solid #ddd; color: #313131; border-radius: 3px; margin: 0; border-color: #ddd; background-color: #f5f5f5; background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1); background-repeat: repeat-x; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); } /* UPRAVUJE TEXTOVÉ, EMAILOVÉ POLE */ input[type=text], input[type=email], textarea, select { border: 1px solid #ccc; padding: 6px 4px; outline: 0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font: 14px HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif; color: #777; background: #fff; } /* UPRAVUJE TLAČÍTKO FORMULÁŘE */ .wpcf7-submit { outline: 0; display: block; border: 1px solid #3f5391; cursor: pointer; color: #ffffff; border-radius: 3px; line-height: 30px; height: 40px; width: 150px; background-color: #3f5391; } Výsledek pak s použitím tohoto CSS kódu vypadá takto: Tak a to je vše. Nic složitého to nebylo, viďte?!
Používáte na svých stránkách kontaktní formulář Contact form 7? Pokud ano, máte formulář zabezpečení? V dnešní době, kdy jsou čím dál častěji naše webové stránky napadány různými hackery a roboty pro rozesílání SPAMu, je hodně důležité mít web zabezpečený
projít na článekSnažíte se přihlásit do svého webu a WordPress stránka se stále aktualizuje a přesměrovává na přihlašovací formulář? Takhle se do administrace svého webu nedostanete. V tomto článku si ukážeme, jak vyřešit nejčastější problémy s obnovováním stránky a neus
projít na článekJednostránkový web Vytvořím profesionální webovou stránku (one-page) přes WordPress vč. veškerých napojení. V základní ceně za tento druh práce je implementace WordPress, homepage, jedna podstránka a základní nastavení SEO optimalizace pro vyhledávače.
projít na článekOpravy webů, aktualizace a správa webových stránek Právě jste našli svého partnera na WordPress. A to nejen na tvorbu webových stránek, ale i na marketing, servis a vše, co bude nový web potřebovat. Mezi nejčastější opravy webů ve WordPressu, které provád
projít na článekVidíte ve WordPressu chybu Briefly unavailable for scheduled maintenance. Check back in a minute.? V češtině toto sdělení znamená: Krátkodobě nedostupné pro plánovanou údržbu. Vraťte se za minutu. Tato chyba se obvykle objevuje po aktualizaci jádra, plugi
projít na článek