3 Formularios de Contacto Personalizados para Blogger

Disponer de formularios de contacto personalizados para Blogger es de suma importancia. Esta herramienta es imprescindible, ya que mediante la misma, nuestros visitantes pueden ponerse en contacto con nosotros.

Con esta característica, lo que evitamos es compartir nuestro correo personal en la página web, y al mismo tiempo ofrecemos una facilidad a nuestros usuarios a la hora de contactarnos.

En este post te presento estos 3 formularios de contacto que puedes implementar en tu plantilla de Blogger.

Qué es un Formulario de Contacto?

Un formulario de contacto es una parte fundamental de cada sitio web o blog, y es lo que da seriedad a tu proyecto online.

Por lo general, una página de contacto permite a los lectores de tu blog, a los anunciantes, a los patrocinadores y a los interesados en general comunicarse contigo.

En BlogSpot, los usuarios pueden utilizar el formulario por medio de un widget, y no pueden añadirlo a una página. Esto supone un problema muy común entre los principiantes.

Tanto AdSense como la mayoría de las redes publicitarias de calidad y las webs asociadas sólo te aceptarán en sus filas si tienes una página de información, datos de contacto y política de privacidad.

En este sentido, debe asegurarse de crear estas páginas en el momento de crear su blog.

La Importancia de un Formulario de Contacto para Blogger

En caso de que sigas utilizando proveedores externos, definitivamente tienes que considerar el cambio al formulario de contacto oficial personalizado para Blogger, puesto que proporciona varias ventajas únicas, como:

• Confiable - Este formulario es el oficial desarrollado por Blogger, por lo que es más confiable para iniciar el contacto en comparación con los servicios de terceros.
• Comentarios - Las personas que te visitan pueden comentar fácilmente tu blog al dejar sus comentarios a través de tu formulario de contacto. Este tipo de comentarios puede ayudarle a identificar la próxima publicación o los aspectos que debe abordar sobre la base de los comentarios de los visitantes.
• Preguntas - Los formularios de contacto ofrecen una posibilidad para que tus visitantes realicen preguntas específicas relacionadas con el blog que has escrito o sobre tu negocio en general. Es una excelente manera de captar clientes potenciales e incluso de generar conversiones si está vendiendo un determinado producto o servicio.
• Solicitud de información o servicio - Quienes utilicen el blog como forma de comercializar un producto o servicio, los potenciales clientes pueden utilizar el formulario de contacto personalizado para Blogger con el fin de ponerse en contacto y solicitar información adicional.
• Los mensajes se entregan inmediatamente - En su calidad de administrador del blog, usted recibirá un mensaje de forma inmediata en cuanto el visitante haga clic en enviar.

¿Hacia dónde van los mensajes?

Cuando un visitante hace una pregunta o envía un comentario a través del formulario de contacto de Blogger, los mensajes se envían instantáneamente al correo electrónico asociado a su cuenta de Blogger. En caso de que un blog tenga varios administradores, todos los administradores individuales recibirán los comentarios o consultas realizadas por el visitante.

¿Puedo añadir otros campos?

Desafortunadamente, no. No es posible añadir campos personalizados, tales como el sitio web, el número de teléfono o la dirección postal, debido a que Blogger utiliza etiquetas especiales para la transferencia de datos. De todas formas, las casillas por defecto están bien diseñadas y permiten obtener las informaciones básicas que precisas sobre tus visitantes.

Cómo añadir un Formulario de Contacto en Blogger

1. Nos dirigimos al menú: Páginas.
2. Luego vamos a, crear Nueva Página
3. En nombre de la página colocamos Contacto
4. Seguidamente elegimos la opción de Vista en HTML
5. Pegamos nuestro código en el documento
6. Seleccionamos la opción: No permitir comentarios
7. Y por último, presionamos el botón: Publicar

Si quieres que tu página de contacto ocupe el 100% del ancho de tu plantilla, en este artículo hablo sobre cómo quitar la barra lateral del blog en blogger.

A continuación te dejo estos 3 Formularios de Contacto Personalizados para tu Blog.

Formulario de Contacto Minimalista

