😋 ¿Cómo puedo añadir un formulario de contacto a mi blogger? 2022

Añadir un formulario de contacto a mi blog en Blogger. Tutorial aquí 🙂

¿Tienes tu formulario de contacto y cuál crees que es el objetivo final de un sitio web? De hecho, se pondrán en contacto con usted y/o le comprarán directamente.

De ahí la importancia de los formularios de contacto. Quédate conmigo, te lo explicaré todo… ¿estás preparado?

Supongamos ya hemos creado lo que creo que son 3 secciones básicas (además del blog):

Creamos una división, es decir, una página estática como «¿Quiénes somos?» Hable de nuestra empresa y de nuestra sección de localización de la empresa para que nuestros clientes puedan encontrarnos fácilmente.

En esta sección, incorporamos un mapa de Google Maps, además de los datos postales y las coordenadas GPS.

Por último, hemos creado una zona de contacto permanente con teléfono, fax, dirección postal, etc. Pero nos estamos quedando huérfanos porque un área de contacto sin un formulario de contacto es como un jardín sin flores…

Pues sencillamente porque tu blog es un blog de empresa y tu objetivo final es atraer a potenciales clientes (o prospectos), recibir consultas, solicitudes de información y pedidos. Y un formulario es la forma correcta y deseada para estas comunicaciones. Tienen que establecer un mecanismo sencillo para ponerse en contacto con usted en privado.

Por cierto, quienes se toman la molestia de enviar un SMS directamente desde el formulario de contacto están teóricamente un paso más cerca de comprar que los simples visitantes y lectores, así que trátalos como tales, dales una respuesta urgente y detallada y diles cuál es el siguiente paso (normalmente les llamas) o responde a su pregunta: un presupuesto, una oferta o lo que sea.

Veamos dos opciones:

Tabla de Contenidos

Opción 1: Formulario de contacto Blogger utilizando google Forms

Lo primero que vamos a utilizar es una aplicación llamada Google Forms para crear y publicar el formulario, que es muy funcional y fácil de poner en tu blog.

FORMULARIO BLOGGER GOOGLE FORMS (1) — FORMULARIO BLOGGER GOOGLE FORMS

Google Forms es una aplicación web gratuita para crear documentos en línea con la posibilidad de colaborar en grupo. Incluye un procesador de textos, una hoja de cálculo, un sencillo programa de presentaciones y un editor de formularios, que explicaré a continuación.

2 pasos básicos para insertar un formulario de contacto en tu blog

Crear un formulario en Google Forms
Insertar un formulario en el blog

¿Cómo se crea un formulario en Google Forms?

Para crear un formulario en Google Forms, debemos seguir los siguientes pasos:

Ve a la página de Google y haz clic en el enlace del menú superior que dice Más.
En la aplicación Forms, pulsa donde dice Crear nuevo. Hay varias opciones, pero la que nos interesa es la que dice Formulario, así que haz clic en ella.
Ya estás en la plantilla de Crear un nuevo formulario, te aparece un cuadro que dice que introduzcas un título, así que introduce el título que quieras. No aconsejo utilizar un título largo, es mejor utilizar un nombre conciso, por ejemplo: contacto.
Aparecerá una descripción o texto libre, tú decides si lo rellenas o no; Aunque lo mejor es que lo rellenes, no está de más motivar al lector para que te escriba, ya que queremos que se ponga en contacto con nosotros.

Luego rellenamos los campos que nos piden: nombre, correo electrónico y texto del comentario. Tenemos que asegurarnos de que algunos campos como el nombre, el correo electrónico y el comentario se marcan como obligatorios, ya que se trata de la información de contacto básica que necesitamos para comunicarnos con estos clientes potenciales.

Una vez que hayamos editado e incrustado todos los campos del formulario, hacemos clic en Guardar y nos aseguramos de copiar el código del formulario, ya que lo necesitaremos para incrustarlo en el blog.

