Jak stylovat Contact form 7 formuláře ve WordPressu

jak-stylova-contact-form-7-nahled-760

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

Komentáře
  1. Andrea Ruzickova napsal:

    Ať hledám, jak hledám, tak na jednotlivých stránkách to fakt nemůžu najít. Tomáši, kde by to v OP na konkrétní stránce, kde mám vložený kont. formulář, mělo být?

  2. Andreo, nerozumím otázce. Na co se konkrétně prosím ptáte. Hledáte kam vložit ty styly? Pokud ano, tak na konkrétní stránce s formulářem – v LiveEditoru > PageSettings > Other Scripts – zde vyberete z roletového menu Custom CSS a do pole pod vložíte styl a dáte Update.

    Nebo jste se ptala na něco jiného?

  3. Vladimír Soukup napsal:

    Dobrý den, Tomáši,

    když vložím kód výše, edituje se mi ve formuláři pouze okno pro text (zprávu) a tlačítko. Ostatní pole editována nejsou. Kde dělám chybu? Moc díky za pomoc.
    Vladimír

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Vaše osobní údaje budou použity pouze pro účely zpracování tohoto komentáře. Zásady zpracování osobních údajů