Tema Divi
En el Foro Divi y Plugins para Divi, compartimos y enriquecemos nuestro conocimiento en... Ver más
organizador:
- Organizado por
-
-
Responder a: Primera capa de privacidad RGPD en los formularios Divi
-
OJO!!. Esto es lo que le he preguntado al ChatGPT, que lo sabe toooooo. Yo me tiraria un par de días para saber aplicarlo bien pero igual tu sabes hacerlo.
Respuesta:
«Puedes utilizar una capa de privacidad en forma de superposición (overlay) para incluir un aviso antes del botón de enviar en un formulario de contacto. Aquí tienes un ejemplo básico de cómo podrías implementarlo con HTML y CSS»:
<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link rel=»stylesheet» href=»styles.css»>
<title>Formulario de Contacto</title>
</head>
<body>
<div class=»privacy-overlay» id=»privacyOverlay»>
<div class=»privacy-content»>
Este sitio web utiliza cookies para mejorar la experiencia del usuario. Al utilizar nuestro sitio web, aceptas todas las cookies de acuerdo con nuestra Política de privacidad.
<button onclick=»aceptarPrivacidad()»>Aceptar</button>
</div>
</div>
<form action=»procesar_formulario.php» method=»post»>
<button type=»submit»>Enviar</button>
</form>
<script src=»script.js»></script>
</body>
</html>
EL CSS (en styles.css)
body {
font-family: Arial, sans-serif;
margin: 0;
}
.privacy-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
align-items: center;
justify-content: center;
}
.privacy-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
text-align: center;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
/* Añade estilos adicionales según tus necesidades */
El JavaScript (en script.js)
document.addEventListener(‘DOMContentLoaded’, function () {
var privacyOverlay = document.getElementById(‘privacyOverlay’);
// Mostrar la capa de privacidad cuando se carga la página
privacyOverlay.style.display = ‘flex’;
});
function aceptarPrivacidad() {
var privacyOverlay = document.getElementById(‘privacyOverlay’);
// Ocultar la capa de privacidad al aceptar
privacyOverlay.style.display = ‘none’;
}
Este código crea una superposición (overlay) con un mensaje de privacidad y un botón «Aceptar». La superposición se mostrará al cargar la página y se ocultará cuando se hace clic en el botón «Aceptar». Puedes personalizar los estilos y el contenido de la capa de privacidad según tus necesidades.
