Skip to content
This repository has been archived by the owner on Mar 23, 2024. It is now read-only.

Commit

Permalink
Merge pull request #4 from intuitem/htmx_forms
Browse files Browse the repository at this point in the history 
experiment discord integration
  • Loading branch information
@ab-smith
ab-smith authored Sep 24, 2023
2 parents 79ce628 + 6f8fd41 commit 233b44e
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 7 deletions.
2 changes: 1 addition & 1 deletion src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const makeTitle = title
basic: {
url: canonicalURL,
type: "website",
title: `Intuitem | Cloud, Cybersecurity, and everything in between`,
title: `Intuitem | Cloud, Data and Cybersecurity`,
image: resolvedImageWithDomain,
},
image: {
Expand Down
130 changes: 124 additions & 6 deletions src/pages/en/contact.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,22 @@ import Container from "@components/container.astro";
import Sectionhead from "@components/sectionhead.astro";
import Button from "@components/ui/button.astro";
import Contactform from "@components/contactform.astro";
const dwh = import.meta.env.PUBLIC_DISCORD_WH;
---

<Layout title="Contact">
<Container>
<Sectionhead>
<Fragment slot="title">Contact</Fragment>
<Fragment slot="desc">
Gauranteed response!
</Fragment>
<Fragment slot="desc">Gauranteed response!</Fragment>
</Sectionhead>

<main class="grid md:grid-cols-2 gap-10 mx-auto max-w-4xl mt-16">

<div class="p-4 lg:p-10">
<h2 class="font-medium text-2xl text-gray-800">Contact Us</h2>
<p class="text-lg leading-relaxed text-slate-500 mt-3">
Interested in our products and services? Have a question or feedback? We would love to hear from you!
Interested in our products and services? Have a question or feedback?
We would love to hear from you!
</p>
<div class="mt-5">
<div class="flex items-center mt-2 space-x-2 text-gray-600">
Expand All @@ -40,9 +39,128 @@ import Contactform from "@components/contactform.astro";
</div>

<div class="p-4 lg:p-10">
<iframe style="border:none;width:100%;" height="600px" src="https://opnform.com/forms/contact-us-6clapb"></iframe>

<form method="POST" action="/action" enctype="multipart/form-data">
<div class="mb-6">
<label
for="name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Name*</label
>
<input
id="name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="full name"
name="name"
required
/>
</div>
<div class="mb-6">
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Email*</label
>
<input
type="email"
id="email"
name="email"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="[email protected]"
required
/>
</div>
<div class="mb-6">
<label
for="company"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Organization</label
>
<input
id="company"
name="company"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="company name"
/>
</div>
<div class="mb-6">
<label
for="phone"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Phone</label
>
<input
id="phone"
name="phone"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="+33"
/>
</div>
<div class="mb-6">
<label
for="message"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Message*</label
>
<textarea
id="message"
name="message"
rows="5"
maxlength="1000"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Your message"
required></textarea>
</div>
<div class="mb-6">
<Button type="submit" class="w-full">Send</Button>
</div>
</form>

</div>
<div id="success-message" class="hidden">
<p class="text-green-500 text-lg font-semibold">Your message has been sent!</p>
</div>
<div id="error-message" class="hidden">
<p class="text-red-500 text-lg font-semibold">Something went wrong, try refreshing and submitting the form again.</p>
</div>



<script define:vars={{ dwh }}>
const form = document.querySelector("form");
form.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(form);
const jsonObject = Array.from(formData.entries()).reduce(
(obj, [key, value]) => {
obj[key] = value;
return obj;
},
{}
);
const response = await fetch(dwh, {
method: "POST",
body: JSON.stringify({
content: JSON.stringify(jsonObject),
username: "intuitem-contact-form",
}),
headers: {
"Content-Type": "application/json",
},
});
const result = await response; // await just the response

console.log(result);
if (response.status === 200 || response.status === 204) {
const successMessage = document.getElementById("success-message");
successMessage.classList.remove("hidden");
} else {
const errorMessage = document.getElementById("error-message");
errorMessage.classList.remove("hidden");
}

});
</script>
</main>
</Container>
</Layout>

0 comments on commit 233b44e

Please sign in to comment.