Oliver/odoo-expertos.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace toast with success message div on form submit (about + contact)

Browse Source
This commit is contained in:
Hermes Agent
2026-08-07 21:11:39 +00:00
parent d321351336
commit 8e65fe0798
2 changed files with 4 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
about.html
+3 -16
View File
@@ -29,8 +29,6 @@
.form-field { width: 100%; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: #0f172a; transition: all 0.2s; } .form-field { width: 100%; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: #0f172a; transition: all 0.2s; }
.form-field:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.1); background: #fff; } .form-field:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.1); background: #fff; }
label { display: block; font-size: 0.8125rem; font-weight: 600; color: #334155; margin-bottom: 6px; } label { display: block; font-size: 0.8125rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #0f172a; color: #fff; padding: 14px 28px; border-radius: 12px; font-size: 0.9375rem; font-weight: 500; z-index: 200; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.toast.show { transform: translateX(-50%) translateY(0); }
</style> </style>
</head> </head>
<body> <body>
@@ -143,7 +141,6 @@
</div> </div>
</footer> </footer>
<div class="toast" id="toast">Mensaje enviado</div>
<script> <script>
document.getElementById('mobileToggle').addEventListener('click', function() { document.getElementById('mobileToggle').addEventListener('click', function() {
@@ -153,24 +150,14 @@
document.getElementById('contactForm').addEventListener('submit', async function(e) { document.getElementById('contactForm').addEventListener('submit', async function(e) {
e.preventDefault(); e.preventDefault();
const btn = this.querySelector('button[type="submit"]'); const btn = this.querySelector('button[type="submit"]');
btn.innerHTML = 'Enviando...'; btn.innerHTML = 'Enviando...'; btn.disabled = true;
btn.disabled = true;
const payload = { const payload = {
name: document.getElementById('name').value, name: document.getElementById('name').value,
email: document.getElementById('email').value, email: document.getElementById('email').value,
message: document.getElementById('message').value message: document.getElementById('message').value
}; };
try { try { await fetch('https://n8n.odoo4projects.com/webhook/odoo-expertos/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); } catch(e) {}
await fetch('https://n8n.odoo4projects.com/webhook/odoo-expertos/contact', { this.innerHTML = '<div style="text-align:center;padding:40px 0;"><div style="width:56px;height:56px;border-radius:50%;background:rgba(16,185,129,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></div><h3 style="font-size:1.25rem;font-weight:700;color:#0f172a;margin-bottom:8px;">Mensaje enviado</h3><p style="color:#64748b;font-size:0.9375rem;line-height:1.7;">Gracias por contactarnos. Te responderemos a la mayor brevedad posible.</p></div>';
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload)
});
} catch(e) {}
document.getElementById('toast').textContent = 'Mensaje enviado. Te responderemos pronto.';
document.getElementById('toast').classList.add('show');
setTimeout(() => document.getElementById('toast').classList.remove('show'), 4000);
this.reset();
btn.innerHTML = 'Enviar mensaje <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>';
btn.disabled = false;
}); });
</script> </script>
</body> </body>
contact.html
+1 -7
View File
@@ -27,8 +27,6 @@
.form-field { width: 100%; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: #0f172a; transition: all 0.2s; } .form-field { width: 100%; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: #0f172a; transition: all 0.2s; }
.form-field:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.1); background: #fff; } .form-field:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.1); background: #fff; }
label { display: block; font-size: 0.8125rem; font-weight: 600; color: #334155; margin-bottom: 6px; } label { display: block; font-size: 0.8125rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #0f172a; color: #fff; padding: 14px 28px; border-radius: 12px; font-size: 0.9375rem; font-weight: 500; z-index: 200; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.toast.show { transform: translateX(-50%) translateY(0); }
</style> </style>
</head> </head>
<body> <body>
@@ -106,7 +104,6 @@
</div> </div>
</footer> </footer>
<div class="toast" id="toast">Mensaje enviado</div>
<script> <script>
document.getElementById('mobileToggle').addEventListener('click', function() { document.getElementById('mobileToggle').addEventListener('click', function() {
@@ -123,10 +120,7 @@
message: document.getElementById('message').value message: document.getElementById('message').value
}; };
try { await fetch('https://n8n.odoo4projects.com/webhook/odoo-expertos/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); } catch(e) {} try { await fetch('https://n8n.odoo4projects.com/webhook/odoo-expertos/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); } catch(e) {}
document.getElementById('toast').textContent = 'Mensaje enviado. Te responderemos pronto.'; this.innerHTML = '<div style="text-align:center;padding:40px 0;"><div style="width:56px;height:56px;border-radius:50%;background:rgba(16,185,129,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></div><h3 style="font-size:1.25rem;font-weight:700;color:#0f172a;margin-bottom:8px;">Mensaje enviado</h3><p style="color:#64748b;font-size:0.9375rem;line-height:1.7;">Gracias por contactarnos. Te responderemos a la mayor brevedad posible.</p></div>';
document.getElementById('toast').classList.add('show');
setTimeout(() => document.getElementById('toast').classList.remove('show'), 4000);
this.reset(); btn.innerHTML = 'Enviar mensaje <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>'; btn.disabled = false;
}); });
</script> </script>
</body> </body>