Tipy a triky pro plugin Contact Form7

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.

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">Jméno a příjmení:*[text* text-53]</div>
<div class="column-half">E-mail:* [email* email-497]</div>
</div>


<div class="form-row">
<div class="column-full">Vaše zpráva:[textarea your-message]</div>
</div>

<div class="form-row">
<div class="column-full">[submit "Odeslat"]</div>
</div>

</div><!--end responsive-form-->

#responsive-form{
	max-width:800px /*-- změnit šířku pro vlastní potřebu --*/;
	margin:0 auto;
  width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .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: 50%;
	}
}

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: