ControlLabSoftWeb/contact.html at main · Joseleelsuper/ControlLabSoftWeb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="es">
    <head></head>
        <meta name = "viewport" content = "width=device-width, initial-scale=1">    <!-- Escalado de la página -->
        <meta charset="UTF-8">                                                      <!-- Codificación de caracteres -->
        <title>ControlLabSoft</title>                                               <!-- Título de la página -->
        <link rel="icon" href="images/Logo.webp" type="image/webp">                 <!-- Icono de la página -->
        <link rel="stylesheet" href="styles/contact.css">                           <!-- Hoja de estilos -->
        <link rel="stylesheet" href="styles/header.css">                            <!-- Hoja de estilos de la página -->
        <link rel="stylesheet" href="styles/body.css">                             <!-- Hoja de estilos del pie de página -->
    </head>
    <body>
        <!-- Cargar el contenido del encabezado de la página -->
        <div id="header"></div>
        <script>
            fetch('headers/header.html')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('header').innerHTML = data;
                });
        </script>
        <!-- Script para enviar un correo electrónico con los datos del formulario -->
        <script>
            function sendEmail() {
                var name = document.querySelector('input[placeholder="Nombre y apellido, si procede."]').value;
                var email = document.querySelector('input[type="email"]').value;
                var message = document.querySelector('input[placeholder="¿Qué dudas tienes? Las resolveremos."]').value;

                var body = `¡Buenas, ControlLabSoft!\n\nMe llamo ${name} y quería preguntar lo siguiente: ${message}\n\nMe gustaría que me respondieseis en el siguiente correo: ${email}\n\n¡Muchas gracias!`;

                /*Borrar los datos del formulario*/
                document.querySelector('input[placeholder="Nombre y apellido, si procede."]').value = '';
                document.querySelector('input[type="email"]').value = '';
                document.querySelector('input[placeholder="¿Qué dudas tienes? Las resolveremos."]').value = '';

                window.location.href = `mailto:controllabsoft@gmail.com?subject=Consulta&body=${encodeURIComponent(body)}`;
            }
        </script>
        <!-- formulario con imputs para contactar-->
        <form class="formulario" onsubmit="event.preventDefault(); sendEmail();">
            <h2>Contáctanos</h2>
            <p type="Name:">
                <input placeholder="Nombre y apellido, si procede." required></input>
            </p>
            <p type="Email:">
                <input type="email" placeholder="Tu email para que te contactemos." required></input>
            </p>
            <p type="Message:">
                <input placeholder="¿Qué dudas tienes? Las resolveremos." required></input>
            </p>
            <button>Enviar mensaje</button>
        </form>
    </body>
</html>