Formulario de Contacto en una Página Blogger

Te explico paso a paso cómo crear la página de contáctame, añadirlo al menú y colocar un formulario de contacto para Blogger. Y además lo podrás personalizar a tu gusto.

¡Hola! soy Gabriela de peengler.com, de seguro te has dado cuenta que cuando se tiene un blog o página web, lo ideal es dar a tus visitantes todas las facilidades para contactarse contigo.  Ya sea para una idea, pedido, dudas, saludos, agradecimientos o cualquier cosa que quieran comunicarte.

Y para eso necesitas una página donde ellos puedan llegar sin ningún problema.

Sin más que decir, ¡Empecemos!

formulario de contacto en pagina estatica blogger

Clic en la imagen para ver el vídeo ↑ en YouTube

¿Qué poner en la página de contacto?

Anteriormente mencione con más detalle que elementos colocar en esta sección de tu sitio, te recomiendo que lo leas → Página de contacto: Mejórala y diséñala a tu manera.

Pero una de las cosas más importantes es el formulario de contacto en Blogger. Este permite que las visitas de tu sitio se contacten contigo fácilmente. Los mensajes enviados a través del formulario los podrás ver en tu correo “el que tienes en tu perfil de usuario”.

¿Cuál correo le llegan los mensajes del formulario de contacto?

Para saberlo debes dirigirte a: Configuración → Te vas al final de la página donde diga General → Perfil de usuario: en identidad, te permite modificar la dirección de correo electrónico a la que te escriben los lectores.

Aquí es donde lo cambias “si eso quieres” o para que verifiques a cuál correo le van a llegar los mensajes.

¿Cómo poner un formulario de Contacto en una Página en Blogger?

Para esto, tienes 2 maneras:

  1. Insertar un formulario de contacto de un tercero.
  2. Colocar un formulario del propio Blogger.

En esta ocasión te explico la segunda opción.

Estos son los pasos que explico en el vídeo tutorial → ver el vídeo.

  • Añadir el gadget del formulario.
  • Ocultar formulario.
  • Crear la página de contacto.
  • Copiar y pegar el siguiente código en la página:

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="NOMBRE" /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="CORREO"/> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="MENSAJE"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />

<div style="text-align: center; width: 100%;">
<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>
</div>
</form>

Nota: Si el ID de tu formulario no es ContactForm1, recuerda de reemplazarlo por el ID que le corresponde. “En el vídeo lo explico”.

Con esto ya tienes un formulario de contacto en tu blog de Blogger. Ahora es cuestión de personalizarlo a tu gusto.

Personalizar el Formulario de Contacto a tu gusto

Los estilos lo pegas en el CSS de tu plantilla, te vas a: Tema → Editar HTML: CTRL + F para activar la casilla de búsqueda, ahora buscas: ]]></b:skin> Arriba de esta pega lo siguiente:


.contacto-nombre,
.contacto-correo {
    float: left;
    width: 48.25%
}
.contacto-nombre {
    margin-right: 3.5%
}

.contact-form-name,
.contact-form-email,
.contact-form-email-message,
.contact-form-name:hover,
.contact-form-name:focus,
.contact-form-email:hover,
.contact-form-email:focus,
.contact-form-email-message:hover,
.contact-form-email-message:focus {
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
    padding: 10px 15px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #444;
    background: #F3F3F3;
    border: medium none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}
.contact-form-name,
.contact-form-email {
    height: 37px
}
.contact-form-email-message {
    height: 170px
}
.contact-form-button-submit,
.contact-form-button-submit:hover {
    width: 13%;
    height: 30px;
    font: normal 12px Arial;
    letter-spacing: 1px;
    color: #444;
    display: block;
    outline: none;
    margin-bottom: 20px;
    text-align: center;
    background: #E6E6E6;
    border: 0;
    cursor: pointer
}
.contact-form-button-submit:active {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

Personalizar el mensaje de error y enviando del formulario


/* Comienzo - mensajes del formulario*/
  .contact-form-error-message-with-border {
    background: #f9bebe;
    border: 1px solid #d01010;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    color: #000;
    font-size: 15px;
    font-weight: bold;
    line-height: 19px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    width: 100%;
    padding: 12px;
}
  
.contact-form-success-message-with-border{
    background: #cff9c4;
    border: 1px solid #08b555;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    color: #000;
    font-size: 15px;
    font-weight: bold;
    line-height: 19px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    width: 100%;
    padding: 12px;
} 
/* Fin - de Mensajes del formulario*/

Modificar el botón del formulario de contacto en la Página Blogger

El siguiente código es para tener el botón centrado y no abarque el 100% de la página:


.contact-form-button-submit,
.contact-form-button-submit:hover {
width: 20%;
height: 40px;
font: 700 18px Arial;
letter-spacing: 1px;
color: #fff;
display: block;
outline: none;
text-align: center;
background: #0088ff;
border: 0;
cursor: pointer;
margin: 0 auto 20px;
float: none;
}

Si deseas que tu botón sea ancho “que abarque toda la página”, entonces usa este código:


.contact-form-button-submit,
.contact-form-button-submit:hover {
width: 100%;
height: 40px;
font: 700 18px Arial;
letter-spacing: 1px;
color: #fff;
display: block;
outline: none;
text-align: center;
background: #0088ff;
border: 0;
cursor: pointer;
margin: 0 auto 20px;
}

No recibo en correo electrónico los mensajes enviados a través del formulario de contacto del blog

A veces el formulario de Blogger suele tener problemas temporales, es decir, no te llegan los mensajes que te envían ni en la bandeja de entrada ni en spam. Ya esto es cuestión de la plataforma, pero normalmente suelen arreglarlo rápido.

En conclusión

Tener en una página tu formulario de contacto en Blogger es sin duda necesario. Personalmente me gusta tener la sección de contáctame y mostrarlo en el menú.

Y no mostrarlo en el pie de página o en la barra lateral, porque siento que la carga del sitio se ralentiza un poco y así se mantiene el sitio un poco más ordenado.

Si tienes alguna duda o pregunta, déjamelo en los comentarios.

¿Te gusto el post?
¡Compártelo!
Gabriela Laya

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.