Contact Form 7 – záhada s formulářem

[wlashackParticipant Web]

Zdravím,
mám nainstalovaný plugin Contact Form 7 pro vytváření formulářů. Děje se mi podivná věc na této stránce. Všechna pole formuláře, která jsou typu “text” jsou ulítlá doprava. Netuším, jak je dostat doleva, poradíte?

Zde je kdyžtak kód toho formuláře, vytvořený v tom Contact Form 7 pluginu:

<p>Vaše jméno (vyžadováno)<br />
[text 1="your-name" language="*"][/text]</p>

<p>Váš email (vyžadováno)<br />
[email* your-email]</p>

<p>Telefon (vyžadováno)<br />
[tel* your-telefon]</p>

<p>Číslo kreditu (vyžadováno)<br />
[text 1="cislo-objednavky-kreditu" language="*"][/text]</p>

<p>Navrhněte tři termíny přijímací online schůzky (vyžadováno)</p>
[text 1="termin1" 2="placeholder" 3=""Termín" 4="1" 5="(den," 6="datum," 7="čas)"" language="*"][/text]</p>
[text 1="termin2" 2="placeholder" 3=""Termín" 4="2" 5="(den," 6="datum," 7="čas)"" language="*"][/text]</p>
[text 1="termin3" 2="placeholder" 3=""Termín" 4="3" 5="(den," 6="datum," 7="čas)"" language="*"][/text]</p>

<p>Poznámka<br />
[textarea your-poznamka placeholder "Chcete něco doplnit, vzkázat, zeptat se apod.?"]</p>

<p>[submit "Odeslat"]</p>

[AzifaralParticipant Web]

No jak to vzniklo nevím, ale odpověď je jednoduchá :) když se podíváte do style.css tak tam máte položku

.wpcf7 .wpcf7-form input[type=”text”], .wpcf7 .wpcf7-form input[type=”email”], .wpcf7 .wpcf7-form input[type=”url”], .wpcf7 .wpcf7-form input[type=”date”], .wpcf7 .wpcf7-form input[type=”number”], .wpcf7 .wpcf7-form input[type=”range”], .wpcf7 .wpcf7-form span.select, .wpcf7 .wpcf7-form span.file-input { width: 80%; max-width: 173px; float: right; }

A tam jak vidíte je float: right

Stačí odmazat

[wlashackParticipant Web]

Díky!

A ještě se zeptám – šlo by to udělat i bez přímého zásahu do toho css souboru? Abych třeba po updatu šablony nemusel myslet na to, že to zase musím změnit? Třeba vložením Custom CSS? To byste mi ale musel přesně napsat, já tohle znám jen teoreticky. :)

[AzifaralParticipant Web]

Samozřejmě ano, mě spíše trochu zaráží, jak se to tam dostalo, protože já osobně CF7 používám a nikdy jsem na podobnou záležitost nenarazil. Vám se takto ten CF7 formulář sám nastyloval po instalaci pluginu, bez jakéhokoliv vašeho zásahu?

Jinak co se týká Custom CSS, tak jsou v zásadě 3 možnosti.
1. Buď používáte child theme a tam vlastně vložíte ten upravený kód a pak i když uděláte update pluginu tak nedojde ke změně – nejčistější a nejelegantnější řešení.
2. Pak je druhá varianta, že ta šablona má přímo možnost zadávání Custom CSS, mnou používané šablony to mají, ale to je samozřejmě kus od kusu
3. Instalace pluginu např. Simple Custom CSS pak tam ten upravený kód vložíte.

[wlashackParticipant Web]

Mně se to takhle děje bez jakéhokoli mého zásahu. takže to je nejspíš je věcí šablony, je to první formulář, který tím dělám a i plugin Contact Form 7 byl v ceně šablony s tím, že šablona s ním nějak spolupracuje. Proto bych nerad do šablony sahal, ale řešil to na úrovni tohoto formuláře anebo toho Custom CSS.

