Estilizar campos de Contact Form 7

Question

Estilizar campos de Contact Form 7

18 ene 2013, 22:10:18

Vistas: 18.9K

Votos: 0

Estamos usando el plugin Contact Form 7 para WordPress y queremos especificar el ancho del campo de asunto (asumimos que la respuesta aplicaría para establecer el ancho de cualquier campo) y reubicar el campo "Tu Email" junto al campo "Tu Nombre". El resultado sería Email y Nombre en una línea, Asunto con ancho completo debajo, y Tu Mensaje debajo del Asunto. Gracias

user26221

1

plugin formulario de contacto 7 css

Comentarios

Sin más información, esto parece una pregunta pura de CSS, que estaría fuera de tema según el [faq]

s_ha_dum

18 ene 2013 22:34:59

Contact Form 7 te permite poner cualquier HTML que necesites en los formularios, revisa su pantalla de administración. También: muéstranos lo que has intentado. Ahora mismo esto suena como una pregunta de CSS fuera de tema, como dijo @s_ha_dum.

chrisguitarguy

18 ene 2013 23:01:08

Estoy bastante familiarizado con CSS, pero no pude encontrarlo en la página de Apariencia/Editor. Tampoco pude encontrar archivos .php, así que no tenía idea de dónde empezar. Veo la pantalla de administración que contiene el shortcode, pero nunca he intentado modificar un shortcode, así que no sabía dónde encontrarlo. Cualquier sugerencia me ayudaría a empezar. Disculpen si estoy en el lugar equivocado. Pensé que había visto otras preguntas sobre Contact Form 7 aquí.

user26221

19 ene 2013 04:27:33

Dame tu sugerencia de CSS, utilicé la función Herramientas/Desarrollador web/Inspeccionar de Firefox (¡tan útil!) para al menos cambiar el ancho para que coincida con el bloque de comentarios. Lo comparto aquí para que otros puedan usarlo:

user26221

19 ene 2013 04:35:11

/ Ampliar el campo de entrada en el formulario / input[type="text"], textarea { width:80%

user26221

19 ene 2013 04:35:53

Todas las respuestas a la pregunta

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

No lo he probado, pero puedes intentarlo tú mismo:

Contact Form 7 utiliza algo como esto:

<p>Tu Nombre (requerido)<br />
    [text* your-name] </p>

En lugar de usar la etiqueta de párrafo (<p>), usa span (<span>), y algún CSS en línea, como:

<span style="width: 48%; float: left; position: relative;">Tu Nombre (requerido)<br />
    [text* your-name] </span>

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

width: 48% te permitirá hacer algunos ajustes de margin. Luego usa un <div> para limpiar el float por todos lados:

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

Luego el resto del código:

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

<p>Tu Mensaje<br />
    [textarea your-message] </p>

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

Así que todo el código completo sería:

<span style="width: 48%; float: left; position: relative;">Tu Nombre (requerido)<br />
    [text* your-name] </span>

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

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

<p>Tu Mensaje<br />
    [textarea your-message] </p>

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

NO OLVIDES CAMBIAR LOS SLUGS ESPECÍFICOS COMO your-email, your-subject SEGÚN LOS IDs DE TU FORMULARIO DE CONTACTO.
¡Feliz codificación!

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

Mucho más simple que la respuesta anterior:

Agrega clases a tus campos de entrada en el constructor de formularios - [text* your-name class:your-name]

Luego dales estilo en tu archivo CSS.

Ejemplo:

#wpcf7-f613-p57-o1 form .your-name {width:48%;} - Donde #wpcf7-f613-p57-o1 es el ID del formulario con el que estás trabajando.

Travis Pflanz

1.95K

29 ene 2013 07:59:02