111 lines
3.7 KiB
Plaintext
111 lines
3.7 KiB
Plaintext
---
|
|
import Button from './Button.astro';
|
|
import ContactObfuscation from './ContactObfuscation.astro';
|
|
|
|
import { formMessages } from '../utils/form-messages';
|
|
import { formModeForRuntime, resolveFormMode, resolveMockFormResult, type LogicalForm } from '../utils/form-integration';
|
|
|
|
interface Props {
|
|
lang?: string;
|
|
title?: string;
|
|
logicalForm?: LogicalForm;
|
|
}
|
|
|
|
const { lang = 'en', logicalForm = 'general' } = Astro.props;
|
|
const text = formMessages(lang);
|
|
const title = Astro.props.title ?? text.contactHeading;
|
|
const config = resolveFormMode(import.meta.env.PUBLIC_AIA_FORMS_MODE);
|
|
const mode = formModeForRuntime(config);
|
|
const mockResult = resolveMockFormResult(import.meta.env.PUBLIC_AIA_FORMS_MOCK_RESULT);
|
|
---
|
|
<div class="contact-form-card" role="group" data-aia-form data-form-mode={mode} data-form-mode-reason={config.reason} data-logical-form={logicalForm} data-mock-result={mockResult} data-mock-success={text.mockSuccess} data-mock-failed={text.mockFailed} data-mock-unavailable={text.mockUnavailable}>
|
|
<h3 class="contact-form-card__title">{title}</h3>
|
|
<div class="contact-form-card__fields">
|
|
<label>{text.name}<input name="name" autocomplete="name" disabled={mode === 'off'} /></label>
|
|
<label>{text.email}<input type="email" name="email" autocomplete="email" disabled={mode === 'off'} /></label>
|
|
<label>{text.phone}<input type="tel" name="phone" autocomplete="tel" disabled={mode === 'off'} /></label>
|
|
<label>{text.service}<select name="service" disabled={mode === 'off'}>{text.options.map((label) => <option>{label}</option>)}</select></label>
|
|
<label>{text.message}<textarea name="message" rows="5" aria-describedby="contact-sensitive-note" disabled={mode === 'off'}></textarea></label>
|
|
<p id="contact-sensitive-note" class="contact-form-card__caution" role="note">{text.formAPreview.caution}</p>
|
|
<Button type="button" data-mock-submit disabled={mode === 'off'} aria-describedby="contact-form-note" class="contact-form-card__submit">{text.submit}</Button>
|
|
<p id="contact-form-note" class="contact-form-card__note" data-form-status>{mode === 'mock' ? text.mock : <>{text.disabled} <ContactObfuscation phone="(480) 687-7099" hrefValue="+14806877099" obfuscatedText="9907-786 (084)" />.</>}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
import { bindMockForms } from '../scripts/mock-form';
|
|
bindMockForms();
|
|
</script>
|
|
|
|
<style>
|
|
.contact-form-card__note :global(a) {
|
|
color: var(--color-primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: .15em;
|
|
}
|
|
|
|
.contact-form-card {
|
|
background: white;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 4px 0 rgb(81 81 81 / 4%), 0 4px 16px 0 rgb(81 81 81 / 8%);
|
|
margin: 0 auto;
|
|
max-width: 600px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.contact-form-card__title {
|
|
border-bottom: 1px solid #f1f1f1;
|
|
margin: 0;
|
|
padding: 1.2rem 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.contact-form-card__fields {
|
|
display: grid;
|
|
gap: 1rem;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.contact-form-card label {
|
|
display: grid;
|
|
font-weight: 700;
|
|
gap: .4rem;
|
|
}
|
|
|
|
.contact-form-card input,
|
|
.contact-form-card select,
|
|
.contact-form-card textarea {
|
|
background: #fcf9f5;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
color: var(--color-primary);
|
|
font: inherit;
|
|
padding: .8rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.contact-form-card textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
.contact-form-card :global(.contact-form-card__submit) {
|
|
justify-self: center;
|
|
max-width: 375px;
|
|
width: 100%;
|
|
}
|
|
|
|
.contact-form-card__note {
|
|
color: var(--color-muted);
|
|
font-size: .9rem;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.contact-form-card__caution {
|
|
color: var(--color-muted);
|
|
font-size: .85rem;
|
|
line-height: 1.65;
|
|
margin: -.25rem 0 0;
|
|
}
|
|
</style>
|