Para copiar el código desde la aplicación de Google Forms, tenemos que hacer clic en la opción Más acciones de la barra superior de Google y hacer clic en Pegar allí. Te aparecerá un cuadro que dice «Pegar en tu blog o sitio web» y la opción de copiar.

Ahora… ¿Cómo se pega el formulario en el blog de Blogger?

Nos dirigimos a la pestaña HTML del cuadro de edición del artículo o entrada del blog donde queramos pegarlo, ejemplo: página de contacto, nos situamos al final de la última línea de código y copiamos el código. Recuerda tener en cuenta las dimensiones de tu página y ya está.

CODIGO HTML FORMULARIO GOOGLE FORMS (1) — CODIGO HTML FORMULARIO GOOGLE FORMS

Recibir los formularios entrantes

Bueno, primero tienes que registrarte como usuario de Google, por supuesto, si no lo has hecho ya. Te registras e introduces los datos de tu cuenta en la barra de herramientas del motor de búsqueda de Google. Debería aparecer tu cuenta de correo, asegúrate de que la has reconocido, luego en el menú superior de Google busca la pestaña Más y en ella , Forms, y ahí tienes tu formulario con el nombre que le has dado.

Si hace clic en él, podrá ver los formularios que han llegado en tiempo real, incluso la notificación llegara a tu Gmail.

Opción #2 Mediante Un Gadget (que te envía un email)

Blogger tiene un gadget en su estructura que permite introducir un formulario de contacto. Esto es fácil de encontrar siguiendo los pasos:

Entra en Blogger.
Haga clic en Diseño.
Usted elige la ubicación en su plantilla donde quiere mostrar el formulario de contacto.
Seleccione Añadir gadget.
Seleccionas el gadget de código html

Añadir un formulario de contacto a blogger

Luego de creada la página en donde agregaras el formulario (Contacto, Nosotros, ETC)

Paso número 1

Paso número 2

Clic en ella como si quisieras agregar contenido y seleccionar vista en HTML (Claro tu página estará en blanco antes de agregar el código)

Paso número 3

Inserta el siguiente código HTML escrito a continuación:

<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="  Nombre *" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="  Email *" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder=" Mensaje *" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Enviar Mensaje" />  
<br />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 0px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 0px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#ffb80a;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#000;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'id blogger aquí';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3did blogger aquí','tu web aquí','id blogger aquí');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Tu mensaje ha sido enviado.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'Se requiere una dirección de correo electrónico válida.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'id blogger aquí', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Paso número 4:

Seguir las siguientes instrucciones

Tienen que cambiar todos los códigos en donde aparezca id blogger aquí y sustituirlo por el número de identificación de su blog.
Luego van a buscar y cambiar: tu web aquí por el enlace https de tu web o blog. No olviden que su enlace debe contener el https://)
Ahora, para cambiar el color del botón Enviar Mensaje van a buscar en el código lo siguiente: #ffb80a y lo sustituyen por el código del color que ustedes prefieran.

Listo! clic en actualizar y tenemos un hermoso y funcional formulario para blogger.

Recuerda al sustituir el ID y el enlace de tu web automáticamente te llegaran a tu bandeja de entrada de Gmail los formularios completados.

FIN…

En Estrategia Creativa tenemos toda la información que necesitas sobre el mundo de digital y en especial para tus emprendimiento Si quieres seguir leyendo información útil ¡echa un vistazo a nuestros artículos!

Añadir un formulario de contacto a mi blog en Blogger / Añadir un formulario de contacto a mi blog en Blogger 2022

Nuestra puntuación

Opción 1: Formulario de contacto Blogger utilizando google Forms

¿Cómo se crea un formulario en Google Forms?

Recibir los formularios entrantes

Opción #2 Mediante Un Gadget (que te envía un email)

Añadir un formulario de contacto a blogger

También podría gustarte

Optimizar imágenes en wordpress: Los 7 mejores complementos de compresión (2022)

Herramientas para la optimización de motores de búsqueda

Cómo crear un sitio web de dropshipping en WordPress – Guía 2022

Deja una respuesta Cancelar la respuesta