Як створити контактну форму за допомогою Netlify Forms та Next.js

Якщо ви хочете, щоб хтось міг з вами зв’язатися або подати інформацію на веб-сайті, форма HTML - це досить стандартний спосіб досягти цього.

Але для прийняття подань форми зазвичай потрібна додаткова послуга або складний код на стороні сервера. Як ми можемо скористатися перевагами Netlify, щоб легко створювати нові форми?

  • Що таке Netlify?
  • Що ми будемо будувати?
  • Скільки це коштує?
  • Частина 1: Створення контактної форми за допомогою HTML
  • Частина 2: Додавання власної форми Netlify до програми Next.js React

Що таке Netlify?

Netlify - це веб-платформа, яка дозволяє легко розгортати нові веб-проекти за допомогою простих налаштувань робочих процесів. Це включає розгортання статичного веб-сайту, лямбда-функцій, і, як ми поговоримо тут, спеціальні форми.

Служба їх форми працює як частина конвеєру збірки та розгортання. Коли ми додаємо форму з певним атрибутом на нашу сторінку, Netlify розпізнає цю форму та налаштує її на роботу.

Що ми будемо будувати?

Ми створимо контактну форму, яка дозволить людям надіслати вам примітку через ваш веб-сайт.

Сама форма буде досить простою. Як і стандартна контактна форма, ми запитуємо чиєсь ім’я, електронну адресу та повідомлення.

Ми збираємося створити це за допомогою простого HTML, щоб продемонструвати, як він працює, а потім побудувати його за допомогою Next.js для створення форми в програмі React.

Скільки це коштує?

Форми Netlify є безкоштовними для початку. Цей безкоштовний рівень обмежений 100 поданнями форм на веб-сайт щомісяця, тому, якщо ви дотримуєтесь цього, він завжди буде безкоштовним.

Тим не менш, якщо ви перевищуєте 100 поданих форм на будь-якому конкретному сайті, перший рівень складатиме 19 доларів на момент написання цього матеріалу. Ви можете ознайомитися з найновішими тарифними планами на веб-сайті Netlify.

Частина 1: Створення контактної форми за допомогою HTML

Для початку ми створимо базову форму із чистим HTML. Це швидкий виграш, щоб продемонструвати, як це працює.

Крок 1: Створення HTML-форми

Для своєї форми ми дійсно можемо використовувати все, що хочемо. Форми контактів можуть бути такими простими, як адреса електронної пошти та поле повідомлення, або включати різноманітні варіанти, які допоможуть бізнесу відповісти на конкретні питання.

Ми почнемо з чогось простого. Ми створимо форму, в якій буде вказано чиєсь ім’я, електронну адресу та повідомлення.

Для початку створіть новий файл HTML у кореневій частині проекту. Цей файл HTML повинен містити основну структуру документа HTML. Всередині корпусу додамо нову форму:

Name

Email

Message

Send

У наведеному вище фрагменті ми:

  • Створення нової форми
  • Форма має атрибут name, метод і data-netlifyатрибут, встановленіtrue
  • Створення 3 полів форми з мітками, кожне з яких позначено атрибутом name
  • Створення кнопки для подання форми

На що ми хочемо звернути найбільшу увагу, це data-netlifyатрибут та форма name. Коли Netlify прочитає сайт, він побачить ці поля та використає їх, щоб перетворити вашу форму в активно працюючу форму.

Я також збираюся додати трохи CSS, щоб мітки виглядали трохи більш послідовно. Ви можете за бажанням додати це до документа:

 body { font-family: sans-serif; } label { display: block; margin-bottom: .2em; }  

І в цей момент ми повинні мати базову форму!

Тепер ви захочете розмістити цю форму на GitHub або вашому улюбленому провайдері Git, що підтримується Netlify, і ми будемо готові до наступного кроку.

Слідуйте разом із комітом!

Крок 2: Налаштування нової форми за допомогою Netlify

Як тільки наша форма буде надіслана нашому постачальнику Git, ми можемо синхронізувати її з Netlify.

Спочатку створіть обліковий запис або скористайтеся наявним обліковим записом Netlify і натисніть кнопку Новий сайт із Git .

Тут виберіть, якого провайдера Git ви використовували. У своєму прикладі я використовую GitHub .

Вибравши свого провайдера Git, він попросить вас дозволити доступ, щоб Netlify міг знайти ваше сховище Git.

Після успішного підключення вашого облікового запису ви побачите список сховищ, до яких ви надали доступ. Знайдіть сховище, до якого ви додали форму, та виберіть його.

Якщо ви стежите за мною, наша форма - це чистий HTML, тобто, не повинно бути жодних кроків збірки або спеціального каталогу, в який вона публікується. Але сміливо налаштовуйте ці налаштування, якщо ви робили щось інше.

Тепер натисніть Розгорнути сайт, який відкриє нову сторінку в Netlify, і ваш сайт буде успішно розгорнуто в найкоротші терміни.

