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: The post Pole v Contact form 7 ve dvou sloupcích appeared first on Geekblog.cz.
Your name * [text* your-name class:custom-contact-input] Your e-mail * [email* your-email class:custom-contact-input] Your phone * [text* your-phone class:custom-contact-input] Your message [textarea your-message class:custom-contact-te
projít na článekEcomail je česká platforma pro e-mailový marketing. Contact form 7 je oblíbené řešení pro kontaktní formuláře do WordPressu. To by jako stručný úvod do problematiky mohlo stačit:) Jak to propojit? Ještě na úvod zmíním, že pokud vám jde čistě jen o s
projít na článekName and surname * [text* your-name class:custom-contact-input] E-mail * [email* your-email class:custom-contact-input] Phone * [text* your-subject class:custom-contact-input] Number of persons * [text* your-persons class:custom-co
projít na článekName und Vorname * [text* your-name class:custom-contact-input] E-Mail * [email* your-email class:custom-contact-input] Telefon * [text* your-subject class:custom-contact-input] Anzahl der Personen * [text* your-persons class:custo
projít na článekChceš zažít přátelskou atmosféru v kolektivu, kde tě to bude bavit a kde hned uvidíš výsledky své práce? Pokud jsi manuálně zručný, rád komunikuješ se zákazníky a zvládáš práci na PC, jsi právě ten, koho hledáme. Co budeš mít pod palcem provádění p
projít na článek