26

Crear un formulario de contacto con Firebase

15615Puntos

hace 2 años

Curso de Firebase para Web 2017
Curso de Firebase para Web 2017

Curso de Firebase para Web 2017

Con el curso Firebase para Web podrás construir tu aplicación Web usando las herramientas que permiten el fácil desarrollo de Front tales como herramientas analíticas para estar pendientes del comportamiento de la aplicación, gran capacidad de almacenamiento, testeo, autenticación y hosting gratuito.

Anteriormente los formularios de contacto se enviaban por correo electrónico y nuestra bandeja de correo era nuestro contenedor de esta información. En este pequeño articulo aprenderemos a crear un formulario de contacto y almacenar las solicitudes en una base de datos utilizando Firebase Database Realtime.

Preparando el proyecto

Para nuestro ejercicio utilizaremos el proyecto “Invie” creado por @LeonidasEsteban para el Curso de Desarrollo Web Online y vamos a preparar el proyecto para que almacenemos las solicitudes de contacto en Firebase.

En la terminal vamos a clonar el repositorio de Invie para este ejemplo, te recomiendo crear una carpeta de proyectos en tu escritorio o en tus documentos donde se pueda acceder de forma rápida desde tu editor de código preferido o la terminal.

git clone https://github.com/LeonidasEsteban/invie.git

clone-invie-project.png

¿Que es Firebase Realtime Database?

Es un servicio que almacena y sincroniza los datos con nuestra base de datos NoSQL alojada en la nube. Los datos se sincronizan con todos los clientes en tiempo real y se mantienen disponibles cuando tu app está sin conexión. Para esto debemos seguir estos pasos:

  1. Registrarnos en Firebasehttps://firebase.google.com/
    Si ya cuentas con un correo de Gmail sólo necesitarás dar permisos para crear tu cuenta, de lo contrario te pedirá crear una cuenta nueva con un correo @gmail.com. También puedes elegir la opción de utilizar tu correo de preferencia.

  2. Crear nuestro primer proyecto en Firebasehttps://console.firebase.google.com/
    Nos dirigimos a nuestra consola y crearemos el proyecto “Invie-form”. Elegimos por defecto país/región (Estados Unidos). Aceptamos las políticas de servicio, creamos nuestro proyecto y esperamos a que esté 100% configurado.

crear-proyecto-firebase.png
  1. Añadir Firebase a Invie

Firebase nos va a dirigir al panel administrativo de nuestra aplicación. En esta sección encontraremos todos los recursos que podemos utilizar en Firebase, en nuestro caso vamos a hacer uso de “DataBase Real Time”, en la cual guardaremos nuestros registros del formulario de contacto del proyecto Invie.

Antes de elegir los recursos de Firebase que vamos a utilizar, es necesario añadirlo a nuestro proyecto eligiendo la opción de “Web”.

agregar-firebase-web.png

En nuestro editor de código abrimos el proyecto de Invie y en nuestro archivo index.html debajo de la etiqueta </body> añadiremos el código que nos proporciona Firebase.

firebase-a-proyecto.png
  1. Preparar la base de datos

Antes de modificar el formulario existente en el proyecto, tenemos que habilitar Firebase Database Realtime en el proyecto que creamos recientemente. Para eso nos dirigimos a la consola y en el menú lateral en la sección “Desarrollo” elegimos la opción “Database”.

Elegimos “Realtime Database” y seleccionamos la opción “Empezar con el modo de prueba”, damos clic en “habilitar”. Ahora tenemos nuestra base de datos lista para recibir valores desde nuestro formulario.

permisos-firebase.png
  1. Editar nuestro formulario de contacto.

En la etiqueta <form> añadimos un id contacForm, éste nos servirá para identificar el formulario y pasar la acción del envío.

Para este ejercicio vamos a cambiar los intereses por un select donde el usuario pueda elegir el motivo de contacto y quedaría de la siguiente forma:

<divclass="intereses"><selectname="intereses"id="intereses"><optionvalue="cotizacion">Cotización</option><optionvalue="reclamos">Reclamos</option><optionvalue="comentarios">Comentarios</option><optionvalue="otros">Otros</option></select></div>
  1. Añadir la función de envío de formulario

