Jak stylovat Contact form 7 formuláře ve WordPressu

Datum

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.

cf7-shortcode

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.

cf7

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ů.

cf7-custom-css

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: cf7-css Tak a to je vše. Nic složitého to nebylo, viďte?!

Další
články

Tento web používá k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte.