Hace no mucho tiempo Blogger lanzó un nuevo gadget: el formulario de contacto. Podemos optar por utilizarlo como gadget o en una página estática. Ya que es fácil acceder al código de este gadget lo podemos personalizar a gusto modificando el HTML y añadiendo CSS.
Dejamos créditos:
HTML
El formulario consta de dos entradas de texto, una para el nombre y otra para el correo electrónico, un textarea para ingresar el mensaje y un input de tipo submit para enviarlo todo.
Para darle un toque más profesional, vamos a suprimir los textos "Nombre" "Correo electrónico" "Mensaje" por un placeholder en el interior de cada cuadro de texto. Para que entiendas aquí te muestro la diferecia.
 |
| Formulario original |
Para lograr esto, debemos modificar el HTML del gadget. Primero nos dirigimos a la parte de la plantilla donde se encuentra el widget, lo expandimos, expandimos el includable y encontraremos algo como esto:
<b:widget id='ContactForm1' locked='false' title='Formulario de contacto' 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'>
<p/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' placeholder='Nombre' type='text' value=''/>
<p/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' placeholder='Correo electrónico' required='required' type='text' value=''/>
<p/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' placeholder='Mensaje'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' style='margin:0 auto;' type='button'/>
<p/>
<div class='contact-mensaje-error' style='text-align: center; max-width: 222px'>
<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>
<div class='contact-form-widget'> por lo siguiente:
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' placeholder='Nombre' type='text' value=''/>
<p/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' placeholder='Correo electrónico' required='required' type='text' value=''/>
<p/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' placeholder='Mensaje'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' style='margin:0 auto;' type='button'/>
<p/>
<div class='contact-mensaje-error' style='text-align: center; max-width: 222px'>
<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>CSS
Puedes personalizar el formulario como gustes. Aquí te muestro un ejemplo.
/* Personalizamos los input y el textarea */
input.contact-form-name, input.contact-form-email, textarea.contact-form-email-message {
border: 0;
border-bottom: 1px solid #AAA;
padding: .5em .7em;
position: relative;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAEElEQVQIW2NctWrVf0ZSCADneh3tBiWsnwAAAABJRU5ErkJggg==) no-repeat bottom left, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAEElEQVQIW2NctWrVf0ZSCADneh3tBiWsnwAAAABJRU5ErkJggg==) no-repeat bottom right;
margin-bottom:20px;width:100%;
max-width:100%;
}
input.contact-form-name:focus, input.contact-form-email:focus, textarea.contact-form-email-message:focus {
/* Al presionarlos para escribir, cambia el color del borde */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAEElEQVQIW2NkCN3wn5EUAgDohBQzieT+ngAAAABJRU5ErkJggg==) no-repeat bottom left, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAEElEQVQIW2NkCN3wn5EUAgDohBQzieT+ngAAAABJRU5ErkJggg==) no-repeat bottom right;
border-bottom-color:#0055b0;
outline:0;
}
.contact-form-email-message {
max-height: 36px;
transition: max-height 1s;
}
.contact-form-email-message:focus {
/* El textarea se extiende en lo alto al estar en focus, y cambia de color de fondo */
max-height: 150px;
height:150px;
background-color: #efefef;
}
/* El texto del placeholder se desvanece */
.contact-form-widget [placeholder]:focus::-webkit-input-placeholder {
transition: opacity 0.5s 0.5s ease;
opacity:0;
}Dejamos créditos:
- Hang on Placeholders en CSS-Tricks, aquí vimos cómo hacer que el texto del placeholder desaparezca cuando el input o textarea está en focus. Sólo compatible con navegadores webkit.
Para poner los botones de redes sociales que tu tu tienes aqui como se hace? :)
ResponderEliminar