Responder a: Primera capa de privacidad RGPD en los formularios Divi

  • Vicente Godofredo Torres

    Miembro
    29 de febrero de 2024 en 5:54 AM

    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.

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →