¿Quieres crear un formulario de contacto para tu blog en Blogger y no sabes cómo hacerlo? ¡No te preocupes! En este artículo te explico el paso a paso para crear el formulario de contáctame y añadirlo a tu blog totalmente personalizado.
{tocify} $title={Tabla de contenido}
Por tanto, empecemos definiendo qué es un formulario de contacto.
¿Qué es un formulario de contacto?
Un formulario de contacto es una herramienta cuya función es recolectar los datos de los usuarios o clientes que visitan nuestro blog o sitio web, de modo, que se pueda establecer una comunicación directa entre el creador y los lectores.
Ahora que ya sabes la definición de un formulario de contacto es momento de que elijas cualquiera de estos 3 métodos para crearlo:
1. Añadir el formulario de contacto a través de un gadget
Añadir un formulario usando un gadget es una de las formas más fáciles que puede existir al personalizar tu blog en Blogger, ya que, no necesitarás usar algún tipo de código html. Puedes usar este gadget si es que no necesitas monetizar tu blog con Google Adsense, y ablando de esta plataforma te recuerdo que si quieres ser aceptado por Adsense rápidamente y sin ningún problema, te recomiendo ver mi artículo ➡ Cómo ser aceptado por Google Adsense en 48 horas.
Sigue los siguientes pasos para agregar dicho gadget de lo forma correcta:
Paso #1: Haz clic en "Diseño"
Después de haber ingresado a tu blog como siempre lo sueles hacer, debes ubicar la opción "Diseño" que está en el menú vertical al lado izquierdo de la pantalla y hacer clic sobre el.
Paso #2: Busca el título "Barra lateral"
Después de haber hecho clic en "Diseño" te aparecerá una nueva ventana al lado derecho donde encontrarás varios bloques, los cuales dan la apariencia a tu blog. Allí, deberás buscar el bloque "Barra lateral", sin embargo, debes tener en cuenta que estos bloques pueden tener una ubicación diferente dependiendo de la plantilla que vas a utilizar para tu blog.
Paso #3: Haz clic en "Añadir un gadget"
Una vez ubicado el bloque "Barra lateral", debes hacer clic en "Añadir un gadget" que está debajo de dicho título.
Paso #4: Busca y elige el gadget "Formulario de contacto"
Completado el paso anterior, te aparecerá una ventana vertical donde se te muestra la lista de gadgets nativos de Blogger, por lo que, debes deslizar hacia abajo para encontrar el gadget "Formulario de contacto" y una vez que lo hayas localizado debes hacer clic sobre el.
Paso #5: Configura el formulario de contacto
Luego de haber seleccionado dicho gadget, te aparecerá otra ventana pequeña con el título "Configurar formulario de contacto" donde debes dejar activado el botón "Mostrar este widget" y también puedes cambiar el nombre si es que lo deseas. Por ejemplo, yo lo colocaré "Contacto" y por último debes hacer clic en "Guardar".
Nota: No olvides de que si la opción "Mostrar este widget" viene activado, debes dejarlo tal como está, y recuerda que una vez agregado el formulario podrás cambiarlo de posición arrastrando el gadget hacia arriba o hacia abajo.
2. Agregar página de contacto usando el formulario de Google
Como el anterior método de crear un formulario de contacto en Blogger no es el adecuado para monetizar con Google Adsense, sigue los siguientes pasos para crear un formulario, utilizando una página y la plantilla de Google Forms:
A. Cómo crear una página en Blogger y agregarlo al menú secundario
Si todavía no sabes cómo crear una página en Blogger, sigue los siguientes pasos o simplemente entra a este post completo donde te explico el paso a paso de crear un blog en Blogger. Una vez dentro, lo único que tienes que hacer es buscar y ubicar el apartado "Cómo crear una nueva página en Blogger".
Paso #1: Busca la opción "Páginas"
Lo primero que tienes que hacer es clic en "Páginas", luego clic en el botón anaranjado "+ Nueva página".
Paso #2: Agrega un título a la página
Paso #3: Agrega la página "Contacto" al menú secundario
La mayoría de plantillas web tienen 2 menús, un Menú Principal (Header Menu 1) o un Menú Secundario (Header Menu 2), es decir ubicados en la parte superior. Sin embargo, existen algunas excepciones como el de mi blog que el Menú Secundario o en este caso Footer Menu se encuentra en la parte inferior. Así que, la ubicación es lo que menos importa por ahora. Lo importante es que dicha página esté en el menú secundario.
Para añadir esta página debes empezar por ubicar el bloque "Menu", por ejemplo en este caso "Footer Menu".
Ahora que ya lo has ubicado, haz clic en el ícono lápiz que está al frente de "Link List" para que te aparezca una nueva pantalla como la siguiente:
Una vez dentro de esta ventana, lo que vas hacer es deslizar hacia abajo, donde por predeterminado encontrarás ciertos enlaces añadidos. Puedes hacer clic en el ícono 🖍 para editarlo, donde podrás cambiar el nombre de la página y su URL respectiva. También puedes eliminar todos los enlaces, salvo el que dice "Home" ya que ésta representa la página de inicio de tu blog o sitio web. Si estás un poco confundid@ o no sabes como hacer todo lo explicado, te recomiendo eliminarlas y empezar a añadir un nuevo enlace haciendo clic en "Añadir otro elemento".
No obstante, quizás te estés preguntando cómo encontrar el enlace de la página "Contacto" que has creado anteriormente. Pues, para encontrar la URL de esta página es mucho más sencillo que el de una entrada. Lo único que debes hacer es ir a la pestaña "Página" del menú vertical donde estará la página que has creado en los pasos anteriores, y solamente debes pasar el puntero en dicha página sin hacer clic y automáticamente se habilitarán los íconos de: "Publicar", "Descartar esta página" y el de "Vista previa". En consecuencia, debes hacer clic en vista previa y se te abrirá la dirección URL en una nueva pestaña del navegador, copias el enlace y pegas en la lista de enlaces del menú secundario y listo.
B. Cómo crear un formulario de Google y añadirlo a la página contacto
Para crear un formulario de Google de una forma rápida y sencilla sigue los pasos que te muestro a continuación:
Paso #1: Localiza tu perfil de correo "GMAIL"
Como ya tienes tu cuenta de Blogger abierta con tu correo Gmail, no es necesario que vuelvas a colocar tu correo ni contraseña, mas bien, deberás abrir una nueva pestaña en el navegador o escribir "GMAIL" en el buscador y automáticamente te aparecerá tu perfil ubicado en la parte superior derecha.
Paso #2: Busca el producto de Google "Formularios"
Paso #3: Selecciona la opción "Datos de Contacto"
Una vez completado el paso anterior, ahora debes hacer clic en "Datos de Contacto". Esta plantilla viene predeterminada, por lo que te ahorrarás bastante tiempo en empezar ha diseñar un formulario en blanco.
Si deseas eliminar o agregar algunos campos de ingreso de datos del formulario, no te preocupes, ya que, en el siguiente paso te enseñaré como hacerlo.
Paso #4: Personaliza el formulario de contacto
Como este formulario es una plantilla prediseñada por Google, quizás tenga algunas cosas que no desees que estén, como por ejemplo: la dirección de domicilio, número de celular o incluso el color del tema. Si estas cosas no quieres que estén un tu formulario o si realmente quieres añadir algún campo de recolección de datos, puedes modificarlo y personificarlo de acuerdo a tus gustos y preferencias. De esta manera, te recomiendo que elimines el campo "Dirección" y "Número de teléfono", siendo este último opcional.
Si deseas eliminar algún campo de datos como el que se muestra en la siguiente imagen, solo debes hacer clic en el campo respectivo y automáticamente te aparecerá otras opciones como el ícono de eliminar.
Adicionalmente, puedes agregar una breve descripción al pie del título en este caso "Contáctanos", así como añadir una imagen de cabecera, elegir el color del tema según las colores de la plantilla de tu blog, el color de fondo y cambiar el estilo del tipo de letra. Todo esto desde el ícono de "Personalizar tema" que se encuentra al lado de ícono de "Vista previa". Por ejemplo, mi formulario de contacto quedó de la siguiente manera según la vista previa:
Paso #4: Deshabilita la opción "Requiere iniciar sesión"
Si no deshabilitas esta opción, pedirá al usuario que inicie sesión con su correo electrónico para enviar un comentario o mensaje, siendo este proceso un poco tedioso ya que muchos no lo harán, por lo que te recomiendo que esté desactivado. Para deshabilitar esta opción debes ir a configuración, ubicas la sección "Respuestas" deslizas hacia abajo y apagas el botón correspondiente mencionado.
Paso #5: Copia el código html del formulario de contacto creado
Para copiar el código de tu formulario terminado, debes hacer clic en el botón de color morado "Enviar". Luego dentro de la nueva ventana debes buscar el ícono de código html "< >" y finalmente clic en "Copiar".
Paso #5: Cambia el modo de redacción de la página
Ahora como ya has copiado el código html, debes ir a la página "Contacto" previamente creada y cambiar el tipo de redacción, es decir, pasar de "Vista de redacción" a "Vista html".
Paso # 6: Pega el código html del formulario de contacto creado
Como último paso solo debes pegar el código html guardado en el portapapeles, tal como se muestra en la imagen y finalmente hacer clic en "Publicar" para que tu pagina se encuentre visible en Internet.
3. Crear página de contacto usando código html
Si los 2 métodos anteriores no te inducen a tener un buen formulario de contacto tanto para el proceso de recolección de datos como para monetización, esta tercera alternativa es la perfecta para tu blog o web, así como también cumplir sin ningún problema los requisitos de Google Adsense.
Para saber cómo hacerlo, sigue los siguientes pasos que detallo a continuación:
Paso #1: Crea una página nueva llamada "Contacto" o reutiliza la página del anterior método
Al igual que le método anterior deberás crear una nueva página o utilizar la misma que has creado anteriormente. Si deseas utilizar la misma tienes que borrar el código html que has pegado y si vas crear una nueva, tienes que cambiarlo a modo "Borrador" para que no sea visible públicamente. Para el ejemplo, utilizaré la misma página.
Paso #2 : Copia y pega el siguiente código html
A continuación debes copiar y pegar el código en la página respectiva y de este modo, tendrás un formulario de contacto fácil de implementar, responsivo (Adaptable a cualquier dispositivo) y totalmente personalizable.
<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 12px;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 12px;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:#1abc9c;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:#16a085;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'] = '8631817981408106805';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8631817981408106805','https://dirakiongames.blogspot.com','8631817981408106805');
_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': '8631817981408106805', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Nota: No olvides que los códigos html se pegan siempre en el modo de redacción "Vista en html" una vez dentro de la página.
Paso #3: Cambia el código de identificación del blog
Una vez pegado el código html, debes proceder a cambiar el ID que viene predeterminado en el código html por el ID respectivo de tu blog. Para hacerlo, debes ir a la URL de la misma página en la que te encuentras, lo copias y luego reemplazas por los que están resaltados en color amarillo, tal como se muestra en el ejemplo.
Nota: al sustituir dichos códigos de color amarillo debes tener mucho cuidado para no eliminar ningún otro tipo de caracter.
Paso #4: Cambia el enlace de tu blog
Luego de haber cambiado lo resaltado en amarillo, ahora sustituye el enlace "https://revertirladiabetestipo2" por la dirección de tu blog.
Nota: asegúrate de que la dirección de tu blog contenga el https al inicio.
Paso #5: Cambia la color del botón "Enviar mensaje"
Ahora es importante que tu web tenga una buena estética, por lo que, es necesario que las colores concuerden en todos sus aspectos del diseño. Si deseas saber qué colores tiene exactamente tu web tienes que identificar su código de color html respectivo y para ello te recomiendo que hagas una captura de pantalla de dicha imagen que contenga tal color, luego guardas la imagen, después lo subes a esta página haciendo clic en examinar.
Paso #6: Copia y reemplaza el código generado
Como último paso debes proceder a copiar el código generado, tal como se muestra en la imagen anterior y pegarlo en el código html de la página "Contacto". Para ello, debes ubicar el siguiente código y reemplazarlo por el nuevo para que el botón "Enviar mensaje" tenga la color que lo hayas asignado y concuerde con la demás colores de tu plantilla web.
Finalmente, las color de dicho botón cambiará y quedará como el siguiente ejemplo:
Por tanto, esperando que este artículo te sea de utilidad, te doy cita a que estés pendiente a un próximo post.