Plugin Contact Form 7 patří k jednomu z nejoblíbenějších pluginů pro tvorbu kontaktních a poptávkových formulářů ve WordPress. Pro osobní i firemní tvorbu webových stránek si troufám tvrdit, že je nepostradatelný. Nicméně i on je nedokonalý a to především ve složitosti grafických úprav, zejména pak v možnosti nastavení polí vedle sebe.
Základní struktura kontaktního formuláře totiž umožňuje vkládat pole pouze pod sebe, což však není vždy zcela ideální, zejména pokud potřebujete, aby kontaktní formulář byl co nejmenší. V tomto článku vám však prozradím pár jednoduchých tipů, jak si můžete kontaktní formulář vytvořený pomocí pluginu Contact Form 7 přizpůsobit.
Contact Form 7 a 2 sloupce vedle sebe
Pokud chcete určitá pole v kontaktním formuláři mít VEDLE SEBE, můžete si pomoci tím, že před jednotlivé odkazy zadáte HTML kód pro úpravu stylu. Původní, přednastavený kód tedy můžete upravit např. takto:
Krok č.1 – Jednotlivé příkazy v původním zadání nahraďte těmito novými.
A takto bude vypadat výsledek úprav na webu:
Contact Form 7 a 3 sloupce vedle sebe
Pomocí stylování můžete jednoduše vytvořit v Contact Form 7 i 3 sloupečky vedle sebe. Postup je hodně podobný výše uvedenému, bude jen změna v CSS stylu.
Pro vytvoření 3 slpuců vedle sebe v Contact Form7 upravte opět pole ve formuláři dle vašich požadavků, např. jako je uvedeno v ukázce:
Krok č.1 – Tento kód můžete zkopírovat a jednoduše vložit do polí ve formuláři. Následně si upravíte jen jednotlivé položky.
<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-three">Jméno a příjmení:* [text* your-name] </div>
<div class="column-three">E-mail: [email* your-email] </div>
<div class="column-three">Telefon: [text* text-261] </div>
</div>
<div class="form-row">
<div class="column-three">Vyberte kurz*: [select* menu-700 include_blank "Raku kurz - č.1" "Raku kurz - č.2" "Točení na hrnčířském kruhu a volná tvorba - týdenní" "Točení na hrnčířském kruhu a volná tvorba - dvoudenní" "Točení na hrnčířském kruhu a volná tvorba - půldenní"]</div>
<div class="column-three">Zadejte datum*:[text* text-536]</div>
<div class="column-three">Počet osob:*[select* menu-70 include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]</div>
</div>
<div class="form-row">
<div class="column-full">Doplňující informace:[textarea your-message]</div>
</div>
<div class="form-row">
<div class="column-full">[submit "Odeslat"]</div>
</div>
</div><!--end responsive-form-->
Krok č.2 – Přidejte styly do CSS vaší šablony
Nyní do CSS stylu vaší šablony přidejte následující styl ( CSS styly šablony najdete v nabídce Vzhled – Editor – style.css (většinou je to hned první soubor, který se v Editoru nabídne)
Pokud je formulář příliš široký nebo naopak příliš úzký, změňte hodnotu ve druhém řádku max-width: z 800px na jinou (např. 500px, 1000px apod.)
#responsive-form{
max-width:800px /*-- změnit šířku pro vlastní potřebu --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-three .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
.column-half{
width: 33%; /*-- toto je šířka pro jeden sloupeče --*/;
}
}
A takto bude vypadat konečný výsledek upraveného kontaktního formuláře na webu:
8 komentářů
Zdravím super článek, pokouším se si vytvořit formulář na webu, ale chtěl bych aby formulář převzal stylování z aktuální šablony, jak by se toto dalo udělat? Mára
Dobrý den, nevím zda-li přesně rozumím, co máte na mysli. Uvedený postup rozdělí pole formuláře do dvou sloupečků, nemá ale vliv na styly uvedené v šabloně.
dobrý den. sice je to starší článek ale i tak doufám v odpověď. jakým způsobem změním barvu pozadí formuláře? mám na mysli pole kam se zadává text.
Dobrý den, toto musíte udělat pomocí CSS stylu. Pro rychlé vyhledávání můžete využít tlačítko F12, které Vám zobrazí konzoli pro vyhledávání CSS stylů. Ty je pak třeba v jednotlivých souborech editovat. Pro pozadí je třeba využít příkaz background.
Zdravím, snad se dočkám opdovědi. Jak to udělat v případě, že chci mít jedno pole normálně široké a pod ním dvě pole ve sloupcích, jak je tomu v ukázce?
Dobrý den, musíte do pole formuláře Contact Form 7 vložit kódy:
Class column-full určuje, že pole bude přes celý formulář, tj. dle Vašich slov "normálně široké". Class column-half určuje, že pole bude rozděleno na 1/2, tj. jeho šíře bude 50%. Tímto způsobem si můžete naformátovat další pole. Je ale důležité pak do CSS stylů šablony vložit kódy, které jsou v článku uvedeny, jinak formulář nebude fungovat.
Dobrý den, návštěvníci webu mi ve zprávě (poli TEXT) chtějí ENTERem udělat nový řádek a místo toho mi odešlou formulář v podobě „Dobrý den,“ Dá se nějak nastavit, aby se formulář odeslal pouze po stisku tlačítka ODESLAT a nikoliv po stisku tlačítka ENTER?
Dobrý den, to je velice zvláštní, takto se normálně formulář nechová. Zadání ENTER nemá vliv na odeslání formuláře (můžete klidně vyzkoušet u mě v sekci Kontakt). Nicméně zkuste doinstalovat plugin
Contact Form 7 Image Captcha a dát do formuláře ochranu proti spamu. Nejenže nebudou chodit spamové dotazy, ale navíc by formulář měl být odeslaný až po splnění podmínky, tj. výběru zadaného obrázku.