Personalizarea câmpurilor din Contact Form 7

Question

Personalizarea câmpurilor din Contact Form 7

18 ian. 2013, 22:10:18

Vizualizări: 18.9K

Voturi: 0

Folosim plugin-ul WordPress Contact Form 7 și dorim să specificăm lățimea câmpului pentru Subiect (presupunând că răspunsul se poate aplica pentru setarea lățimii oricărui câmp) și să mutăm câmpul "Email" lângă câmpul "Nume". Rezultatul dorit ar fi Email și Nume pe aceeași linie, Subiect pe toată lățimea dedesubt, iar Mesajul dedesubtul Subiectului. Mulțumim

user26221

1

formular contact 7 css

Comentarii

Fără informații suplimentare, aceasta pare a fi o întrebare pur de CSS, care ar fi în afara subiectului conform [faq]

s_ha_dum

18 ian. 2013 22:34:59

Contact form 7 vă permite să adăugați orice cod HTML aveți nevoie în formulare, verificați ecranul de administrare. De asemenea: arătați-ne ce ați încercat. Momentan, aceasta sună ca o întrebare în afara subiectului legată de CSS, așa cum a menționat @s_ha_dum.

chrisguitarguy

18 ian. 2013 23:01:08

Sunt destul de familiarizat cu CSS, dar nu am putut să-l localizez în pagina Aspect/Editor. Nici nu am găsit fișiere .php, așa că nu am știut de unde să încep. Văd ecranul de administrare care conține shortcode-ul, dar nu am încercat niciodată să modific un shortcode, așa că nu știam unde să-l găsesc. Orice sugestie m-ar ajuta să încep. Îmi cer scuze dacă sunt în locul nepotrivit. Am crezut că am văzut și alte întrebări despre Contact form 7 aici.

user26221

19 ian. 2013 04:27:33

Dă-ți sugestia de CSS, am folosit funcția Instrumente/Dezvoltator Web/Inspectare din Firefox (atât de utilă!) pentru a măcar schimba lățimea să se potrivească cu blocul de comentarii. O contribui aici pentru ca alții să o folosească:

user26221

19 ian. 2013 04:35:11

/ Lărgirea câmpului de introducere pe formular / input[type="text"], textarea { width:80%

user26221

19 ian. 2013 04:35:53

Toate răspunsurile la întrebare

Mayeenul Islam 12.9K · Answer 1 · 2013-01-19T07:53:25Z

Nu am încercat eu, dar poți încerca tu:

Contact Form 7 folosește ceva de genul acesta:

<p>Numele tău (obligatoriu)<br />
    [text* your-name] </p>

În loc să folosești tag-ul de paragraf (<p>), folosește span (<span>) și niște CSS inline, precum:

<span style="width: 48%; float: left; position: relative;">Numele tău (obligatoriu)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Email-ul tău (obligatoriu)<br />
    [email* your-email] </span>

width: 48% îți va permite să faci niște ajustări cu margin. Apoi folosește un <div> pentru a reseta float de pe ambele părți:

<div style="clear:both;"></div>

Apoi restul codurilor:

<p>Subiect<br />
    [text your-subject] </p>

<p>Mesajul tău<br />
    [textarea your-message] </p>

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

Deci întregul cod va fi:

<span style="width: 48%; float: left; position: relative;">Numele tău (obligatoriu)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Email-ul tău (obligatoriu)<br />
    [email* your-email] </span>
<div style="clear:both;"></div>

<p>Subiect<br />
    [text your-subject] </p>

<p>Mesajul tău<br />
    [textarea your-message] </p>

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

NU UITAȚI SĂ SCHIMBAȚI SLUG-URILE SPECIFICE CUM AR FI your-email, your-subject ÎN FUNCȚIE DE ID-URILE FORMULARULUI TĂU DE CONTACT.
Codare plăcută!

Travis Pflanz 1.95K · Answer 2 · 2013-01-29T07:59:02Z

Mult mai simplu decât răspunsul anterior:

adaugă clase câmpurilor de input în constructorul de formulare - [text* your-name class:your-name]

Apoi stilează-le în fișierul tău CSS.

Exemplu:

#wpcf7-f613-p57-o1 form .your-name {width:48%;} - Unde #wpcf7-f613-p57-o1 este ID-ul formularului la care lucrezi.

Travis Pflanz

1.95K

29 ian. 2013 07:59:02