Tul xxx Tul

Viewing: index2.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario Marketing</title>
    <link rel="icon" type="image/png" href="http://emprendo.com.co/wp-content/uploads/2024/12/Favicon-s.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Jost', sans-serif;
            background-color: #f8f9fa;
        }

        .navbar {
            background-color: white;
        }

        .form-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: #1a96d3;
            border-color: #1a96d3;
        }

        .btn-primary:hover {
            background-color: #ff9e1b;
            border-color: #ff9e1b;
        }

        .form-label {
            color: #495057;
            font-weight: 500;
        }

        .form-control:focus {
            border-color: #f9b252;
            box-shadow: 0 0 0 0.2rem rgba(249, 178, 82, 0.25);
        }

        .form-check-input1 {
            width: 1em;
            /* Ancho */
            height: 1em;
            /* Altura */
            margin-top: 0.25em;
            /* Margen superior */
            vertical-align: top;
            /* Alineación vertical */
            background-color: #fff;
            /* Fondo blanco */
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            border: 1px solid #dfdfdf;
            /* Borde gris claro */
            border-radius: 0.25em;
            /* Bordes ligeramente redondeados */
            appearance: none;
            /* Elimina estilos nativos */
            -webkit-print-color-adjust: exact;
            /* Ajuste de color en impresión */
            color-adjust: exact;
            /* Ajuste de color en impresión */
        }

        .form-check-input1:checked {
            background-color: #0d6efd;
            /* Fondo azul al estar marcado */
            border-color: #0d6efd;
            /* Borde azul al estar marcado */
        }

        .form-check-input1:focus {
            border-color: #86b7fe;
            /* Borde azul claro al enfocar */
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            /* Sombra azul */
        }

        .form-check-input1:disabled {
            pointer-events: none;
            /* No interactuable */
            background-color: #e9ecef;
            /* Fondo gris claro */
            border-color: #dee2e6;
            /* Borde gris claro */
        }

        .form-check-input1:checked:disabled {
            background-color: rgba(13, 110, 253, 0.5);
            /* Fondo azul semitransparente */
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark mb-4">
        <div class="container">
            <a class="navbar-brand" href="#">
            <a class="navbar-brand" href="https://www.emprendo.com.co/eComercial/" target="_blank">
                <img src="http://emprendo.com.co/wp-content/uploads/2024/12/eComercials.png" alt="Logo" height="100">
            </a>
        </div>
    </nav>

    <div class="container mb-5">
        <div class="form-container p-4 p-md-5">
            <form id="marketingForm" onsubmit="submitForm(event)">
                <div class="row g-4">
                    <div class="col-12">
                        <input type="hidden" id="iDFormulario" name="iDFormulario">
                        <input type="hidden" id="Fecha" name="Fecha">
                    </div>

                    <div class="col-md-6">
                        <label for="nombreComercial" class="form-label">Nombre Comercial</label>
                        <div><small class="form-text text-muted">Por favor, ingrese el nombre comercial de su
                                empresa.</small></div>
                        <input type="text" class="form-control" id="nombreComercial" name="Nombre Comercial" required>
                    </div>

                    <div class="col-md-6">
                        <label for="razonSocial" class="form-label">Razón Social</label>
                        <div><small class="form-text text-muted">Por favor, ingrese el nombre legal de su
                                empresa.</small></div>
                        <input type="text" class="form-control" id="razonSocial" name="Razón Social" required>
                    </div>

                    <h3 style="color:dimgray;">Propositos de la Campaña</h1>
                        <small class="form-text text-muted">Por favor, seleccione tres propósitos en orden de prioridad                            de
                            las metas que desea alcanzar en su empresa.</small>
                        <div class="col-md-4">
                            <label for="proposito1" class="form-label">Propósito 1</label>
                            <select class="form-select" id="proposito1" name="Propósito 1" required
                                onchange="updateOptions()">
                                <option value="">Seleccione...</option>
                                <option value="Aumentar la Captación de Clientes">Aumentar la Captación de Clientes
                                </option>
                                <option value="Mejorar la Experiencia del Cliente">Mejorar la Experiencia del Cliente
                                </option>
                                <option value="Fortalecer la Identidad de Marca">Fortalecer la Identidad de Marca
                                </option>
                                <option value="Incrementar las Ventas">Incrementar las Ventas</option>
                                <option value="Promocionar Productos o Servicios Específicos">Promocionar Productos o
                                    Servicios Específicos</option>
                                <option value="Facilitar la Comunicación con Clientes">Facilitar la Comunicación con
                                    Clientes</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="proposito2" class="form-label">Propósito 2</label>
                            <select class="form-select" id="proposito2" name="Propósito 2" required
                                onchange="updateOptions()">
                                <option value="">Seleccione...</option>
                                <option value="Aumentar la Captación de Clientes">Aumentar la Captación de Clientes
                                </option>
                                <option value="Mejorar la Experiencia del Cliente">Mejorar la Experiencia del Cliente
                                </option>
                                <option value="Fortalecer la Identidad de Marca">Fortalecer la Identidad de Marca
                                </option>
                                <option value="Incrementar las Ventas">Incrementar las Ventas</option>
                                <option value="Promocionar Productos o Servicios Específicos">Promocionar Productos o
                                    Servicios Específicos</option>
                                <option value="Facilitar la Comunicación con Clientes">Facilitar la Comunicación con
                                    Clientes</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="proposito3" class="form-label">Propósito 3</label>
                            <select class="form-select" id="proposito3" name="Propósito 3" required
                                onchange="updateOptions()">
                                <option value="">Seleccione...</option>
                                <option value="Aumentar la Captación de Clientes">Aumentar la Captación de Clientes
                                </option>
                                <option value="Mejorar la Experiencia del Cliente">Mejorar la Experiencia del Cliente
                                </option>
                                <option value="Fortalecer la Identidad de Marca">Fortalecer la Identidad de Marca
                                </option>
                                <option value="Incrementar las Ventas">Incrementar las Ventas</option>
                                <option value="Promocionar Productos o Servicios Específicos">Promocionar Productos o
                                    Servicios Específicos</option>
                                <option value="Facilitar la Comunicación con Clientes">Facilitar la Comunicación con
                                    Clientes</option>
                            </select>
                        </div>


                        <div class="col-md-6">
                            <label for="ubicacion" class="form-label">Ubicación</label>
                            <small class="form-text text-muted">Por favor, escribe la ciudad(es) donde se utilizaría el contenido.</small>
                                <input type="text" class="form-control" id="ubicacion" name="Ubicación" value="Cúcuta"
                                    required>
                        </div>

                        <div class="col-md-6">
                            <label for="genero" class="form-label">Género</label>
                            <small class="form-text text-muted">Por favor, elige si tu público es masculino, femenino o
                                ambos.</small>
                            <select class="form-select" id="genero" name="Género" required>
                                <option value="">Seleccione...</option>
                                <option value="Masculino">Masculino</option>
                                <option value="Femenino">Femenino</option>
                                <option value="Unisex">Unisex</option>
                            </select>
                        </div>

                        <!-- Edades -->
                        <div class="col-md-6">
                            <div class="question" id="edades">
                                <div><label class="form-label">Edades</label></div>
                                <div><small class="form-text text-muted">Selecciona las edades de tu público (puede ser más de una).</small></div><br>
                                <input type="checkbox" class="form-check-input" value="Bebés: 0-2 años"> Bebés: 0-2 años<br>
                                <input type="checkbox" class="form-check-input" value="Niños: 3-12 años"> Niños: 3-12 años<br>
                                <input type="checkbox" class="form-check-input" value="Adolescentes: 13-17 años"> Adolescentes: 13-17 años<br>
                                <input type="checkbox" class="form-check-input" value="Jóvenes Adultos: 18-24 años"> Jóvenes Adultos: 18-24 años<br>
                                <input type="checkbox" class="form-check-input" value="Adultos: 25-39 años"> Adultos: 25-39 años<br>
                                <input type="checkbox" class="form-check-input" value="Adultos Mayores: 40-59 años"> Adultos Mayores: 40-59 años<br>
                                <input type="checkbox" class="form-check-input" value="Personas Mayores: 60-74 años"> Personas Mayores: 60-74 años<br>
                                <input type="checkbox" class="form-check-input" value="Ancianos: 75+ años"> Ancianos: 75+ años<br>
                                <input type="checkbox" id="todos-1" class="form-check-input"> Seleccionar todos<br>
                            </div>
                        </div>

                        <!-- Nivel Socioeconómico -->
                        <div class="col-md-6">
                            <div class="question" data-question="2">
                                <div><label class="form-label">Nivel Socioeconómico</label></div>
                                <div><small class="form-text text-muted">Selecciona el poder adquisitivo de tu público
                                        en sus compras
                                        frecuentes.</small></div><br>
                                <input type="checkbox" class="form-check-input"> Estrato 1 - Bajo Baja<br>
                                <input type="checkbox" class="form-check-input"> Estrato 2 - Bajo Medio<br>
                                <input type="checkbox" class="form-check-input"> Estrato 3 - Medio Bajo<br>
                                <input type="checkbox" class="form-check-input"> Estrato 4 - Medio<br>
                                <input type="checkbox" class="form-check-input"> Estrato 5 - Medio Alto<br>
                                <input type="checkbox" class="form-check-input"> Estrato 6 - Alto<br>
                                <input type="checkbox" id="todos-2" class="form-check-input"> Seleccionar todos<br>
                            </div>
                        </div>

                        <div class="col-12">
                            <label for="intereses" class="form-label">Intereses y comportamientos</label>
                            <small class="form-text text-muted">Cuál es la motivación de tu público para visitar tu
                                tienda.</small>
                            <textarea class="form-control" id="intereses" name="Intereses y comportamientos" rows="3"
                                required></textarea>
                        </div>

                        <div class="col-12">
                            <label for="mensaje" class="form-label">Mensaje</label>
                            <small class="form-text text-muted">Qué te gustaría que mencione los contenidos a ser creados (frases o
                                palabras claves).</small>
                            <textarea class="form-control" id="mensaje" name="Mensaje" rows="3" required></textarea>
                        </div>

                        <!-- Tono de voz -->
                        <div class="col-md-6">
                            <div class="question" data-question="3">
                                <div><label class="form-label">Tono de voz</label></div>
                                <div><small class="form-text text-muted">Cómo te gustaría que suene tu spot o
                                        contenido.</small></div>
                                <input type="checkbox" class="form-check-input"> Formal<br>
                                <input type="checkbox" class="form-check-input"> Informal<br>
                                <input type="checkbox" class="form-check-input"> Divertido<br>
                                <input type="checkbox" class="form-check-input"> Serio<br>
                                <input type="checkbox" class="form-check-input"> Emotivo<br>
                                <input type="checkbox" id="todos-3" class="form-check-input"> Seleccionar todos<br>
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <label for="iDGenero" class="form-label">Géneros Musicales</label>
                            <div><small class="form-text text-muted">Escoja los géneros musicales en los que desea sean creados sus contenidos:</small></div>
                            <div class="row">
                                <div class="col-md-3">
                                    <input type="checkbox" class="form-check-input"> Afro-Colombiana <br>
                                    <input type="checkbox" class="form-check-input"> Bachata <br>
                                    <input type="checkbox" class="form-check-input"> Balada <br>
                                    <input type="checkbox" class="form-check-input"> Blues <br>
                                    <input type="checkbox" class="form-check-input"> Bolero <br>
                                    <input type="checkbox" class="form-check-input"> Bossa Nova <br>
                                    <input type="checkbox" class="form-check-input"> Cámara <br>
                                    <input type="checkbox" class="form-check-input"> Carranga <br>
                                    <input type="checkbox" class="form-check-input"> Chicamocha <br>
                                    <input type="checkbox" class="form-check-input"> Country <br>
                                    <input type="checkbox" class="form-check-input"> Cristiana <br>
                                    <input type="checkbox" class="form-check-input"> Cumbia <br>
                                    <input type="checkbox" class="form-check-input"> Dance <br>
                                </div>
                                <div class="col-md-3">
                                    <input type="checkbox" class="form-check-input"> Dancehall <br>
                                    <input type="checkbox" class="form-check-input"> Despecho <br>
                                    <input type="checkbox" class="form-check-input"> EDM <br>
                                    <input type="checkbox" class="form-check-input"> Experimental Latina <br>
                                    <input type="checkbox" class="form-check-input"> Flamenco <br>
                                    <input type="checkbox" class="form-check-input"> Folklore <br>
                                    <input type="checkbox" class="form-check-input"> Funk <br>
                                    <input type="checkbox" class="form-check-input"> Fusión Tropical <br>
                                    <input type="checkbox" class="form-check-input"> Hip-Hop <br>
                                    <input type="checkbox" class="form-check-input"> Indie Rock <br>
                                    <input type="checkbox" class="form-check-input"> Instrumental <br>
                                    <input type="checkbox" class="form-check-input"> Jazz Latino <br>
                                    <input type="checkbox" class="form-check-input"> Joropo <br>
                                </div>
                                <div class="col-md-3">
                                    <input type="checkbox" class="form-check-input"> K-Pop <br>
                                    <input type="checkbox" class="form-check-input"> Merengue <br>
                                    <input type="checkbox" class="form-check-input"> Metal <br>
                                    <input type="checkbox" class="form-check-input"> Música Andina (Bambuco y
                                    Guabina) <br>
                                    <input type="checkbox" class="form-check-input"> Música del Pacífico <br>
                                    <input type="checkbox" class="form-check-input"> Música Folklórica <br>
                                    <input type="checkbox" class="form-check-input"> Música Popular <br>
                                    <input type="checkbox" class="form-check-input"> Música Urbana <br>
                                    <input type="checkbox" class="form-check-input"> Navideña <br>
                                    <input type="checkbox" class="form-check-input"> Pop <br>
                                    <input type="checkbox" class="form-check-input"> Protesta <br>
                                    <input type="checkbox" class="form-check-input"> Raíces <br>
                                </div>
                                <div class="col-md-3">
                                    <input type="checkbox" class="form-check-input"> Ranchera <br>
                                    <input type="checkbox" class="form-check-input"> Reggae <br>
                                    <input type="checkbox" class="form-check-input"> Reggaetón <br>
                                    <input type="checkbox" class="form-check-input"> Salsa <br>
                                    <input type="checkbox" class="form-check-input"> Ska <br>
                                    <input type="checkbox" class="form-check-input"> Soul <br>
                                    <input type="checkbox" class="form-check-input"> Tango <br>
                                    <input type="checkbox" class="form-check-input"> Trance <br>
                                    <input type="checkbox" class="form-check-input"> Tropical (Vallenato fusionado)
                                    <br>
                                    <input type="checkbox" class="form-check-input"> Tropical Caribeño <br>
                                    <input type="checkbox" class="form-check-input"> Trova <br>
                                    <input type="checkbox" class="form-check-input"> Vallenato <br>
                                </div>
                            </div>
                        </div>

                        <br>

                        <div class="col-12">
                            <label for="frases" class="form-label">Frases o slogans</label>
                            <small class="form-text text-muted">Escribe una frase que identifique tu empresa.</small>
                            <textarea class="form-control" id="frases" name="Frases o slogans" rows="2"
                                required></textarea>
                        </div>

                        <div class="col-12">
                            <label for="promociones" class="form-label">Promociones o descuentos</label>
                            <small class="form-text text-muted">Especifica si tienes alguna promoción activa o un producto destacado o en descuento. Describe los detalles.</small>
                            <textarea class="form-control" id="promociones" name="Promociones o descuentos" rows="2"
                                required></textarea>
                        </div>

                        <div class="col-12">
                            <label for="inspiraciones" class="form-label">Inspiraciones</label>
                            <small class="form-text text-muted">Menciona una marca, empresa, cantante o celebridad con la que identifiques tu marca .</small>
                            <textarea class="form-control" id="inspiraciones" name="Inspiraciones" rows="2"
                                required></textarea>
                        </div>

                        <div class="col-12">
                            <label for="tenerEnCuenta" class="form-label">A tener en cuenta</label>
                            <small class="form-text text-muted">Menciona algo que debamos saber y no se encuentre en los campos anteriores.</small>
                        </div>
                            <textarea class="form-control" id="tenerEnCuenta" name="A tener en cuenta" rows="2"
                                required></textarea>

                        <div class="col-12 text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-lg px-5">Enviar</button>
                        </div>
                </div>
            </form>
        </div>
    </div>

    <footer class="text-center my-4">
        <p>© 2024 <a href="https://www.emprendo.com.co/eComercial/" target="_blank" class="text-blue-600 hover:underline"
                style="color: #ff3900;">eComercial</a>. Todos los derechos reservados</p>
    </footer>

    <script>
        // Generar ID único para el formulario
        function generateID() {
            return 'FORM_' + Date.now();
        }

        // Obtener fecha actual en formato DD/MM/YYYY
        function getCurrentDate() {
            const date = new Date();
            return date.toLocaleDateString('es-ES');
        }

        // Establecer valores iniciales
        document.getElementById('iDFormulario').value = generateID();
        document.getElementById('Fecha').value = getCurrentDate();

        async function submitForm(event) {
    event.preventDefault();

    const form = document.getElementById('marketingForm');
    const submitButton = form.querySelector('button[type="submit"]');

    try {
        submitButton.disabled = true;
        submitButton.innerHTML = 'Enviando...';

        const formData = new FormData(form);
        const data = Object.fromEntries(formData);

        // Recopilar valores de Edades
        const edades = Array.from(document.querySelectorAll('#edades input[type="checkbox"]:checked:not(#todos-1)'))
            .map(checkbox => checkbox.value)
            .filter(Boolean);
        data['Edades'] = edades.join(', ');

        // Recopilar valores de Nivel Socioeconómico
        const nivelSocioeconomico = Array.from(document.querySelectorAll('.question[data-question="2"] input[type="checkbox"]:checked:not(#todos-2)'))
            .map(checkbox => checkbox.nextSibling.textContent.trim())
            .filter(Boolean);
        data['Nivel Socioeconómico'] = nivelSocioeconomico.join(', ');

        // Recopilar valores de Tono de voz
        const tonoVoz = Array.from(document.querySelectorAll('.question[data-question="3"] input[type="checkbox"]:checked:not(#todos-3)'))
            .map(checkbox => checkbox.nextSibling.textContent.trim())
            .filter(Boolean);
        data['Tono de voz'] = tonoVoz.join(', ');

        // Recopilar valores de Géneros Musicales
        const generosMusicales = Array.from(document.querySelectorAll('label[for="iDGenero"]').item(0).parentElement.querySelectorAll('input[type="checkbox"]:checked'))
            .map(checkbox => checkbox.nextSibling.textContent.trim())
            .filter(Boolean);
        data['iDGenero'] = generosMusicales.join(', ');

        console.log('Datos a enviar:', data); // Para depuración

        const response = await fetch('https://script.google.com/macros/s/AKfycby4vnZlMh5ptZCkIyxUZ6fAHPNnN1KQXotXqBy6swe0nqoV3SX42l25qWe4Tnmm5YnJCA/exec', {
            method: 'POST',
            mode: 'no-cors',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        });

        alert('Formulario enviado con éxito');
        form.reset();
        document.getElementById('iDFormulario').value = generateID();
        document.getElementById('Fecha').value = getCurrentDate();

    } catch (error) {
        alert('Error al enviar el formulario. Por favor, intente nuevamente.');
        console.error('Error:', error);
    } finally {
        submitButton.disabled = false;
        submitButton.innerHTML = 'Enviar';
    }
}

        function updateOptions() {
            const proposito1 = document.getElementById('proposito1');
            const proposito2 = document.getElementById('proposito2');
            const proposito3 = document.getElementById('proposito3');

            const selectedValues = [
                proposito1.value,
                proposito2.value,
                proposito3.value
            ];

            const options = [
                "Aumentar la Captación de Clientes",
                "Mejorar la Experiencia del Cliente",
                "Fortalecer la Identidad de Marca",
                "Incrementar las Ventas",
                "Promocionar Productos o Servicios Específicos",
                "Facilitar la Comunicación con Clientes"
            ];

            // Función para actualizar un select específico
            function updateSelect(select) {
                const currentValue = select.value;
                select.innerHTML = '<option value="">Seleccione...</option>'; // Reiniciar opciones
                options.forEach(option => {
                    if (!selectedValues.includes(option) || option === currentValue) {
                        const newOption = document.createElement('option');
                        newOption.value = option;
                        newOption.textContent = option;
                        select.appendChild(newOption);
                    }
                });
                // Restablecer el valor seleccionado si es válido
                if (options.includes(currentValue)) {
                    select.value = currentValue;
                }
            }

            // Actualizar proposito2 y proposito3
            updateSelect(proposito2);
            updateSelect(proposito3);
        }

        // Seleccionamos todos los contenedores de preguntas
        const questions = document.querySelectorAll('.question');

        questions.forEach(question => {
            // Seleccionamos los checkboxes dentro de este contenedor
            const checkboxes = question.querySelectorAll('.form-check-input');
            const selectAllCheckbox = question.querySelector('[id^="todos"]');

            // Evento para la casilla "Seleccionar todos"
            selectAllCheckbox.addEventListener('change', function () {
                checkboxes.forEach(checkbox => {
                    checkbox.checked = selectAllCheckbox.checked;
                });
            });

            // Evento para cada casilla individual
            checkboxes.forEach(checkbox => {
                if (checkbox !== selectAllCheckbox) { // Excluimos "Seleccionar todos"
                    checkbox.addEventListener('change', function () {
                        if (!checkbox.checked) {
                            selectAllCheckbox.checked = false; // Deselecciona "Todos" si una casilla se desmarca
                        } else if ([...checkboxes].filter(cb => cb !== selectAllCheckbox).every(cb => cb.checked)) {
                            selectAllCheckbox.checked = true; // Marca "Todos" si todas las demás están marcadas
                        }
                    });
                }
            });
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64