Контактна форма Gatsby

Formgong team ·

Контактна форма Gatsby може надсилати дані з браузера у Formgong. Gatsby віддає статичні файли, тож сервера для POST немає. Функція Gatsby і секрет пошти не потрібні. Вставте форму, замініть ключ, і заявки прийдуть на пошту та в Telegram. Сайт лишається статичним.

Gatsby
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="uk">
  <label>Ім’я <input type="text" name="name" autocomplete="name" placeholder="Ваше ім’я" required></label>
  <label>Email <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>Повідомлення <textarea name="message" placeholder="Чим ми можемо допомогти?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Залиште це поле порожнім<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">Надіслати</button>
</form>

Як працюють форми в Gatsby

Gatsby збирає React-сторінки у статичний HTML. Офіційний гід пропонує сервіс форм, Netlify Forms або власний сервер. Gatsby Functions — задокументований серверний шлях. Це функція, яку ви деплоїте і підтримуєте.

Файл у src/pages може містити звичайну HTML-форму. Вона надсилає дані на https://formgong.com/submit з полями access_key, _lang і botcheck. До браузера потрапляють лише імена з префіксом GATSBY_, а цей ключ публічний, тож такий префікс доречний.

Налаштування в Gatsby

  1. Створіть форму у Formgong і скопіюйте ключ доступу. Він починається з fk_.
  2. Додайте src/pages/contact.js і вставте форму нижче. Дія має вести на https://formgong.com/submit.
  3. Замініть fk_your_access_key. Ім'я на кшталт GATSBY_FORMGONG_KEY необов'язкове. Ніколи не кладіть пароль SMTP в ім'я з GATSBY_.
  4. Запустіть gatsby develop і надішліть тест. Потім запустіть gatsby build. POST іде з браузера, тож жива збірка поводиться так само.
  5. Якщо сайт на Netlify, не додавайте data-netlify. Форма лише з React невидима для сканування HTML, доки ви не додасте приховану форму з form-name.

Formgong чи функція Gatsby?

Беріть Gatsby Function, коли заявка має змінити вашу базу або викликати приватний API.

Беріть Formgong для контактних форм і лідів. Ви пропускаєте SMTP, хостинг функції і прихований HTML, який Netlify хоче для React.

Питання та відповіді

Чи є в Gatsby готова контактна форма?

Ні. Офіційний гід називає бекенд форм, Netlify Forms, якщо хостинг там, або власний сервер. Сторінка лишається статичною.

Чому Netlify не бачить мою форму Gatsby?

Netlify читає HTML після збірки. Форма, що з'являється лише після React, губиться. Надсилайте у Formgong або додайте приховану статичну копію.

Чи можна лишитися на сторінці через fetch?

Так. Викличте fetch на https://formgong.com/submit і надішліть Accept: application/json. Звичайна HTML-форма працює і без JavaScript.

Чи безпечний ключ у бандлі Gatsby?

Так. Він лише приймає заявки для вашої форми. На Pro можна обмежити домени. Не кладіть приватні ключі API в ім'я з GATSBY_.

Почати безкоштовно