<style>.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}
  .contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}
  .contactf-name{margin-right:6%}
  .name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}
  .name-icon,.email-icon{position:absolute;z-index:1}
  .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{min-width:512px;max-width:512px;max-height:300px;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
  .contact-form-name,.contact-form-email{height:40px}
  .contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}
  .contact-form-email-message{height:150px;border-width:2.5px!important}
  .contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}
  contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="contact-title">Contáctanos.</h2><div class="form"><form name="contact-form"><div class="contactf-name"><div class="name-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPVQeTMPdV8CpHqz9XwyGrfHIevmhc40dHQip48tRNAwvsL4_MErJznWV4v0fTMr0LIeyAfHAQD_C7wMaAaOfEIXe23q_hlF92W2uIfJVJEeoCEwnP6DCNpFee5QbZV7TYX8RMHAVQRxNh/s1600/avatar%25281%2529.png" width="16" height="16" /></div><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Nombre" size="30" type="text" value="Nombre" onblur='if (this.value == "") {this.value = "Nombre";}' onfocus='if (this.value == "Nombre") {this.value = "";}'  /></div><div class="contactf-email"><div class="email-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6PSLvKBG3ISDTufcy-9rDrfoerMs_LaDBRsqfmHjBmYJYEVGEXz8RE9k4SFD83wQm0D71tkpo3xSbjiXFSbG5P43eH42jMjKjZq6asjUeNMFhFSQBHKYHOI-u4DqsdvSWAcgN-0AjhT1/s1600/envelope%25281%2529.png" width="16" height="16" /></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail" size="30" type="text" value="E-mail" onblur='if (this.value == "") {this.value = "E-mail";}' onfocus='if (this.value == "E-mail") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Mensaje..." rows="5" value="Mensaje..." onblur='if (this.value == "") {this.value = "Mensaje...";}' onfocus='if (this.value == "Mensaje...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="ENVIAR" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

Formulario de contacto con cinta gradiente

<style type="text/css">
* {padding: 0;margin: 0;-webkit-box-sizing: border-box;moz-box-sizing: border-box;box-sizing: border-box;}
.contact-form-widget {background: #eee;margin: 20px auto;height: 310px;width: 600px;max-width: 100%;padding: 20px;border-radius: 5px}
hr {position: relative;height: .75em;border: 0;overflow: hidden;margin:0}
hr:before {content: "";display: block;position: absolute;top: 0;left: 0;height: .75em;width: 100%;background-image: linear-gradient(to left,#d2421e,#ceda71,#d2421e,#ceda71,#d2421e);}
.contactf-name,.contactf-email {float: left;width: 49.25%;}
.contactf-name {margin-right: 1.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 {background: #fff;width: 100%;max-width: 100%;margin: 25px 0 0;padding: 10px;font-size: 15px;color: #8f8f8f;border-color: #b5b3b3;border-radius: 8px;border-width: 2px 2px 4px;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none}
.contact-form-name,.contact-form-email {height: 40px}
.contact-form-email-message {min-height: 100px;max-height: 100px;min-width: 100%;max-width: 100%}
.contact-form-button-submit,.contact-form-button-submit:hover {margin-top: 25px;width: 100%;height: 50px;font-size: 17px;color: #fff;text-align: center;text-shadow: 0 1px 2px rgba(0,0,0,0.25);background: #e89c66;border: 0;border-radius: 8px;border-bottom: 2px solid #85502c;outline: none;cursor: pointer;-webkit-box-shadow: inset 0 -5px #d4845c;box-shadow: inset 0 -5px #d4845c}
.contact-form-button-submit:active {top: 1px;outline: none;-webkit-box-shadow: none;box-shadow: none}
.contact-form-cross {border: medium none !important;box-shadow: none !important;padding: 0 !important;height: 11px !important;width: 11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><hr><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Nombre" size="30" type="text" value="Nombre" onblur='if (this.value == "") {this.value = "Nombre";}' onfocus='if (this.value == "Nombre") {this.value = "";}'/></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="Correo electrónico" size="30" type="text" value="Correo electrónico" onblur='if (this.value == "") {this.value = "Correo electrónico";}' onfocus='if (this.value == "Correo electrónico") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Escriba su mensaje aquí..." rows="5" type="text" value="Escriba su mensaje aquí..." onblur='if (this.value == "") {this.value = "Escriba su mensaje aquí...";}' onfocus='if (this.value == "Escriba su mensaje aquí...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar mensaje" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

Formulario de Contacto Simple

<style type="text/css">
  .contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}
  .contactf-name,.contactf-email{float:left;width:48.25%}
  .contactf-name{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:#e8e2c8;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:#d1c386;border:0;cursor:pointer}
  .contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}
  .contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Nombre" onblur='if (this.value == "") {this.value = "Nombre";}' onfocus='if (this.value == "Nombre") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="Correo electrónico" onblur='if (this.value == "") {this.value = "Correo electrónico";}' onfocus='if (this.value == "Correo electrónico") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="Mensaje" onblur='if (this.value == "") {this.value = "Mensaje";}' onfocus='if (this.value == "Mensaje") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="ENVIAR" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></form></div></div></div> 

NOTA: Verifica que hayas seguido los pasos correctamente antes de publicar tu Página de Contacto

Instalación de Formulario de Contacto en Blogger

Conclusión:

Utilizando formularios de contacto personalizados de Blogger conseguirás coherencia en el tipo de información que solicitas y al mismo tiempo reducirás el spam, puesto que no tendrás que mostrar tu correo electrónico directamente en el blog.