formaulario blogger gadget

¬Ņ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:

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:

CREANDO FORMULARIO GOOGLE FORMS BLOGGER
CREANDO FORMULARIO GOOGLE FORMS BLOGGER
  • 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

ejemplo creación pagina blogger
ejemplo creación pagina blogger

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.

Resultado formulario blogger
Resultado formulario 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

¬°Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 5)

Deja una respuesta