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.
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
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:
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.
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.
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.
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.
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>
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.
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.
¿y como es el asunto de la seguridad spam y robots?
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
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??