-
Notifications
You must be signed in to change notification settings - Fork 0
/
FormularioContacto.html
162 lines (148 loc) · 8.96 KB
/
FormularioContacto.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=yes maximum-scale=1.0, user-scalable=no" />
<!------------------------>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="/Estilos.css" />
<!-------------->
<!-- FONTS -->
<!--Cormorant Garamond -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&display=swap" rel="stylesheet" />
<!-- Barlow Condensed -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200&display=swap" rel="stylesheet" />
<!-- Poiret One -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet" />
<!----------->
<!-- ICONO VENTANA NAVEGADOR -->
<link rel="shortcut icon" href="#" />
<!----------------------------->
<title>Diseños y Soluciones</title>
</head>
<body>
<nav class="navbar navbar-inverse fixed-top" id="navbar">
<div class="menu">
<ul>
<a href="#">
<li><a href="/Home-Servicios.html" id="a-menu">1. Home</a></li>
</a>
<a href="#">
<li><a href="/Home-Servicios.html" id="a-menu">2. Servicios</a></li>
</a>
<a href="#">
<li><a href="/Home-Galeria.html" id="a-menu">3. Galería</a> </li>
</a>
<a href="#">
<li><a href="/Contacto.html" id="a-menu">4. Contacto</a> </li>
</a>
<a href="#">
<li><a href="/PreguntasFrecuentes.html" id="a-menu">5. Preguntas
Frecuentes</a> </li>
</a>
</ul>
</div>
<div class="menu-toggle align-items-center">
<div class="tool">
<div class="container ">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<small class="text-center" id="small_menu">MENU</small><br>
<img src="/ICON/MENU.svg" class="img-fluid pulsate-bck" id="Icono-Menu">
</div>
</div>
</div>
</div>
</nav>
<div class="container" id="FormularioDeContacto">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pt-5 pb-2">
<form method="POST" class="formulario needs-validation" data-netlify-recaptcha="true" action="/Gracias/Gracias.html" id="formulario" type="hidden" name="formulario" netlify novalidate>
<div class="row">
<div class="container-fluid d-flex justify-content-center pt-5 pb-5">
<label class="Numero-Celular text-center align-items-center" id="LabelContacto">Contacto</label>
</div>
<div class="col-xs-12 col-md-6 col-lg-6 col-xl-6 col-xxl-12 pt-2 pb-2">
<label class="Numero-Celular">Nombre</label>
<input type="text" name="nombre" class="form-control" placeholder="Nombre(s) requerido(s)." aria-label="nombre" required>
<div class="invalid-feedback">Requerimos su(s) nombre(s)</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-6 col-xl-6 col-xxl-12 pt-2 pb-2">
<label class="Numero-Celular">Dirección</label>
<input type="text" name="direccion" class="form-control" placeholder="Dirección requerida." aria-label="direccion" required>
<div class="invalid-feedback">Requerimos su dirección</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4 pt-2 pb-2">
<label class="Numero-Celular">Teléfono</label>
<input type="text" name="telefono" id="telefono" class="form-control" placeholder="Numero Telefónico requerido." aria-label="telefono" required>
<div class="invalid-feedback">Requerimos su numero telefónico.</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4 pt-2 pb-2">
<label class="Numero-Celular">Correo </label>
<input type="text" name="correo" id="correo" class="form-control" placeholder="Correo Electrónico requerido" aria-label="correo" required>
<div class="invalid-feedback">Requerimos su correo electrónico</div>
</div>
<div class="col-xs-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4 pt-2 pb-2">
<label class="Numero-Celular">Motivo de su mensaje</label>
<select class="form-select form-control" id="motivo" name="motivo" aria-label="motivo" required>
<option selected value="">Seleccione una opción</option>
<option value="Cotizacion">Cotización</option>
<option value="Bosquejo">Bosquejo</option>
<option value="Reparacion">Reparación</option>
<option value="Otro">OTRO</option>
</select>
<div class="invalid-feedback">Requerimos su motivo de mensaje</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 pt-2 pb-2">
<label class="Numero-Celular">Detalle de su mensaje</label>
<textarea class="form-control" name="mensaje" id="mensaje" placeholder="Mensaje requerido" aria-label="mensaje" row required></textarea>
<div class="invalid-feedback">Dejenos los detalles de su mensaje</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center pt-2 pb-2">
<div class=" d-flex justify-content-center pt-2 pb-2" data-netlify-recaptcha="true"></div>
<label><strong class="pt-2 pb-2" id="rojo">Se le recuerda que sino marca este campo</strong>, el formulario se reiniciará y tendrá que volver a ingresar la información solicitada.</label>
</div>
<div class="col-12">
<div class="container-fluid d-flex justify-content-center pt-5 pb-5" data-aos="fade-up" data-aos-duration="1000">
<div class="row">
<button type="submit" class="btn btn-outline-dark btn-lg" id="MostrarOcultarServicios">
Enviar
<img src="/ICON/Contactenos.svg" class="img-fluid" id="Logo-Mostrar-Mas">
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
<!-------------->
<!-- SWEETALERT -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous"></script>
<!---------------->
<!-- ANIMATE ON SCROLL -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!----------------------->
<script>
AOS.init();
</script>
<script src="/main.js"></script>
<script src="/Scripts.js"></script>
</body>
</html>