mirror of
https://github.com/sergeyyarkov/yarkov.tech.git
synced 2026-10-12 10:59:08 +03:00
86 lines
2.0 KiB
Plaintext
86 lines
2.0 KiB
Plaintext
---
|
|
import Button from "@components/Button.astro";
|
|
import UIString from "./UIString.astro";
|
|
import { useTranslation } from "@i18n/utils";
|
|
import { actions } from "astro:actions";
|
|
|
|
const t = useTranslation(Astro);
|
|
const formResult = Astro.getActionResult(actions.appeal);
|
|
---
|
|
|
|
<>
|
|
<form name="contact" action={actions.appeal} method="post">
|
|
<div class="flex">
|
|
<div>
|
|
<input name="name" placeholder={t("input.nameField")} type="text" maxlength="20" autocomplete="off" required />
|
|
</div>
|
|
<div>
|
|
<input name="email" placeholder="example@email.com" type="email" autocomplete="off" required />
|
|
</div>
|
|
<div class="hp-field" aria-hidden="true">
|
|
<label for="website_url">Оставьте это поле пустым:</label>
|
|
<input type="text" autocomplete="off" id="website_url" name="website_url" tabindex="-1" autocomplete="off" />
|
|
</div>
|
|
</div>
|
|
<input name="subject" placeholder={t("input.subjectField")} type="text" autocomplete="off" required />
|
|
<textarea
|
|
name="message"
|
|
placeholder={t("input.messageField")}
|
|
id="message"
|
|
autocomplete="off"
|
|
cols={30}
|
|
rows={10}
|
|
required></textarea>
|
|
<div class="footer">
|
|
{
|
|
formResult?.error && (
|
|
<span>
|
|
<UIString key={formResult.error.status === 429 ? "submitted.limit" : "submitted.error"} />
|
|
</span>
|
|
)
|
|
}
|
|
<Button type={"submit"}>
|
|
<UIString key={"btn.submit"} />
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</>
|
|
|
|
<style lang="scss">
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 7px;
|
|
margin-bottom: 3.125rem;
|
|
& .hp-field {
|
|
position: absolute;
|
|
left: -9999px;
|
|
top: -9999px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
& .flex {
|
|
column-gap: 10px;
|
|
& div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
& input.error-input,
|
|
& textarea.error-input {
|
|
border: 1px solid var(--color-error);
|
|
}
|
|
& .footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 560px) {
|
|
form .flex {
|
|
flex-direction: column;
|
|
row-gap: 7px;
|
|
}
|
|
}
|
|
</style>
|