Formulario de Contacto de Blogger Personalizado (1)
Por defecto, el formulario de contacto tiene esta apariencia:
Pues haremos unos cambios para crear un formulario más compacto, como puedes ver en la imagen de abajo, con un estilo minimalista y fresco. Ideal para quienes vayan a colocarlo en una columna lateral o en una columna al fondo de la página. Te facilitaré dos opciones, la primera la conseguiremos con CSS, algunos cambios en el código del widget, y con la ayuda jQuery y un pequeño complemento (Javascript). La otra opción solo requerirá de CSS. No tendrás que editar el ancho del formulario ya que éste se adaptará al ancho del lugar donde lo coloques.
Bueno, ahora vayamos al grano y veamos cómo personalizar el formulario.
Opción 1. Usando Jquery
Usamos un atributo nuevo en HTML5 llamado "placeholder" con el cuál agregamos los textos de cada campo: "Nombre, Correo electrónico y Mensaje" respectivamente, luego, cuando el usuario hace click en el campo y empieza a teclear, desaparece el texto.
Dicho atributo es soportado por navegadores modernos incluyendo Internet Explorer 10. Pero no funciona en versiones antiguas de Internet Explorer, como Internet Explorer 9, es decir, no aparece el texto que se agrega como valor en el atributo, por lo tanto, será necesario usar un complemento de jQuery, mismo que en scriptiny.com nos facilitan, para que aparezca el texto colocado en dicho atributo, el cual desaparecerá al hacer click en el campo.
La apariencia del formulario la puedes ver a continuación en la imagen:
Nota: El tipo de fuente del título lo heredará de tu plantilla.
Y por supuesto puedes ver el widget en acción en el blog de la Demostración.
Cómo poner este estilo de formulario, paso a paso
- Agrega el gadget de Formulario de contacto. Esto lo haces seleccionando Diseño > Añadir gadget, después, seleccionas la pestaña "Más gadgets" y lo añades. Puedes ponerlo al final del blog, o en la columna lateral.
- Selecciona la pestaña Plantilla > Personalizar > Avanzado > Añadir CSS, y ahí en el cuadro agrega este CSS:
.contact-form-widget {
max-width:100% !important; font-size:16px;
}
.completo{width:100%;margin:0; padding:0;}
.medio, .medioa{float:left; width:49%;height:40px;margin:0; padding:0;}
.medioa{float:right;}
.contact-form-name, .contact-form-email{height:38px; line-height:38px;}
.contact-form-name, .contact-form-email,textarea.contact-form-email-message{
color:#444; max-width:100% !important;
background-color:#f1f1f1;
border-radius:2px;text-indent:8px;
padding:0;border:1px solid #ddd;
}
textarea.contact-form-email-message{overflow:auto;margin:10px 0 0 0; padding-top:12px;outline:none !important;}
.contact-form-email:hover, .contact-form-name:hover, textarea.contact-form-email-message:hover {border:1px solid #ddd !important; }
.form input:focus, textarea.contact-form-email-message:focus{
background-color:#eaeaea;
box-shadow: inset 0 1px 2px #ccc;
border:1px solid #cbcbcb !important;
outline:none !important;
}
.contact-form-button-submit{
width:80px;font-size:16px;height:40px;margin:9px 0 0 0; text-align:center;
border-radius: 2px;font-weight:bold;cursor:pointer}
.derecha{text-align:center}
::-webkit-input-placeholder {color: #6c6c6c;
}
:-moz-placeholder {
color: #6c6c6c;
}
::-moz-placeholder {
color: #6c6c6c;
}
:-ms-input-placeholder {
color: #6c6c6c;
}
- Desde el panel de Blogger, selecciona la pestaña "Plantilla", luego vas a "Editar HTML", y después selecciona el widget: "ContactForm1" de la lista desplegable de widgets que dice: "Ir al widget"
- Una vez que el editor te envíe al código del widget del formulario de contacto, selecciónalo con el mouse, lo eliminas y en su lugar pones el código que a continuación te facilito:
<b:widget id='ContactForm1' locked='false' title='Envíame un mensaje' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'> <data:title/> </h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <!-- data:contactFormNameMsg/--> <div class='completo'> <div class='medio'> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' placeholder='Nombre' rows='30' type='text' value=''/> <!--data:contactFormEmailMsg/--> </div> <div class='medioa'> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' placeholder='Correo Electrónico' rows='30' type='text' value=''/> <!-- data:contactFormMessageMsg/ --> </div> </div> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' placeholder='Mensaje' rows='8'> </textarea> <div class='derecha'> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> </div> <p/> <div style='text-align: center; max-width: 222px; width: 100%; margin-top:5px;'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:includable> </b:widget>
Asegúrate de eliminar el código del widget completo, en ocasiones se despliega al seleccionarlo. La clave está en ver que el código seleccionado contenga la parte que he resaltado de rojo, a continuación:
<b:widget id="ContactForm1" locked="false" title="Envíame un mensaje" type="ContactForm">...</b:widget>
- Luego, también estando en el editor, busca el script que contiene jQuery, que en tu plantilla se va a ver mas o menos así: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js' type='text/javascript'/> con la posible diferencia de que tengas otra versión y que en el código anterior he resaltado de rojo (versión 1.8.1). Una vez localizado el script con jQuery, pega inmediatamente después lo siguiente:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){if(!("placeholder"in document.createElement("input"))){$("input[placeholder], textarea[placeholder]").each(function(){var val=$(this).attr("placeholder");if(this.value==""){this.value=val}$(this).focus(function(){if(this.value==val){this.value=""}}).blur(function(){if($.trim(this.value)==""){this.value=val}})});$('form').submit(function(){$(this).find("input[placeholder], textarea[placeholder]").each(function(){if(this.value==$(this).attr("placeholder")){this.value=""}})})}});
//]]>
</script>
- Verifica en vista previa y si todo luce bien guarda los cambios en "Guardar plantilla".
¡Y listo!, ya habrás personalizado el formulario de contacto de Blogger.
Opción 2. Sin usar jQuery
Si no usas jQuery en tu plantilla, puede ser que usarlo solo para conseguir que el texto aparezca dentro de los campos en navegadores que no soporten el atributo placeholder, no sea la mejor opción para ti.
En tal caso, puedes usar el código CSS que facilito en el paso 2, y estarías personalizando los campos como el elemento textarea (el cuadro donde va el mensaje) . Ten en cuenta que tanto el campo para el nombre como el del correo electrónico no aparecerán uno al lado del otro.
También necesitarás eliminar algunas lineas de CSS que resalté de azul (del paso 2).
Posibles preguntas frecuentes
1. Me gustaría que el botón de enviar apareciera a la izquierda, ¿cómo lo hago?
Respuesta: Busca esta linea de CSS del código que facilito en el paso 2:
.derecha{text-align:center;}
Y cambia:
center por left.
2. Me gustaría que aparecieran los asteriscos en los textos de "Correo electrónico" y en "Mensaje", (que son los campos obligatorios) tal y como aparece en el formulario de contacto por defecto. ¿Cómo lo hago?
Referencias adicionales
Personalizar el Texto de "Placeholder"
.derecha{text-align:center;}
Y cambia:
center por left.
2. Me gustaría que aparecieran los asteriscos en los textos de "Correo electrónico" y en "Mensaje", (que son los campos obligatorios) tal y como aparece en el formulario de contacto por defecto. ¿Cómo lo hago?
Respuesta: Identifica esos textos y que resalté de rojo en el código del paso 4 y agrega el asterisco inmediatamente después de cada texto respectivamente.
Referencias adicionales
Personalizar el Texto de "Placeholder"
Etiquetas:Tutoriales