Нарешті, клацніть URL-адресу у верхній частині інформаційної панелі проекту Netlify, яка закінчується на netlify.app. Після завантаження ви побачите свою форму!

Крок 3: Перегляд поданих форм

Тепер, коли ми маємо свою форму, ми зрештою хочемо побачити відповіді.

Для початку додайте у форму деяку інформацію та натисніть «Надіслати».

Подавши заявку, ви помітите, що потрапили на сторінку Netlify, на якій написано, що форма успішно надіслана.

Тепер ви можете повернутися до інформаційної панелі проекту Netlify і прокрутити трохи вниз, де тепер ви можете побачити поле з нещодавніми поданнями форми , а також новим поданням.

Частина 2: Додавання власної форми Netlify до програми Next.js React

Якщо форма буде жити сама по собі, а не буде частиною більшого сайту, є багато переваг, якщо залишити форму як чистий HTML. Але часто ми хочемо, щоб наша контактна форма була частиною нашого веб-сайту або програми.

Тут ми пройдемося по додаванню форми до програми Next.js.

Примітка: наша демонстрація використання Next.js - це статично відтворений додаток. Якщо ви завантажуєте сторону клієнта форми, тобто базовий HTML не включає форму, перегляньте примітки внизу цієї сторінки, щоб отримати додаткову інформацію про рішення.

Крок 0: Створення програми Next.js

Для початку нам потрібен додаток. Ми будемо використовувати Next.js, оскільки ми можемо досить легко закрутити новий додаток з нуля.

Для цього ви можете перейти до місця, де ви хочете створити програму, і запустити:

yarn create next-app [project-name] # or npx create-next-app [project-name] 

Я збираюся назвати свій проект my-nextjs-netlify-form.

Коли Next.js завершить установку залежностей, він дасть вам вказівки щодо переходу до каталогу проекту та запуску сервера розробки.

І після запуску yarn devабо npm run devви повинні бути готові до роботи з вашим додатком Next.js:

Слідуйте разом із комітом!

Крок 1: Додавання форми HTML у програму Next.js

Наш Крок 1 буде виглядати дуже подібним до Частини 1.

Всередині pages/index.jsми хочемо знайти нашу сітку-обгортку, і ми будемо використовувати її, щоб додати нашу форму.

Знайдіть і замініть весь блок наступним:

Name

Email

Message

Send

Ось що ми робимо:

  • Ми використовуємо існуючу сітку з Next.js
  • Ми також користуємося наявною карткою, до якої ми включимо нашу форму
  • Всередині картки ми вставляємо ту саму форму HTML, що і Частина 1

Якщо ми перезавантажимо сторінку, тепер ми можемо побачити нашу форму всередині картки, наприклад:

Тепер, перш ніж рухатися далі, ми хочемо зробити 2 речі.

По-перше, оскільки ми створюємо цю форму в додатку JavaScript, Netlify рекомендує додати прихований ввід із назвою нашої форми.

Всередині нашої форми додайте такий ввід у верхній частині форми:

Переконайтесь, що значення цього введення збігається з іменем вашої форми.

По-друге, оскільки картка, яку ми повторно використовуємо, призначена для списку посилань, Next.js включає деякі ефекти наведення. Це робить форму незрозумілою для використання, тому давайте видалимо їх

Видаліть із styles/Home.module.css:

