aavaldez.github.io/contacto.html at main · aavaldez/aavaldez.github.io · 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mriya Accesorios</title>
    <link rel="stylesheet" href="assets/css/estilos.css">
  </head>
  <body>
    <div class="bg-container">

      <div class="page-header">
        <div class="logo">
          <a href="./index.html"><img src="./assets/imgs/logo.png" alt="Mriya"></a>
        </div>
        <div class="menu-container">
          <ul class="menu">
            <li><a href="./frutal.html">Colección frutal 2022</a></li>
            <li><a href="./formas.html">Colección formas 2023</a></li>
            <li><a href="./contacto.html">Contactanos</a></li>
          </ul>
        </div>
      </div>

      <div class="page-body">
        <div id="form" class="form-container">
          <h2>Contactanos y contanos que accesorios te gustaria adquirir</h2>
          <p>Si preferís que el contacto sea por Whatsapp dejá tu celular.</p>
          <form onsubmit="return validar()" novalidate>
            <div class="form-grupo">
              <input type="text" name="nombre" id="nombre" required placeholder=" "/>
              <label for="nombre">Nombre</label>
            </div>
            <div class="form-grupo">
              <input type="text" name="correo" id="correo" required placeholder=" "/>
              <label for="correo">Correo electrónico</label>
            </div>
            <div class="form-grupo">
              <input type="text" name="celular" id="celular" required placeholder=" "/>
              <label for="celular">Celular (Opcional)</label>
            </div>
            <div class="form-grupo">
              <textarea type="text" name="mensaje" id="mensaje" cols="50" rows="10" required placeholder=" ">Hola Mriya, estoy interesada en algunos de tus accesorios!</textarea>
              <label for="mensaje">Mensaje</label>
            </div>
            <input id="enviar" type="submit" value="Consultar">
          </form>
        </div>
        <div id="contacto" class="form-container"><span id="regresar">Volver</span></div>
      </div>

      <div class="page-footer">
        <a href="https://www.facebook.com"><img class="social-logo" src="./assets/imgs/pngfind.com-facebook-png-icon-262495.png" alt="Facebook"></a>
        <a href="https://www.instagram.com"><img class="social-logo" src="./assets/imgs/pngfind.com-instagram-icons-png-755741.png" alt="Instagram"></a>
      </div>
    </div>

    <script>
      let divForm = document.getElementById("form");
      let divContacto = document.getElementById("contacto");
      let btnRegresar = document.querySelector("#regresar");
      if(btnRegresar)btnRegresar.addEventListener("click", regresar);
      function regresar() {
        divForm.style.display = "block";
        divContacto.style.display = "none";
      }

      function validar(){
        let sinError = true;
        let nombre = document.getElementById("nombre");
        let nombre_error = document.getElementById("nombre_error");
        let correo = document.getElementById("correo");
        let mensaje = document.getElementById("mensaje");
        let correoValido = /^\w+([.-_+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
        document.querySelectorAll(".error").forEach(el => el.remove());
        if (nombre.value.trim()==""){
          let item = document.createElement("span");
          nombre.parentElement.appendChild(item);
          item.classList.add('error');
          item.innerHTML = "Error: el nombre es obligatorio.";
          sinError = false;
        }
        if (correo.value.trim()=="" || !correoValido.test(correo.value) ){
          let item = document.createElement("span");
          correo.parentElement.appendChild(item);
          item.classList.add('error');
          item.innerHTML = "Error: el correo electrónico no es válido.";
          sinError = false;
        }
        if (mensaje.value.trim()=="" || mensaje.value.length > 100){
          let item = document.createElement("span");
          mensaje.parentElement.appendChild(item);
          item.classList.add('error');
          item.innerHTML = "Error: el mensaje no es válido.";
          sinError = false;
        }
        if(sinError){
          let item = document.createElement("p");
          divContacto.appendChild(item);
          item.innerHTML = "Hola "+nombre.value+"!! Recibimos tu mensaje que dice: <br> <b>"+mensaje.value+"</b> <br> Nos vamos a poner en contacto al siguiente correo "+correo.value+".<br>Opcionalmente si dejaste tu número de celular te vamos a mandar un mensaje via Whatsapp.";
          divContacto.style.display = "block";
          divForm.style.display = "none";
          nombre.value = "";
          correo.value = "";
          mensaje.value = "Hola Mriya, estoy interesada en algunos de tus accesorios!";
        }
        return false;
      }
    </script>
  </body>
</html>