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?! 
