¿Cómo puedo estilizar un formulario?
Buenas,
monté un formulario asociado a una lista de distribución MailChimp en una página de contacto realizada con WordPress; en concreto, ésta: http://www.lluerna.cat/contacte Es el de la derecha, el de la izquierda ni caso.
El tema, como expuse en el soporte del plug-in (y con el que no obtuve respuesta alguna) es que necesito que las cajas de texto se posicionen debajo de los títulos (como está configurado en el otro formulario que aparece en la web).. pero no hay forma. Lo he mirado de mil maneras, por el plug-in, por los CSS i PHPs del plug-in, por el panel del mismo MailChimp.. y nada.
Intuyo que debería añadirse algún código en la capa que contiene el formulario, y que os pego a continuación, pero desconozco la fórmula.
Alguien puede echarme una mano?
<div id="mc_signup">
<form method="post" action="#mc_signup" id="mc_signup_form">
<input type="hidden" id="mc_submit_type" name="mc_submit_type" value="html" />
<input type="hidden" name="mcsf_action" value="mc_submit_signup_form" />
<input type="hidden" id="_mc_submit_signup_form_nonce" name="_mc_submit_signup_form_nonce" value="08d2176859" />
<div class="mc_form_inside">
Mil gracias. Saludos!
Creacionydiseño
Por lo que veo es un problema de css
En cada formulario utilizas css distintos.
Tienes que utilizar los mismos estilo para los dos formularios y así obtienes el mismo diseño.
Un saludo
Victor_Guerrero
A parte, uno de los formularios utiliza saltos <br> entre la etiqueta y el campo, que entiendo que es lo que quieres... ¿no?
chicote
Simplemente diseñando con CSS, pero es como todo: hay que saber lo que se quiere hacer.
Busca un formulario que te guste de otra web y cópialo.
Mophics
Puro Css Gerardus,
Ánimo.
Gerardus
Ok! Me queda claro :)
Gracias por las respuestas.
Gerardus
Bueno, aquí estoy de nuevo. Os paso unas líneas de código para ver si alguna alma caritativa puede echarme un cable. Recuerdo la página en cuestión: http://www.lluerna.cat/contacte
El formulario de la izquierda (el de referencia) tiene éste estilo en el style.css principal:
.ss-form {
font-size: .8em;
line-height: 1.5em;
padding: 0px;
margin-bottom: 10px;
}
Y el de la derecha, el que se resiste a ser estilizado, el siguiente:
.mc_form_inside {
font-size: .8em;
line-height: 1.5em;
padding: 0px;
}
Alguna idea? Aunque iguale los parámetros del segundo con el primero, no se comporta igual.
Por si sirve, el formulario de la izquierda, a su vez, tiene otro CSS asociado:
label.gform-error {float: right;
color: red;
font-weight: bold;
}
div.gform-google-error,
div.gform-browser-warning,
div.gform-browser-error {
-webkit-border-radius: 3px;
border-radius: 3px;
border-width: 1px;
border-style: solid;
padding: 0 .6em;
margin: 5px 0 15px;
}
div.gform-browser-warning {
background-color: #ffffe0;
border-color: #e6db55;
}
div.gform-google-error,
div.gform-browser-error {
background-color: #ffebe8;
border-color: #cc0000;
}
body.ss-base-body {}
div.errorbox-good {}
div.ss-attribution {}
div.ss-footer {}
div.ss-footer-txt, div.ss-logo {
display: none;
}
div.ss-form {}
div.ss-form-container {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
div.ss-form-desc {}
div.ss-form-entry {}
div.ss-form-entry>input {
background-color: #e0e0e0;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
div.ss-form-heading {}
div.ss-item {}
div.ss-legal {}
div.ss-navigate {}
div.ss-no-ignore-whitespace {
white-space: pre-wrap;
}
div.ss-required-asterisk {
color: red;
font-weight: bold;
}
div.ss-scale {}
div.ss-text {}
form#ss-form {}
h1.ss-form-title {}
hr.ss-email-break {}
input.ss-q-short {
width: 300px;
}
label.ss-q-help {
display: block;
}
label.ss-q-radio {}
label.ss-q-title {
font-weight: bold;
}
span.ss-powered-by {}
span.ss-terms {}
td.ss-gridnumber {}
td.ss-gridnumbers {}
td.ss-gridrow
td.ss-gridrow-leftlabel
td.ss-leftlabel {}
td.ss-rightlabel {}
td.ss-scalerow {}
td.ss-scalenumber {}
td.ss-scalenumbers {}
textarea.ss-q-long {
background-color: #e0e0e0;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
tr.ss-gridrow {}
Lo que comenta Victor_Guerrero es justo lo que busco, un salto <br> para el formulario de la newsletter. Pero dónde y cómo meterlo?
Gracias y saludos.
Gerardus
chicote
Créeme que el QUÉ lo tengo clarísimo, lo que me falla es el CÓMO.
Creacionydiseño
el salto «br» lo tienes que meter en el html seguido de del texto a separar.
es más sencillo que tocar css ya que va todo relacionado y es más complejo
imorente
.mc_var_label {
display: block;
}
.mc_merge_var {
margin-bottom: 20px;
}
Gerardus
imorente, mil gracias. Era justo lo que necesitaba!
Creacionydiseño, no puedo entrar el HTML ya que se trata de un campo dinámico llamado desde MailChimp y solo puede estilizarse, ya que el contenido no es editable directamente.
Creacionydiseño
Pues para que te quede mas parecido al de la izquierda le vendria bien un margin-top creo yo
.mc_var_label {
display: block;
margin-top:20px;
}