Button to open a modal window without plugins in WordPress

Code

Today's code will allow us to add a button with a shortcode in any post or page in WordPress that when clicked will open a modal window in which we can add the content we want.

It can be used to display a subscription form, a contact form, a one-off notice, an image, an information box or, as in my case, an error notification form.

You can test the working shortcode at the bottom of any post.

[error_report_form]

Although it has been working properly for weeks on this blog, remember that this is version 1.0 and that there is always room for improvement and debugging. You can detach the CSS to make changes easier and even, if you dare, turn it into a plugin to add more settings and configurations for quick and easy access.

Below the code you will find a description of its options and instructions on how to try it out.

Code

/*
 * Versión: 1.0
 * Última actualización: 13-03-2025 17:54:00
 */

// Shortcode para mostrar el botón y el formulario modal actualizado en jrmora.com
function error_report_form_shortcode() {
    // Generar números aleatorios para la operación matemática
    $num1 = rand(1, 9);
    $num2 = rand(1, 9);
    $sum = $num1 + $num2;

    // Iniciar sesión si no está iniciada
    if (!session_id()) {
        session_start();
    }

    // Guardar la suma en una variable de sesión para validar después
    $_SESSION['captcha_sum'] = $sum;

    // HTML del botón y el modal
    ob_start();
    ?>
    <button id="openErrorModal" style="padding: 10px 20px; background-color: #ffcc00; color: black; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;">
        ⚠ Comunicar error
    </button>

    <div id="errorModalOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;">
        <div id="errorModal" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; border-radius: 7px; width: 90%; max-width: 500px;">
            <span id="closeModalBtn" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px; background-color: black; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 30px;">&times;</span>
            <h3 style="font-size: 18px;">Comunicar error (Para errores ortográficos o de malfuncionamiento del sitio)</h3>
            <form id="errorForm" method="post">
                <input type="hidden" name="action" value="submit_error_report">
                <label for="name" style="font-size: 14px;">Nombre:</label>
                <input type="text" id="name" name="name" required style="background-color: #f5f5f5; padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 100%; margin-bottom: 12px;">
                <div id="nameError" style="color: red; display: none; font-size: 12px; margin-bottom: 12px;">No se permiten enlaces o dominios en el campo "Nombre".</div>
                <label for="message" style="font-size: 14px;">Descripción del error:</label>
                <textarea id="message" name="message" required style="background-color: #f5f5f5; padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 100%; margin-bottom: 12px;"></textarea>
                <div id="messageError" style="color: red; display: none; font-size: 12px; margin-bottom: 12px;">No se permiten enlaces o dominios en el campo "Mensaje".</div>
                <label for="captcha" style="font-size: 14px;">¿Eres humano? ¿Cuánto es <?php echo $num1; ?> + <?php echo $num2; ?>?</label>
                <input type="text" id="captcha" name="captcha" required style="background-color: #f5f5f5; padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 100%; margin-bottom: 12px;">
                <div id="captchaError" style="color: red; display: none; font-size: 12px; margin-bottom: 12px;">El resultado de la suma es incorrecto.</div>
                <!-- Opcional: Añadir reCaptcha si se proporcionan las claves -->
                <?php if (defined('RECAPTCHA_SITE_KEY') && defined('RECAPTCHA_SECRET_KEY')) : ?>
                    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                    <div class="g-recaptcha" data-sitekey="<?php echo RECAPTCHA_SITE_KEY; ?>" style="margin-bottom: 12px;"></div>
                <?php endif; ?>
                <div style="text-align: center;">
                    <input type="submit" value="Enviar" style="background-color: #bc080e; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; display: inline-block;">
                </div>
            </form>
            <div id="successMessage" style="color: green; display: none; margin-top: 10px; font-size: 14px; text-align: center;">Gracias por comunicar el error.</div>
        </div>
    </div>

    <style>
        /* Estilos para dispositivos móviles */
        @media (max-width: 768px) {
            #errorModal {
                width: 90% !important; /* Ajusta el ancho del modal al 90% de la pantalla */
                max-width: 90% !important; /* Asegura que no exceda el 90% del ancho */
                padding: 15px !important; /* Reduce el padding para más espacio */
            }

            #errorForm input, #errorForm textarea {
                font-size: 16px !important; /* Aumenta el tamaño de la fuente para mejor legibilidad */
            }

            #errorForm label {
                font-size: 16px !important; /* Aumenta el tamaño de la fuente de las etiquetas */
            }
        }
    </style>

    <script>
        // Abrir modal
        document.getElementById('openErrorModal').addEventListener('click', function() {
            document.getElementById('errorModalOverlay').style.display = 'block';
        });

        // Cerrar modal al hacer clic en el aspa
        document.getElementById('closeModalBtn').addEventListener('click', function() {
            document.getElementById('errorModalOverlay').style.display = 'none';
        });

        // Cerrar modal al hacer clic fuera de él
        document.getElementById('errorModalOverlay').addEventListener('click', function(event) {
            if (event.target === document.getElementById('errorModalOverlay')) {
                document.getElementById('errorModalOverlay').style.display = 'none';
            }
        });

        // Función para validar si hay enlaces o dominios en el texto
        function containsUrlOrDomain(text) {
            // Expresión regular para detectar enlaces o dominios
            const urlPattern = /(http|https|www|\[url|\[link)|(\b\w+\.(com|org|net|io|co|edu|gov|mil|biz|info|xyz|me|tv|us|uk|ca|au|de|fr|es|it|nl|ru|jp|cn|in|br|mx|ar|cl|pe|ve|co\.uk|co\.jp|co\.in|ac\.uk|gov\.uk|edu\.au|com\.au|org\.uk|net\.au)\b)/i;
            return urlPattern.test(text);
        }

        // Manejar el envío del formulario con AJAX
        document.getElementById('errorForm').addEventListener('submit', function(e) {
            e.preventDefault(); // Evitar envío tradicional del formulario

            // Ocultar mensajes de error previos
            document.getElementById('nameError').style.display = 'none';
            document.getElementById('messageError').style.display = 'none';
            document.getElementById('captchaError').style.display = 'none';

            // Validar campos
            var name = document.getElementById('name').value;
            var message = document.getElementById('message').value;
            var captcha = document.getElementById('captcha').value;
            var hasError = false;

            // Validar enlaces o dominios en el nombre
            if (containsUrlOrDomain(name)) {
                document.getElementById('nameError').style.display = 'block';
                hasError = true;
            }

            // Validar enlaces o dominios en el mensaje
            if (containsUrlOrDomain(message)) {
                document.getElementById('messageError').style.display = 'block';
                hasError = true;
            }

            // Validar el captcha
            if (captcha !== '<?php echo $sum; ?>') {
                document.getElementById('captchaError').style.display = 'block';
                hasError = true;
            }

            // Si hay errores, detener el envío
            if (hasError) {
                return;
            }

            // Enviar el formulario si no hay errores
            var formData = new FormData(this);
            fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                // Mostrar mensaje de éxito
                document.getElementById('successMessage').style.display = 'block';

                // Ocultar el formulario
                document.getElementById('errorForm').style.display = 'none';

                // Esperar 3 segundos y cerrar el modal
                setTimeout(function() {
                    document.getElementById('errorModalOverlay').style.display = 'none';
                    document.getElementById('successMessage').style.display = 'none';
                    document.getElementById('errorForm').style.display = 'block'; // Restaurar el formulario
                }, 3000);
            })
            .catch(error => console.error('Error:', error));
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('error_report_form', 'error_report_form_shortcode');

// Manejar el envío del formulario
function handle_error_report_form() {
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'submit_error_report') {
        // Iniciar sesión si no está iniciada
        if (!session_id()) {
            session_start();
        }

        // Validar el captcha
        if (!isset($_SESSION['captcha_sum']) || !isset($_POST['captcha']) || $_POST['captcha'] != $_SESSION['captcha_sum']) {
            wp_die('Captcha incorrecto. Por favor, intenta de nuevo.');
        }

        // Validar que no haya enlaces o dominios en los campos
        $name = isset($_POST['name']) ? sanitize_text_field($_POST['name']) : '';
        $message = isset($_POST['message']) ? sanitize_text_field($_POST['message']) : '';
        if (preg_match('/(http|https|www|\[url|\[link)|(\b\w+\.(com|org|net|io|co|edu|gov|mil|biz|info|xyz|me|tv|us|uk|ca|au|de|fr|es|it|nl|ru|jp|cn|in|br|mx|ar|cl|pe|ve|co\.uk|co\.jp|co\.in|ac\.uk|gov\.uk|edu\.au|com\.au|org\.uk|net\.au)\b)/i', $name . $message)) {
            wp_die('No se permiten enlaces o dominios en los campos.');
        }

        // Validar reCaptcha (opcional)
        if (defined('RECAPTCHA_SITE_KEY') && defined('RECAPTCHA_SECRET_KEY')) {
            if (!isset($_POST['g-recaptcha-response'])) {
                wp_die('Por favor, completa el reCaptcha.');
            }

            $recaptcha_response = $_POST['g-recaptcha-response'];
            $recaptcha_secret = RECAPTCHA_SECRET_KEY;
            $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
            $recaptcha_data = [
                'secret' => $recaptcha_secret,
                'response' => $recaptcha_response,
                'remoteip' => $_SERVER['REMOTE_ADDR']
            ];

            $recaptcha_options = [
                'http' => [
                    'header' => "Content-type: application/x-www-form-urlencoded\r\n",
                    'method' => 'POST',
                    'content' => http_build_query($recaptcha_data)
                ]
            ];

            $recaptcha_context = stream_context_create($recaptcha_options);
            $recaptcha_result = file_get_contents($recaptcha_url, false, $recaptcha_context);
            $recaptcha_json = json_decode($recaptcha_result);

            if (!$recaptcha_json->success) {
                wp_die('Por favor, completa el reCaptcha correctamente.');
            }
        }

        // Obtener la URL de origen
        $url = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : 'URL desconocida';

        // Enviar correo electrónico
        $to = get_option('admin_email'); // Correo del administrador
        $subject = 'Comunicación de Error desde ' . $url;
        $body = "Nombre: $name\n\nMensaje: $message\n\nURL: $url";
        $headers = array('Content-Type: text/plain; charset=UTF-8');

        if (wp_mail($to, $subject, $body, $headers)) {
            echo 'success';
        } else {
            echo 'Hubo un error al enviar el mensaje.';
        }

        exit;
    }
}
add_action('wp_ajax_submit_error_report', 'handle_error_report_form');
add_action('wp_ajax_nopriv_submit_error_report', 'handle_error_report_form');

// Definir claves de reCaptcha (opcional)
// define('RECAPTCHA_SITE_KEY', 'TU_SITE_KEY');
// define('RECAPTCHA_SECRET_KEY', 'TU_SECRET_KEY');

Functionality of the form

Shortcode:

[error_report_form]

Displays a button that opens a modal form for reporting errors.
The form includes fields for name, message and a simple mathematical captcha.
Validate that no links or domains are entered in the fields.
Send an email to the blog administrator with details of the error.

Form fields
```
:Polylang placeholder do not modify
```

Validations
```
:Polylang placeholder do not modify
```

Submission of the form
```
:Polylang placeholder do not modify
```

Spam prevention
```
:Polylang placeholder do not modify
```

Form styles

Report error" button
```
:Polylang placeholder do not modify
```

Modal (Pop-up window)
```
:Polylang placeholder do not modify
```

Closing handle (Button to close the modal its class is id="closeModalBtn")
```
:Polylang placeholder do not modify
```

Form fields
```
:Polylang placeholder do not modify
```

Send" button
```
:Polylang placeholder do not modify
```

Error messages
```
:Polylang placeholder do not modify
```

Success message
```
:Polylang placeholder do not modify
```

How to modify styles

Modify colours
```
:Polylang placeholder do not modify
```

Modify font sizes
```
:Polylang placeholder do not modify
```

Modify borders and rounded corners
```
:Polylang placeholder do not modify
```

Modify spacing
```
:Polylang placeholder do not modify
```

Modify the width of the fields
```
:Polylang placeholder do not modify
```

Additional options

reCaptcha
```
:Polylang placeholder do not modify
```

Email personalisation
```
:Polylang placeholder do not modify
```

Instructions for use

Copy and paste the code into your theme's functions.php file.
Use the shortcode on any page or post.
Customise styles as needed.
If you wish to use reCaptcha, please follow the instructions in the "Additional Options" section.