Skip to content

Commit

Permalink
sendMail
Browse files Browse the repository at this point in the history
  • Loading branch information
@gutmorgen
gutmorgen committed Nov 15, 2023
1 parent c848c5d commit fe1874a
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 9 deletions.
20 changes: 11 additions & 9 deletions contacto.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,31 +107,31 @@
<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="/enviar.php" method="POST" class="mx-auto mt-16 max-w-xl sm:mt-20">
<form action="" id="form" 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>
<label for="subject" class="block text-sm font-semibold leading-6 text-gray-900">Nombre</label>
<div class="mt-2.5">
<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">
<input required type="text" name="first-name" id="subject" 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>
<label for="subject" class="block text-sm font-semibold leading-6 text-gray-900">Apellido</label>
<div class="mt-2.5">
<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 ">
<input required type="text" name="last-name" id="subject" 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>
<label for="subject" class="block text-sm font-semibold leading-6 text-gray-900">Email</label>
<div class="mt-2.5">
<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 ">
<input required type="email" name="email" id="subject" 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>
<label for="subject" class="block text-sm font-semibold leading-6 text-gray-900">N&uacute;mero de tel&eacute;fono</label>
<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)">
<input required type="tel" name="phone-number" id="subject" 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">
Expand All @@ -147,6 +147,7 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Contacta
</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>
<a id="emailA"></a>
</div>
</form>
</div>
Expand Down Expand Up @@ -227,6 +228,7 @@ <h1 class=" max-w-lg text-xl font-semibold tracking-tight text-black xl:text-2xl
<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "40955c324b594ab8a41af51aae6819c2"}'></script>
<!-- End Cloudflare Web Analytics -->
<script src="sendEmail.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script>
<script src="node_modules/@material-tailwind/html@latest/scripts/ripple.js"></script>
Expand Down
14 changes: 14 additions & 0 deletions sendEmail.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const form = document.getElementById('form')
const sendMail = document.getElementById('emailA')

function handleSendEmail(event){
event.preventDefault()
const fd = new FormData(this)

sendMail.setAttribute(
'href',
`mailTo:junavi2@gmail.com?subject=${fd.get('subject')}&body=${fd.get('message')}`
)
sendMail.click()
}
form.addEventListener('submit', handleSendEmail)

0 comments on commit fe1874a

Please sign in to comment.