PONER GADGET DE CONTACTO EN UNA PAGINA ESTÁTICA:
Como con otros gadgets sólo hay que
ir a Diseño > Añadir gadget y en la
ventana emergente que sale, seleccionar este del que hablamos: Formulario de
Contacto.
Si de primeras no lo veis es porque está en el segundo apartado del menú de la izquierda, en Más gadgets, marcado en amarillo en la captura adjunta.
Si de primeras no lo veis es porque está en el segundo apartado del menú de la izquierda, en Más gadgets, marcado en amarillo en la captura adjunta.
Cambiar estilo
Como el fondo es transparente, el formulario se integrará bien dónde lo pongáis, estéticamente hablando, pero no obstante es fácilmente modificable aplicando estilo (CSS) a los selectores adecuados.
/* Contenedor general */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #ddd;
color: #000;
}
/* Cajas para insertar datos y botón de envío */
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #fff;
background: #000;
color: #fff;
}
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #ddd;
color: #000;
}
/* Cajas para insertar datos y botón de envío */
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #fff;
background: #000;
color: #fff;
}
En una página estática
El truco consiste en añadir (en caso de que no se tenga ya) el gadget "FORMULARIO DE CONTACTO", cortar la parte del código justo para que no salga dónde debería (en las zonas normales para gadgets) y luego añadir ese mismo código en una página.
Lo de añadir primero el gadget y luego anularlo parcialmente, es porque si Blogger no encuentra el gadget (original) en algún sitio, no carga la parte JavaScript que lo ejecuta. Con esto logramos engañarlo para que lo cargue pero que no se vea el formulario en su ubicación natural.
Así que el primer paso es añadir el gadget (desde Diseño) y el segundo editar la Plantilla para eliminar casi todo el gadget.
Lo de añadir primero el gadget y luego anularlo parcialmente, es porque si Blogger no encuentra el gadget (original) en algún sitio, no carga la parte JavaScript que lo ejecuta. Con esto logramos engañarlo para que lo cargue pero que no se vea el formulario en su ubicación natural.
Así que el primer paso es añadir el gadget (desde Diseño) y el segundo editar la Plantilla para eliminar casi todo el gadget.
en Plantilla --> editar HTML: Hay que buscar la cadena "ContactForm", desplegar el widget pinchando en la flecha negra de la izquierda y borrar las que a continuación he coloreado en gris.
<b:widget id='ContactForm1' locked='false' title='Contacta' 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/>
<data:contactFormNameMsg/>
BLA, BLA, BLA
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<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>
A continuación, después de borrar ese código, crear una pagina nueva con el título que queramos (pero estaría bien titularla "CONTACTOS" o algo parecido), para que el formulario funcione en ella, y hay que pegar esto en esa nueva Página en blanco
<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Nombre<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>Correo electrónico *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Mensaje *</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>
guardar y visibilizar
de
de
No hay comentarios:
Publicar un comentario