enviar correo

Author: gutmorgen

contacto.html

@@ -107,46 +107,44 @@
       <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Contactar un vededor</h2>
       <p class="mt-2 text-lg leading-8 text-gray-600">En las próximas 24h será atendido por uno de nuestros vededores.</p>
     </div>
-    <form action="#" method="POST" class="mx-auto mt-16 max-w-xl sm:mt-20">
+    <form action="/enviar.php" method="POST" class="mx-auto mt-16 max-w-xl sm:mt-20">
       <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
         <div>
           <label for="first-name" class="block text-sm font-semibold leading-6 text-gray-900">Nombre</label>
           <div class="mt-2.5">
-            <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+            <input required type="text" name="first-name" id="first-name" autocomplete="given-name" class="form-control block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Primer Nombre">
           </div>
         </div>
         <div>
           <label for="last-name" class="block text-sm font-semibold leading-6 text-gray-900">Apellido</label>
           <div class="mt-2.5">
-            <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+            <input required type="text" name="last-name" id="last-name" autocomplete="family-name" class="form-control block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Primer Apellido ">
           </div>
         </div>
 
         <div class="sm:col-span-2">
           <label for="email" class="block text-sm font-semibold leading-6 text-gray-900">Email</label>
           <div class="mt-2.5">
-            <input type="email" name="email" id="email" autocomplete="email" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+            <input required type="email" name="email" id="email" autocomplete="email" class="form-control block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="ejemplo@ejemplo.com ">
           </div>
         </div>
         <div class="sm:col-span-2">
           <label for="phone-number" class="block text-sm font-semibold leading-6 text-gray-900">N&uacute;mero de tel&eacute;fono</label>
-          <div class="relative mt-2.5">
-            <div class="absolute inset-y-0 left-0 flex items-center">
-           
-           
-           
-            </div>
-            <input type="tel" name="phone-number" id="phone-number" autocomplete="tel" class="block w-full rounded-md border-0 px-3.5 py-2 pl-20 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+          <div class="mt-2.5">
+          <input required type="tel" name="phone-number" id="phone-number" autocomplete="tel" class="block w-full rounded-md border-0 px-3.5 py-2 pl-20 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="+(Pa&iacute;s)-(&Aacute;rea)-(N&uacute;mero de Tel&eacute;fono)">
           </div>
         </div>
         <div class="sm:col-span-2">
           <label for="message" class="block text-sm font-semibold leading-6 text-gray-900">Mensaje</label>
           <div class="mt-2.5">
-            <textarea name="message" id="message" rows="4" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
+            <textarea required name="message" id="message" rows="4" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Mensaje . . ." ></textarea>
           </div>
         </div>
 
       </div>
+      <div class="form-group mt-2.5 block text-sm font-semibold leading-6 text-gray-900">
+        <input type="checkbox" required> Acepto la política de privacidad.
+      </div>
       <div class="mt-10">
         <button type="submit" class="block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Enviar</button>
       </div>

enviar.php

@@ -0,0 +1,13 @@
+<?php 
+	$nombre = $_POST['first-name'];
+    $apellido = $_POST['last-name'];
+	$email = $_POST['email'];
+    $tel = $_POST['phone-number'];
+	$asunto = 'Formulario Rellenado';
+	$mensaje = "Nombre: ".$nombre."<br> Apellido: ".$apellido."<br> Email: $email Telefono: ".$tel."<br><br> Mensaje:".$_POST['mensaje'];
+
+
+	if(mail('junavi2@gmail.com', $asunto, $mensaje)){
+		echo "Correo enviado";
+	}
+ ?>