Pole v Contact form 7 ve dvou sloupcích

23. 7. 2024

V tomto článku najdete návod na plugin Contact form 7 a dva sloupce v kontaktním formuláři. Contact form 7 je nejstahovanější plugin v redakčním systému WordPress pro vytváření kontaktních formulářů. Často je hezčí v kontaktním formuláři rozmístit pole do dvou sloupců. To ale bohužel plugin Contact form 7 ve svém nastavení neumožňuje. V základu rozmisťuje Contact form 7 pole pouze pod sebou.

Některé šablony pro WordPress ve svém CSS kódu již mají formulář rozdělený do dvou sloupců. Pokud ale toto vaše šablona neumožňuje, můžete si pole v Contact form 7 rozdělit do dvou sloupců sami. Tento postup bude fungovat nezávisle na tom, jakou šablonu budete ve WordPressu používat.

Contact form 7 a pole ve 2 sloupcích

V tomto příkladu uvedu kontaktní formulář, který bude obsahovat tato políčka:

  • Jméno a příjmení
  • Odkud jste (orientačně město)
  • Email
  • Telefon
  • Vaše zpráva
  • Odeslat zprávu

První dvě pole budou spolu na prvním řádku. Třetí a čtvrté pole bude na druhém řádku. Velké pole pro text s názvem „Vaše zpráva“ ponechám samostatně na třetím řádku. Na čtvrtém řádku pak bude pouze tlačítko pro odeslání kontaktního formuláře.

První krok – Vložení HTML do Contact form 7

1) Vložte tuto HTML část do kontaktního formuláře v záložce „Formulář.

<div id=“formular-dva-sloupce“ class=“clearfix“>

<div class=“radek-formulare“>
<div class=“polovicni-sloupec“>[text* text-875 placeholder „Jméno a příjmení“]</div>
<div class=“polovicni-sloupec“>[text* text-723 placeholder „Odkud jste (orientačně město)“]</div>
</div>

<div class=“radek-formulare“>
<div class=“polovicni-sloupec“>[email* email-140 placeholder „Email“]</div>
<div class=“polovicni-sloupec“>[tel* tel-728 placeholder „Telefon“]</div>
</div>

<div class=“radek-formulare“>
<div class=“cely-sloupec“>[textarea textarea-125 placeholder „Vaše zpráva“]</div>
</div>

<div class=“radek-formulare“>
<div class=“cely-sloupec“>[submit „Odeslat zprávu“]</div>
</div>

</div>

Samozřejmě pro plné fungování kontaktního formuláře je ještě třeba správně vyplnit záložku „Email“, kde napíšete text, do kterého přiřadíte proměnné. Dále doporučuji kontaktní formulář používat pouze přes SMTP a nikoli přes PHP mail funkci. To ale není tématem tohoto návodu.

Druhý krok – Vložení CSS kódu do šablony

2) Vložte tento CSS kód do šablony přes Vzhled > Přizpůsobit > CSS:

#formular-dva-sloupce{
  width:100%;
  margin:0 auto;
}
.radek-formulare{
width: 100%;
}
.polovicni-sloupec, .cely-sloupec{
float: left;
position: relative;
padding-left: 10px;
padding-right: 10px;
width:100%;
-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     box-sizing: border-box
}

.clearfix:after {
display: table;
content: „“;
clear: both;
}

/**—- pokud je sirka stranky 800px a vice nastavit polovicni sirku sloupce —–**/
@media only screen and (min-width: 800px) { 
.polovicni-sloupec{
width: 50%;
}
}

Výsledný kontaktní formulář pak může vypadat takto:

Pokud se stránky zobrazí na menší šířce okna než 800px, zobrazí se všechna pole opět v jednotlivých řádcích takto:

Napsat komentář