Suscríbete a nuestras novedades

Suscríbete a nuestras novedades

Recibe las últimas noticias y actualizaciones directamente en tu correo electrónico.

body { font-family: Arial, sans-serif; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; } .container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="email"] { width: calc(100% - 22px); padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; } button { padding: 10px 20px; border: none; background-color: #5cb85c; color: white; border-radius: 4px; cursor: pointer; } button:hover { background-color: #4cae4c; } .hidden { display: none; } .success-message { color: green; margin-top: 10px; } .error-message { color: red; margin-top: 10px; } document.addEventListener('DOMContentLoaded', () => { const form = document.getElementById('newsletter-form'); const emailInput = document.getElementById('email'); const messageDiv = document.getElementById('message'); form.addEventListener('submit', function(event) { event.preventDefault(); // Prevent default form submission const email = emailInput.value; if (!isValidEmail(email)) { showMessage('Por favor, introduce un correo electrónico válido.', 'error-message'); return; } // Simulate sending data to the server (in a real scenario, use fetch or XMLHttpRequest) console.log('Correo electrónico suscrito:', email); showMessage('¡Gracias por suscribirte a nuestras novedades!', 'success-message'); form.reset(); // Clear the form }); function isValidEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); } function showMessage(text, className) { messageDiv.textContent = text; messageDiv.className = className; // Set class for styling messageDiv.classList.remove('hidden'); // Make the message visible } });