62 lines
2 KiB
Text
62 lines
2 KiB
Text
---
|
|
import Image from 'astro/components/Image.astro';
|
|
import FormInput from '../FormInput/FormInput.astro';
|
|
import Dog from '@images/main/contact-form/Mask.svg';
|
|
import BluePlanet from '@images/main/contact-form/Planet Blue.svg';
|
|
import YellowPlanet from '@images/main/contact-form/Planet Yellow.svg';
|
|
import { getLangFromUrl, useTranslations } from '@/i18n/utils';
|
|
import './contact-form.style.css';
|
|
|
|
const lang = getLangFromUrl(Astro.url);
|
|
const t = useTranslations(lang);
|
|
---
|
|
|
|
<div class="container contact-form">
|
|
<h2>{t("contacts.title")}</h2>
|
|
|
|
<div class="image">
|
|
<Image src={Dog} alt="cute dog in space"/>
|
|
<Image src={BluePlanet} alt="blue planet" class="planet blue"/>
|
|
<Image src={YellowPlanet} alt="yellow planet" class="planet yellow"/>
|
|
</div>
|
|
|
|
<form class="container">
|
|
<div id="success-message" class="success" style="display: none;"></div>
|
|
<div id="error-message" class="error" style="display: none;"></div>
|
|
|
|
<FormInput
|
|
type="text"
|
|
name="name"
|
|
label={String(t("contacts.name"))}
|
|
required
|
|
/>
|
|
<FormInput
|
|
type="email"
|
|
name="email"
|
|
label={String(t("contacts.email"))}
|
|
required
|
|
/>
|
|
<FormInput
|
|
type="tel"
|
|
name="phone"
|
|
label={String(t("contacts.phone"))}
|
|
required
|
|
/>
|
|
|
|
<cap-widget data-cap-api-endpoint="https://cap.midcreative.eu/8e5272fb9c08/api/"></cap-widget>
|
|
|
|
<div id="captcha-error" class="error" style="display: none; margin-top: 10px;">
|
|
{t("contacts.captchaError") || "Please complete the captcha"}
|
|
</div>
|
|
|
|
<button type="submit">{t("contacts.send")}</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
const form = document.querySelector('.contact-form form');
|
|
form?.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
console.log('Form submitted - add your logic here');
|
|
});
|
|
</script>
|