ContactFormpopular

Props

Source apps/www/src/sections/ContactForm.astro @ gitt.one

---
/**
 * ContactForm — the contact form with the site's requisites beside it.
 *
 * theme="plain" a muted panel with the title, phone and email on the left,
 *               the inputs on the right, their labels as placeholders
 * theme="panel" the same block inside a raised card, the panel painted with
 *               the brand gradient and the inputs carrying real labels
 *
 * Phone and email default to pages.config; the labels are content (i18n).
 */
import Envelope from 'astro-heroicons/outline/Envelope.astro';
import Phone from 'astro-heroicons/outline/Phone.astro';
import pagesConfig from '../../pages.config.js';
import Fields from './_ContactFields.astro';

interface Props {
  id?: string;
  theme?: 'plain' | 'panel';
  title: string;
  description?: string;
  email?: string;
  phone?: string;
  nameLabel?: string;
  emailLabel?: string;
  phoneLabel?: string;
  messageLabel?: string;
  submitText?: string;
  subject?: string;
  successTitle?: string;
  successText?: string;
}
const {
  id = 'contacts', theme = 'plain', title, description, email, phone,
  nameLabel = 'Full name', emailLabel = 'Email', phoneLabel = 'Phone', messageLabel = 'Message',
  submitText = 'Submit', subject = 'Request from Contacts', successTitle = 'Thank you!',
  successText = 'We`ve received your message. Someone from our team will contact you soon',
} = Astro.props;
const contactPhone = phone || pagesConfig.defaultPhone;
const contactEmail = email || pagesConfig.defaultEmail;
const panel = theme === 'panel';
---

<section id={id} class:list={['relative bg-white', panel && 'px-4 py-16 sm:px-6 sm:py-20 lg:px-8']}>
  <div class:list={['relative mx-auto max-w-7xl', panel ? 'bg-white shadow-xl lg:grid lg:grid-cols-3' : 'lg:grid lg:grid-cols-5']}>
    <div class:list={[panel ? 'relative overflow-hidden bg-gradient-to-b from-primary-500 to-primary-alt-600 px-6 py-10 text-white sm:px-10 xl:p-12' : 'bg-stone-50 px-4 py-12 sm:px-6 lg:col-span-2 lg:px-8 xl:pr-12']}>
      <div class="mx-auto max-w-lg">
        <h2 class:list={[panel ? 'text-lg font-medium' : 'text-3xl font-extrabold tracking-tight text-stone-900 sm:text-4xl']}>{title}</h2>
        {description && <p class:list={['mt-3 text-lg', panel ? 'text-primary-50' : 'text-stone-500']}>{description}</p>}
        <dl class:list={['mt-8 space-y-4 text-base', panel ? 'text-white' : 'text-stone-500']}>
          {contactPhone && (
            <div>
              <dt class="sr-only">{phoneLabel}</dt>
              <dd class="flex"><Phone class:list={['h-6 w-6 flex-shrink-0', !panel && 'text-stone-400']} aria-hidden="true" /><a class="ml-3" href={`tel:${contactPhone.replace(/[^+\d]/g, '')}`}>{contactPhone}</a></dd>
            </div>
          )}
          <div>
            <dt class="sr-only">{emailLabel}</dt>
            <dd class="flex"><Envelope class:list={['h-6 w-6 flex-shrink-0', !panel && 'text-stone-400']} aria-hidden="true" /><a class="ml-3" href={`mailto:${contactEmail}`}>{contactEmail}</a></dd>
          </div>
        </dl>
      </div>
    </div>
    <div class:list={[panel ? 'px-6 py-10 sm:px-10 lg:col-span-2 xl:p-12' : 'bg-white px-4 py-12 sm:px-6 lg:col-span-3 lg:px-8 xl:pl-12']}>
      <Fields id={id} labelled={panel} nameLabel={nameLabel} emailLabel={emailLabel} phoneLabel={phoneLabel} messageLabel={messageLabel} submitText={submitText} subject={subject} successTitle={successTitle} successText={successText} />
    </div>
  </div>
</section>