Después de las líneas que pegamos que obtuvimos de Firebase, vamos a crear un script nuevo donde tendremos la lógica de nuestro formulario, la cual explico en detalle en los comentarios del código.

 &lt;script&gt;
    const form = document.getElementById('contactForm'); // Obtenemos la referencia al formularioif(form){ // Si existe nuestro elemento en memoria este se quedara escuchando al evento submit del formulario
      form.addEventListener('submit', contactForm); // Al momento de enviar el formulario, ejecuta la función "contactform"
    }

    functioncontactForm(event) {
      event.preventDefault(); // Prevenimos el comportamiento por defecto de un formulario (Enviar por URL los parametros)const nombre = document.getElementById('nombre'); // Obtenemos la referencia a cada uno de nuestros elementos del formularioconst email = document.getElementById('email');
      const sexo = document.querySelector('input[type=radio]:checked');
      const cotizacion = document.getElementById('cotizacion') || null;
      const intereses = document.getElementById('intereses');
      const mensaje = document.getElementById("mensaje");
      const data = {
        'name': nombre.value,
        'email': email.value,
        'sexo': sexo.value,
        'intereses': intereses.value,
        'mensaje': mensaje.value
      }; // Creamos un objecto con todos los elementos de nuestro formulario.
      saveContactForm(data); // Enviamos la información obtenida por el usuario a la función que se encargara de guardar la información en Firebase
      form.reset(); // borramos todos los campos. 
    }

  functionsaveContactForm(data) {
    firebase.database().ref('contact').push(data) // Hacemos referencia al método database de el SDK y hacemos referencia el nombre del objeto que contendrá nuestros registros y empujamos los nuevos envios de datos
      .then(function(){
        alert('mensaje guardado'); // Si la petición es correcta y almaceno los datos mostramos un mensaje al usuario.
      })
      .catch(function(){
        alert('mensaje No guardado'); // En caso de ocurrir un error le mostramos al usuario que ocurrió un error.
      });
  };
  &lt;script&gt;

Puedes reemplazar los “Alert()” por un mensaje personalizado o alguna otra acción según sea necesario.

  1. Probar la aplicación

Abrimos el archivo index.html en nuestro navegador de preferencia y llenamos el formulario de contacto con nuestros datos. Si todo esta correcto al enviar el formulario nos mostrará una alerta: “Mensaje Guardado”.

Ahora podemos ir a la consola de Firebase en el apartado de “Desarrollo > Database” y encontraremos los registros de nuestros usuarios.

final-registros-firebase.png

Ahora que has aprendido como añadir Firebase Database a un formulario de contacto y guardar las solicitudes en una base de datos, te invitamos a ver nuestro nuevo Curso de Firebase para Web donde aprenderás a hacer esto y más con Firebase.

Curso de Firebase para Web 2017
Curso de Firebase para Web 2017

Curso de Firebase para Web 2017

Con el curso Firebase para Web podrás construir tu aplicación Web usando las herramientas que permiten el fácil desarrollo de Front tales como herramientas analíticas para estar pendientes del comportamiento de la aplicación, gran capacidad de almacenamiento, testeo, autenticación y hosting gratuito.
Oscar
Oscar
@gndx

15615Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
6
22927Puntos

Justo lo que estaba necesitando, gracias 😃

1
15615Puntos
2 años

¿Ya lo implementaste?

2
95655Puntos

Excellent!!!

1
7330Puntos

Gran aporte justo lo que necesito a en mi landing 😃 muchas gracias !!

1
15615Puntos
2 años

Que bueno que te gusto y ayude a continuar desarrollando tu web.

1
1466Puntos

¿y como es el asunto de la seguridad spam y robots?

0
7Puntos

Hola Oscar queria preguntarte si en firebase dentro de mi misma pagina puedo tener 2 bases de datos con firebase ?? una para el inicio con google y otra para el formulario??

0
4512Puntos

No entendi esta parte Añadir la función de envío de formulario ya que no muestra en que parte se va a colocar o que se tiene que crear

1
15615Puntos
2 años

La puedes poner al final, es una función seráa interpretada por JavaScript y estará lista para ejecutarse cuando sea llamada.

0

Hola Oscar, estamos desarrollando una plataforma y nos han recomendado muchisimo firebase para el backend, sobre todo por sus metricas, ahora bien, nuestro equipo de desarrollo insiste en node js, tu que opinas? nuestro proyecto se llama Klintric

2
15615Puntos
2 años

Te recomiendo mirar “Firebase Cloud Functions” con las cuales puedes hacer lo que tu equipo quiere con NodeJS, si ya quieren implementar algo mas robusto sobre NodeJS te recomendaría Heroku.

0

He seguido los pasos, no me funciona, he creado el proyecto y la base de datos, los scripts que son dos, debajo del cierre del body </body>… tampoco aparecen los mensajes de alert