Moje šablona umožňuje zadávání Custom CSS, už jsme tím několik úprav řešil, jen potřebuji vědět, co tam mám zadat, to sám nevymyslím.

[AzifaralParticipant Web]

No, vlastně stačí přepsat celý ten kus css a tím se to style přebije.

Takže buď dáte (pak tam nebude žádné zarovnání a on by se měl defaultně zarovnat vlevo podle toho článku jako takového)

.wpcf7 .wpcf7-form input[type=“text“], .wpcf7 .wpcf7-form input[type=“email“], .wpcf7 .wpcf7-form input[type=“url“], .wpcf7 .wpcf7-form input[type=“date“], .wpcf7 .wpcf7-form input[type=“number“], .wpcf7 .wpcf7-form input[type=“range“], .wpcf7 .wpcf7-form span.select, .wpcf7 .wpcf7-form span.file-input { width: 80%; max-width: 173px;}

případně (a tímto mu natvrdo řeknete, že je zarovnaný vlevo) – asi použijte toto

.wpcf7 .wpcf7-form input[type=“text“], .wpcf7 .wpcf7-form input[type=“email“], .wpcf7 .wpcf7-form input[type=“url“], .wpcf7 .wpcf7-form input[type=“date“], .wpcf7 .wpcf7-form input[type=“number“], .wpcf7 .wpcf7-form input[type=“range“], .wpcf7 .wpcf7-form span.select, .wpcf7 .wpcf7-form span.file-input { width: 80%; max-width: 173px; float: left; }

A právě, jak jsem se koukal, tak je to je přímo v tom style tagu od CF7, což právě trochu nechápu. A už vůbec to nechápu, že když se podíváte do toho css, tak tam je podmínkování na responzivitu v případě menšího rozlišení než 980px (tzn. pro tablety a mobily) je tam zarovnání natvrdo nalevo – zmenšete si prohlížeč a on se ten formulář zarovná korektně. Skoro mám pocit, že ten kód pro CF7 je uživatelsky upravený od toho výrobce šablony a on tam udělal chybu. Zkuste mu napsat.

[wlashackParticipant Web]

Moc díky, pomohl jste mi. Sice bohužel (nechápu proč) nepomohlo vložení Custom CSS do child šablony a musel jsem odstranit z style.css to float: right, takže nejsem 100% šťasný, ale jsem o 99% štastnější, než jsem byl.

Ještě jednou dík a autorům šablony o tom napíšu.

[SarkasParticipant]

Dobrý den,
mám stejný problém. Nainstalovala jsem si pro kontaktní formulář Contact form 7 a pořád se mi ukazuje červeně ohraničené chybové hlášení “Během odesílání zprávy nastala chyba, zkuste to prosím později”.
Jsem začátečník ve wordpressu, ale postupovala jsem podle videa, které vypadá jednoduše tj. po instalaci pluginu zkopírovat kod a pak vložit na stránku, kterou nazvu jako kontaktní formulář, do těla stránky.
Může mi prosím někdo poradit, co jsem udělala špatně? Případně ráda zašlu přístup či heslo k opravě. Děkuji moc!

web: http://www.agenturashark.cz/ e-mail: s.prochazkova1@seznam.cz

[AzifaralParticipant Web]

Dobrý den,

tipoval bych, že problém bude v tom, že máte u odesílatele OD nastavenou emailovou adresu s jinou doménou, než je web na kterém uvedený formulář běží. Tzn. že v položce OD máte např. [your-name] <s.prochazkova1@seznam.cz>, ale správně by tam mělo být něco jako [your-name] <s.prochazkova1@agenturashark.cz>. Ale jestli mohu doporučit jiný plugin na formuláře, tak použijte Caldera Forms. Je plně wysiwyg a tím pádem pro laika výrazně jednodušší i pokud by jste chtěla trošku složitější formulář.

[Autor]

Příspěvky