Personalizzare i campi di Contact Form 7

Question

Personalizzare i campi di Contact Form 7

18 gen 2013, 22:10:18

Visualizzazioni: 18.9K

Voti: 0

Stiamo utilizzando il plugin WordPress Contact Form 7 e vogliamo specificare la larghezza del campo Oggetto (supponiamo che la risposta si applichi anche all'impostazione della larghezza di qualsiasi campo) e spostare il campo Email accanto al campo Nome. Il risultato desiderato è avere Email e Nome sulla stessa riga, Oggetto a larghezza piena sotto e Messaggio sotto Oggetto. Grazie.

user26221

1

plugin contact form 7 css

Commenti

Senza ulteriori informazioni, questa sembra una domanda puramente su CSS, che sarebbe fuori tema secondo le [faq].

s_ha_dum

18 gen 2013 22:34:59

Contact Form 7 ti permette di inserire qualsiasi HTML necessario nei form, guarda la sua schermata di amministrazione. Inoltre: mostraci cosa hai provato. Al momento sembra una domanda off-topic su CSS, come ha detto @s_ha_dum.

chrisguitarguy

18 gen 2013 23:01:08

Conosco abbastanza bene il CSS, ma non sono riuscito a trovarlo nella pagina Aspetto/Editor. Né ho potuto trovare i file .php, quindi non avevo idea da dove iniziare. Vedo la schermata di amministrazione che contiene lo shortcode, ma non ho mai provato a modificare uno shortcode, quindi non sapevo dove trovarlo. Qualsiasi suggerimento mi aiuterebbe a sbloccarmi. Scusate se sono nel posto sbagliato. Pensavo di aver visto altre domande su Contact Form 7 qui.

user26221

19 gen 2013 04:27:33

Fornisci il tuo suggerimento CSS, ho utilizzato la funzione Strumenti/Sviluppatore web/Ispeziona di Firefox (così utile!) per almeno modificare la larghezza in modo che corrisponda al blocco dei commenti. Lo condivido qui per gli altri da utilizzare:

user26221

19 gen 2013 04:35:11

/ Allarga il campo di input nel form / input[type="text"], textarea { width:80%

user26221

19 gen 2013 04:35:53

Tutte le risposte alla domanda

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

Non l'ho provato, ma provalo tu stesso:

Contact Form 7 utilizza qualcosa del genere:

<p>Il tuo nome (obbligatorio)<br />
    [text* your-name] </p>

Invece di usare il tag paragrafo (<p>) usa span (<span>), e un po' di CSS inline, come:

<span style="width: 48%; float: left; position: relative;">Il tuo nome (obbligatorio)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">La tua email (obbligatorio)<br />
    [email* your-email] </span>

width: 48% ti permetterà di gestire i margin. Poi usa un <div> per pulire il float da tutti i lati:

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

Poi gli altri codici:

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

<p>Il tuo messaggio<br />
    [textarea your-message] </p>

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

Quindi l'intero blocco di codici sarà:

<span style="width: 48%; float: left; position: relative;">Il tuo nome (obbligatorio)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">La tua email (obbligatorio)<br />
    [email* your-email] </span>
<div style="clear:both;"></div>

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

<p>Il tuo messaggio<br />
    [textarea your-message] </p>

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

NON DIMENTICARE DI CAMBIARE GLI SLUG SPECIFICI COME your-email, your-subject IN BASE AGLI ID DEL TUO MODULO DI CONTATTO.
Buon codice!

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

Molto più semplice della risposta precedente:

aggiungi classi ai tuoi campi di input nel form builder - [text* your-name class:your-name]

Poi stilizzalo nel tuo file CSS.

Esempio:

#wpcf7-f613-p57-o1 form .your-name {width:48%;} - Dove #wpcf7-f613-p57-o1 è l'id del form su cui stai lavorando.

Travis Pflanz

1.95K

29 gen 2013 07:59:02