Crear un formulario de contacto con Firebase

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

¿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.

3. 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”.

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.

4. 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.

5. 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>

6. 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.

 <script>
    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.
      });
  };
  <script>

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

7. 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.

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.