Poner en una página el Formulario de Contacto en 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 en 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 en Blogger?

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 en una página el formulario de contacto 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

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

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Asunción Artal:

Tienes razón, es una parte muy importante para mantener el contacto. Estupenda entrada

Responder
Miguel Pina:

Muchas gracias Gabriela por tu buena explicación sobre un asunto que puede ser fundamental para tener una comunicación hábil y privada con los seguidores. E incluso para contactos profesionales según sea nuestro contenido.
Un gran saludo desde España.

Responder
Kat:

Yo añadí un formulario de contacto del mismo Blogger, pero no se me había ocurrido personalizarlo jaja tomo nota! ahora que tengo tiempo libre podría entretenerme con ello, aunque el estilo minimalista que tengo ahora no me disgusta.
Un abrazo Gabriela!!

Responder
    Gabriela Laya:

    De seguro que no lo personalizas, a veces da flojera hacer algo productivo en el tiempo libre XD

    Responder
Serena Miles:

hola guapa,
pero que bien explicas las cosas, voy a tener bien en cuenta esta entrada porque yo no tengo formulario de contacto.
Gracias por la entrada
Besotessssssssss

Responder
    Gabriela Laya:

    Cuando quieras aquí estará el tutorial 😀

    Responder
Miss Bridgerton:

Hola,
Gracias por la información.
Besos desde Promesas de Amor, nos leemos.

Responder
Mava (Marianna 2.0):

Hola Gaby,
no te imaginas lo que me costó crear mi formulario de contacto y ubicarlo en una página, creo que lo logré después de varios intentos, buscando la info en inglés en Google y aplicando el método de ensayo y error…. ja, ja, ja.
Excelente tu video y por supuesto tu explicación, voy a revisar con calma lo que tengo en mi blog a ver si necesito cambiar algo para mejorarlo 😉
Como siempre un millón de gracias, por este curso.
Un beso y feliz fin de semana.

Responder
    Gabriela Laya:

    Madre mía, eso fue un maratón jajajaja

    Responder
Nayade:

Hola ^^
Como siempre tus post me parecen de lo mas interesantes
Muchas gracias por tu reseña
Besos ♥

– – El Mundo de Naya – –

Responder
El desvan de vicensi:

Muy interesante este post Gabriela. Tomo nota pues me falta este formulario en mi blog. Un beso y feliz fin de semana 💖💖💖

Responder
Aimee:

En su tiempo me tomo muchísimo crear el formulario en blogger, se me hacia super latoso, no me funcionaba, y tuve que usar uno de un tercero para que me funcionara,

Responder
Sakuya Aikawa:

Hola Gabi!!
Como siempre una información muy útil, yo antes usaba formulario de contacto pero nunca nadie se contactaba conmigo por eso lo saque asaksjaskajsaks, gracias por compartirlo 😀

Responder
Citu:

Gracias por el tutorial te mando un beso y te deseo una buena semana

Responder