.card:hover, .card:focus, .card:active { color: #0070f3; border-color: #0070f3; } 

Для додаткового кроку в якості бонусу я збираюся оновити заголовок своєї сторінки на „Contact Me” та видалити опис. Не соромтеся робити це все, що завгодно.

І як тільки ви будете готові, як і раніше, додайте це як нове сховище до GitHub або вашого улюбленого постачальника Git.

Слідуйте разом із комітом!

Крок 2: Налаштування та розгортання програми Next.js на Netlify

Розгортання нашого додатка на Netlify буде виглядати досить подібним чином, але перед тим, як ми потрапимо туди, нам потрібно налаштувати наш додаток Next.js, щоб мати можливість експортувати при побудові.

У нашому додатку Next.js, всередині package.jsonфайлу, ми хочемо оновити buildсценарій до:

"build": "next build && next export", 

Тепер, коли ви запускаєте buildсценарій, він компілює додаток до статичного HTML, CSS та JS всередині outкаталогу. Це дозволить нам розмістити його на Netlify. Ви навіть можете спробувати це локально на своїй машині, якщо хочете.

З цією зміною зафіксуйте це та передайте його своєму провайдеру Git.

Далі, розгортання програми здебільшого буде виглядати подібно до частини 1. Єдина відмінність полягає в тому, що у нас є програма Next.js, нам потрібно додати наші кроки збірки.

Для початку ми хочемо підключити наш провайдер Git, як у Частині 1.

Дійшовши до сторінки налаштувань розгортання, ми хочемо налаштувати нашу команду побудови та каталог публікації.

Наша команда Будувати буде yarn buildабо в npm run buildзалежності від того, що менеджер пакетів ви використовували і каталог Опублікувати буде out.

Після цього натисніть Розгорнути сайт , і він розпочнеться, як і раніше.

Після завершення розгортання ми будемо готові відкрити програму.

І як тільки ми відкриємо наш додаток, ми можемо протестувати нашу форму, заповнивши її та натиснувши кнопку подати.

Як і раніше, ми потрапимо на сторінку успіху Netlify. Але якщо ми повернемося назад і заглянемо всередину нашої інформаційної панелі Netlify, ми зараз побачимо наше подання!

Слідуйте разом із комітом!

Бонус: тримайте людей на своєму веб-сайті з повідомленням про успіх

Ще однією цікавою функцією форм Netlify є те, що вона дозволяє налаштувати форму, щоб утримувати людей на вашому веб-сайті, налаштувавши форму прямо на сторінці.

Тут у вас багато варіантів, будь то перенаправлення когось на нову сторінку або налаштування обміну повідомленнями на сторінці, з якої вони надіслали.

Для цієї демонстрації ми збираємося встановити параметр URL-адреси, який ми можемо виявити, щоб показати повідомлення про успіх, якщо ми бачимо цей параметр.

Для цього у форму HTML додайте такий атрибут:

action="/?success=true" 

Це повідомить Netlify, що ми хочемо залишатися на домашній сторінці (оскільки у нас лише одна сторінка), але застосовуємо параметр URL, щоб ми могли його виявити в нашому додатку.

Далі ми можемо використовувати хуки useStateта і useEffectдля перегляду цього параметра та оновлення сторінки.

Угорі файлу імпортуємо такі хуки:

import { useState, useEffect } from 'react'; 

Всередині нашого компонента Home у верхній частині додамо наш стан:

const [success, setSuccess] = useState(false); 

І щоб виявити параметр URL-адреси, ми можемо використовувати useEffectхук:

useEffect(() => { if ( window.location.search.includes('success=true') ) { setSuccess(true); } }, []); 

Примітка: це простий спосіб досягнення цього результату для демонстрації. Якщо у вас складніша програма, можливо, ви захочете назвати параметр більш логічним і правильно проаналізувати параметри URL-адреси для значення.

Що це робить, коли компонент відображає, він запускає цей useEffectгачок, перевіряючи параметри в URL-адресі та шукаючи success=true. Якщо знайде, оновить нашу successзмінну стану до true!

Далі, під назвою нашої сторінки (

), додамо наступний фрагмент:

{success && ( 

Successfully submitted form!

)}

Тут ми шукаємо, чи successвідповідає дійсності, і якщо це так, ми включаємо рядок тексту, в якому йдеться про те, що форма успішно надіслана.

Хоча ви не можете надіслати свою форму локально, ви можете перевірити це, відвідавши свою програму, яка працює локально з ?success=trueпараметром URL, наприклад:

//localhost:3000/?success=true 

Нарешті, ви можете надіслати ці зміни своєму провайдеру Git, і Netlify автоматично відновить ваш сайт.

І після її закінчення ви можете надіслати свою форму, як і раніше, і побачити повідомлення про успіх.

І подивіться, що наша форма все ще подається!

Слідуйте разом із комітом!

Форми Netlify та код на стороні клієнта

Одне, на що слід звернути увагу, з рішенням Netlify - це працює лише "просто" для статичних HTML-сторінок.

Якщо ваша сторінка використовує JavaScript для управління вмістом цієї сторінки, наприклад, не додавання форми до її завантаження, вам доведеться ознайомитися з документацією Netlify про те, як можна зробити це за допомогою додаткового атрибута форми.

Netlify також наводить приклад того, як ви можете динамічно надсилати свою форму за допомогою JavaScript, щоб ви могли створити власний досвід у своєму додатку.

Що ще ти можеш зробити?

Налаштування вдосконалених робочих процесів за допомогою інших інструментів

Netlify дозволяє вам інтегруватися з іншими інструментами, щоб дозволити вам обговорювати подані форми. Примітно, що Netlify працює з Zapier, тобто ви можете приймати вхідні подання та робити з ними все, що завгодно.

//docs.netlify.com/forms/notifications/

Запобігання спаму за допомогою reCAPTCHA

Спам - це також справжня річ. Ви не хочете, щоб ваша поштова скринька була заповнена спамом, тому ви можете скористатися вбудованим полем Honeypot від Netlify, або вони проведуть вас як додати reCAPTCHA 2.

//docs.netlify.com/forms/spam-filters/

Слідуйте за мною, щоб дізнатись більше про Javascript, UX та інші цікаві речі!

  • ? Слідуйте за мною у Twitter
  • ? Підписатися на мій Youtube
  • Підпишіться на мою розсилку
  • ? Спонсоруй мене