Tengo un formulario HTML
que envía los datos con method="post"
a una hoja de google sheet
.
El problema es que los envía, pero los datos ingresan desordenados a la hoja.
He chequeado los name
del formulario HTML
, la hoja de Google Sheet
, y el código en el script
de Google Apps Script
, y están todos en el orden requerido.
Sin embargo, el problema persiste. Ya no entiendo si el error es proveniente del formulario html
o del script
en google apps script
(aunque creo que es aquí).
Los problemas actuales en total son los siguientes: 1) No me trae Date
, y 2) los campos se registran todos desordenados. Ej: Ingresa cuil
en la columna de nombre
; email
en la columna de provincia
; etc. Y en otro envío capaz me trae situacion-laboral
en la columna nombre
y así los errores constantes en los ingresos en todas las columnas. Cabe mencionar que además posee un re-direccionamiento mediante return HtmlService
aunque creo no debería ser ese el problema...
Copio el script completo de Google Apps Script (con datos de prueba)
function doPost(e) {
try {
var ss = SpreadsheetApp.openByUrl("XXX");
var sheet = ss.getSheetByName("Hoja 1");
// Mapeo de campos con columnas en la hoja de Google Sheet
var fieldToColumn = {
'dinero-necesitas': 'A',
'nombre': 'B',
'apellido': 'C',
'cuil': 'D',
'situacion-laboral': 'E',
'provincia': 'F',
'banco-cobro': 'G',
'telefono': 'H',
'email': 'I',
};
// Ordena los datos en el mismo orden que las columnas de la hoja de cálculo
rowData.sort(function(a, b) {
return fieldToColumn[a] - fieldToColumn[b];
});
// Agrega la fecha actual al registro
rowData.push(new Date());
// Crea la columna "Fecha"
sheet.getRange("A1").setValue("Fecha");
// Encuentra la última fila no vacía en la columna A
var lastRow = sheet.getLastRow();
// Inserta la fila en la hoja, respetando el orden de las columnas
sheet.appendRow(["dinero-necesitas","nombre","apellido","cuil","situacion-laboral","provincia","banco-cobro","telefono","email"])
// Redirecciona al usuario a la página deseada
return HtmlService.createHtmlOutput('<script>window.location.href = "https://www.ejemplo.com";</script>');
} catch (error) {
return ContentService.createTextOutput("Error al registrar: " + error.message); // En caso de error, responde con un mensaje de error
}
}
Y aquí el código del formulario HTML (con datos de prueba)
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solicitud de Crédito</title>
<style>
.form-container {
max-width: 500px;
margin: 0 auto;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: #0077c0;
}
.form-group input,
.form-group select {
width: 100%;
padding: 8px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form-group input[type="submit"] {
background-color: #0077c0;
color: white;
cursor: pointer;
}
.form-group .file-upload {
position: relative;
overflow: hidden;
display: inline-block;
}
.form-group .file-upload input[type="file"] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.form-group .file-upload .button {
padding: 8px 16px;
background-color: #0077c0;
color: white;
border-radius: 5px;
cursor: pointer;
}
footer {
background-color: #fff;
font-size: 12px;
padding: 10px;
margin-top: 20px;
text-align: justify;
}
</style>
<script src="validation.js">
function validateForm() {
// Get the value of the hidden field.
var columnName = document.getElementById("columnName").value;
// Get the value of the first field in the form.
var firstFieldValue = document.getElementById("firstField").value;
// Check if the values match.
if (columnName != firstFieldValue) {
// The values do not match.
alert("Los valores no coinciden. Por favor, inténtelo de nuevo.");
return false;
}
// The values match.
return true;
}
<div class="form-container">
<h2 style="color: #0077c0;">Solicitud de Crédito</h2>
<form action="https://script.google.com/macros/s/XXX/exec" method="post" enctype="multipart/form-data" id="credit-form">
<div class="form-group">
<label for="dinero-necesitas" style="color: #80c342;">¿Cuánto dinero necesitas?</label>
<input type="range" id="dinero-necesitas" name="dinero-necesitas" min="10000" max="250000" step="1000" required="">
<input type="hidden" name="dinero-necesitas" value="dinero-necesitas">
<output for="dinero-necesitas" id="output-dinero-necesitas" style="color: #0077c0;">$100.000</output>
<script>
var slider = document.getElementById("dinero-necesitas");
var output = document.getElementById("output-dinero-necesitas");
slider.oninput = function() {
var value = Number(this.value).toLocaleString('es-AR', { style: 'currency', currency: 'ARS' });
output.innerHTML = value;
}
</script>
</div>
<div class="form-group">
<input type="text" id="nombre" name="nombre" placeholder="Tu Nombre" required="">
<input type="hidden" name="nombre" value="nombre">
</div>
<div class="form-group">
<input type="text" id="apellido" name="apellido" placeholder="Tu Apellido" required="">
<input type="hidden" name="apellido" value="apellido">
</div>
<div class="form-group">
<input type="text" id="cuil" name="cuil" placeholder="CUIL" pattern="[0-9]{11}" required="">
<small style="color: #0077c0;">El CUIL debe tener 11 dígitos.</small>
<input type="hidden" name="cuil" value="cuil">
</div>
<div class="form-group">
<select id="situacion-laboral" name="situacion-laboral" required="">
<option value="">Selecciona tu situación laboral</option>
<option value="Administración Pública Nacional">Administración Pública Nacional</option>
<option value="Fuerzas de Seguridad Nacional">Fuerzas de Seguridad Nacional</option>
<option value="Fuerzas Armadas Nacionales">Fuerzas Armadas Nacionales</option>
<option value="Empleado/a PÚBLICO/A Provincial">Empleado/a PÚBLICO/A Provincial</option>
<option value="Empleado/a PÚBLICO/A Municipal">Empleado/a PÚBLICO/A Municipal</option>
<option value="Empleado/a PRIVADO/A">Empleado/a PRIVADO/A</option>
<option value="Jubilado/a-Pensionado/a ANSES">Jubilado/a-Pensionado/a ANSES</option>
<option value="Jubilado/a-Pensionado/a PROVINCIAL">Jubilado/a-Pensionado/a PROVINCIAL</option>
<option value="Beneficio 40 Pensión Graciable">Beneficio 40 Pensión Graciable</option>
<option value="Otros Beneficios ANSES">Otros Beneficios ANSES</option>
<option value="Autónomo/Monotributo">Autónomo/Monotributo</option>
</select>
<input type="hidden" name="situacion-laboral" value="situacion-laboral">
</div>
<div class="form-group">
<select id="provincia" name="provincia" required="">
<option value="">Selecciona una provincia</option>
<option value="Buenos Aires">Buenos Aires</option>
<option value="CABA">Ciudad Autónoma de Buenos Aires</option>
<option value="Catamarca">Catamarca</option>
<option value="Chaco">Chaco</option>
<option value="Chubut">Chubut</option>
<option value="Córdoba">Córdoba</option>
<option value="Corrientes">Corrientes</option>
<option value="Entre Ríos">Entre Ríos</option>
<option value="Formosa">Formosa</option>
<option value="Jujuy">Jujuy</option>
<option value="La Pampa">La Pampa</option>
<option value="La Rioja">La Rioja</option>
<option value="Mendoza">Mendoza</option>
<option value="Misiones">Misiones</option>
<option value="Neuquén">Neuquén</option>
<option value="Río Negro">Río Negro</option>
<option value="Salta">Salta</option>
<option value="San Juan">San Juan</option>
<option value="San Luis">San Luis</option>
<option value="Santa Cruz">Santa Cruz</option>
<option value="Santa Fe">Santa Fe</option>
<option value="Santiago del Estero">Santiago del Estero</option>
<option value="Tierra del Fuego">Tierra del Fuego</option>
<option value="Tucumán">Tucumán</option>
</select>
<input type="hidden" name="provincia" value="provincia">
</div>
<div class="form-group">
<select id="banco-cobro" name="banco-cobro" required="">
<option value="">Selecciona tu banco de cobro</option>
<option value="BANCO DE GALICIA Y BUENOS AIRES S.A.U.">BANCO DE GALICIA Y BUENOS AIRES S.A.U.</option>
<option value="BANCO DE LA NACION ARGENTINA">BANCO DE LA NACION ARGENTINA</option>
<option value="BANCO DE LA PROVINCIA DE BUENOS AIRES">BANCO DE LA PROVINCIA DE BUENOS AIRES</option>
<option value="BANCO ICBC">BANCO ICBC</option>
<option value="CITIBANK N.A.">CITIBANK N.A.</option>
<option value="BANCO BBVA ARGENTINA S.A.">BANCO BBVA ARGENTINA S.A.</option>
<option value="BANCO DE LA PROVINCIA DE CORDOBA S.A.">BANCO DE LA PROVINCIA DE CORDOBA S.A.</option>
<option value="BANCO SUPERVIELLE S.A.">BANCO SUPERVIELLE S.A.</option>
<option value="BANCO DE LA CIUDAD DE BUENOS AIRES">BANCO DE LA CIUDAD DE BUENOS AIRES</option>
<option value="BANCO PATAGONIA S.A.">BANCO PATAGONIA S.A.</option>
<option value="BANCO HIPOTECARIO S.A.">BANCO HIPOTECARIO S.A.</option>
<option value="BANCO DE SAN JUAN S.A.">BANCO DE SAN JUAN S.A.</option>
<option value="BANCO MUNICIPAL DE ROSARIO">BANCO MUNICIPAL DE ROSARIO</option>
<option value="BANCO SANTANDER ARGENTINA S.A.">BANCO SANTANDER ARGENTINA S.A.</option>
<option value="BANCO DEL CHUBUT S.A.">BANCO DEL CHUBUT S.A.</option>
<option value="BANCO DE SANTA CRUZ S.A.">BANCO DE SANTA CRUZ S.A.</option>
<option value="BANCO DE LA PAMPA">BANCO DE LA PAMPA</option>
<option value="BANCO DE CORRIENTES S.A.">BANCO DE CORRIENTES S.A.</option>
<option value="BANCO PROVINCIA DEL NEUQUÉN S.A.">BANCO PROVINCIA DEL NEUQUÉN S.A.</option>
<option value="BRUBANK S.A.U.">BRUBANK S.A.U.</option>
<option value="BIBANK S.A.">BIBANK S.A.</option>
<option value="HSBC BANK ARGENTINA S.A.">HSBC BANK ARGENTINA S.A.</option>
<option value="OPEN BANK ARGENTINA S.A.">OPEN BANK ARGENTINA S.A.</option>
<option value="BANCO CREDICOOP COOP. LTADO.">BANCO CREDICOOP COOP. LTADO.</option>
<option value="BANCO ITAU ARGENTINA S.A.">BANCO ITAU ARGENTINA S.A.</option>
<option value="BANCO PROVINCIA DE TIERRA DEL FUEGO">BANCO PROVINCIA DE TIERRA DEL FUEGO</option>
<option value="BANCO MACRO S.A.">BANCO MACRO S.A.</option>
<option value="BANCO COMAFI S.A.">BANCO COMAFI S.A.</option>
<option value="BANCO RIOJA S.A.U.">BANCO RIOJA S.A.U.</option>
<option value="BANCO DEL SOL S.A.">BANCO DEL SOL S.A.</option>
<option value="NUEVO BANCO DEL CHACO S. A.">NUEVO BANCO DEL CHACO S. A.</option>
<option value="BANCO DE FORMOSA S.A.">BANCO DE FORMOSA S.A.</option>
<option value="BANCO DE SANTIAGO DEL ESTERO S.A.">BANCO DE SANTIAGO DEL ESTERO S.A.</option>
<option value="BANCO INDUSTRIAL S.A.">BANCO INDUSTRIAL S.A.</option>
<option value="NUEVO BANCO DE SANTA FE S.A.">NUEVO BANCO DE SANTA FE S.A.</option>
<option value="WILOBANK S.A.U.">WILOBANK S.A.U.</option>
<option value="NUEVO BANCO DE ENTRE RÍOS S.A.">NUEVO BANCO DE ENTRE RÍOS S.A.</option>
<option value="BANCO COLUMBIA S.A.">BANCO COLUMBIA S.A.</option>
<option value="BANCO BICA S.A.">BANCO BICA S.A.</option>
<option value="BANCO COINAG S.A.">BANCO COINAG S.A.</option>
<option value="Otro Banco No Listado">Otro Banco No Listado</option>
</select>
<input type="hidden" name="banco-cobro" value="banco-cobro">
</div>
<div class="form-group">
<input type="tel" id="telefono" name="telefono" placeholder="Número WhatsApp" pattern="[0-9]{10}" required="">
<small style="color: #0077c0;">El número debe tener 10 dígitos (ejemplo: 3519999999).</small>
<input type="hidden" name="telefono" value="telefono">
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="Correo electrónico" required="">
<input type="hidden" name="email" value="email">
</div>
<div class="form-group">
<input type="submit" value="Generar Solicitud">
</div>
</form>
</div>
<footer>
<p>
INFORMACIÓN FINANCIERA: XXX
</p>
</footer>
<script>
var form = document.getElementById('credit-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
// Obtener los datos del formulario
var formData = new FormData(form);
// Enviar los datos al script de Google Apps Script
fetch(form.action, {
method: 'POST',
body: formData
})
.then(function(response) {
if (response.ok) {
return response.text();
} else {
throw new Error('Error al enviar el formulario');
}
})
.then(function(data) {
// Mostrar mensaje de confirmación
alert(data);
form.reset(); // Limpiar el formulario después del envío
// Redireccionar al usuario a la página deseada
window.location.href = 'https://www.ejemplo.com';
})
.catch(function(error) {
console.error(error);
alert('Hubo un error al enviar el formulario.');
});
});
var slider = document.getElementById("dinero-necesitas");
var output = document.getElementById("output-dinero-necesitas");
slider.oninput = function() {
var value = Number(this.value).toLocaleString('es-AR', { style: 'currency', currency: 'ARS' });
output.innerHTML = value;
};
</script>
Nota: Al ingresar el código lo copió separado. No trajo la apertura del script en el formulario HTML, pero está.