В этом руководстве вы узнаете, как добавить контактную форму в приложение React с помощью Netlify Forms.
Добавление контактной формы в приложение React может потребовать написания кода на стороне сервера для обработки отправки форм, но с Netlify Forms вы можете отвлечься от логики, потому что она делает все, что за кулисами, работает за вас, когда ваш сайт развернут на Netlify.
Предпосылки
Чтобы следовать этому руководству, вы должны быть знакомы с React, Git и GitHub. У вас также должна быть учетная запись Netlify и установленный на вашем компьютере Node. Если вам нужна помощь в настройке, вы можете обратиться к нашему руководству по установке Node с помощью nvm.
Что вы узнаете
К концу этого урока вы будете знать, как сделать следующее:
развернуть приложение React в Netlify
интегрировать Netlify Forms с компонентом формы без сохранения состояния (компонентом формы, который не использует состояние)
интегрировать Netlify Forms с компонентом формы с отслеживанием состояния (компонентом формы, который использует состояние для обработки своих данных)
Полное руководство к этому руководству доступно на GitHub.
Введение в формы Netlify
Netlify Forms — это функция Netlify для управления и обработки отправки форм без необходимости написания кода на стороне сервера. Добавив простой атрибут в тег
Цены на формы Netlify
Netlify Forms бесплатна для начала работы, но в бесплатном плане существует ограничение в 100 отправок форм на
Чтобы превысить ограничение на отправку форм или сделать доступными исключенные функции, вам придется перейти на другой план. Вы можете сделать это на странице цен Netlify.
Создание формы для Netlify Forms
Netlify Forms можно интегрировать как с формой без сохранения состояния (форма, которая не использует состояние для обработки своих данных), так и с формой с состоянием (форма, которая использует состояние для обработки своих данных). В этом руководстве мы сначала создадим форму без сохранения состояния, чтобы продемонстрировать, как мы можем интегрировать с ней формы Netlify. Но позже мы преобразуем форму без сохранения состояния в форму с сохранением состояния, в которой мы также будем интегрироваться с Neltify Forms.
Начнем с создания и настройки нового приложения React.
Создайте и настройте React
Введите следующую команду в своем терминале, чтобы создать новое приложение React:
$ npx
Здесь наше приложение называется netlify_forms_app, но вы можете дать ему любое имя, если оно не является ограниченным именем npm. После завершения установки перейдите во вновь созданный каталог, затем запустите приложение с помощью npm startкоманды в своем терминале.
Давайте немного очистим (необязательно) наше приложение. В srcкаталоге приложения удалите следующие файлы:
App.test.js
logo.svg
setupTests.js
Мы удалили эти файлы, потому что они не имеют отношения к нашей сборке. Мы также можем удалить reportWebVitalsфайл. Для этого необходимо, чтобы мы также удалили оператор импорта и вызов функции reportWebVitalsиз index.jsфайла для успешной компиляции нашего приложения React. Опять же, это все необязательно, поэтому вы можете просто пропустить это, если хотите.
Теперь очистите App.jsфайл, чтобы он выглядел так:
// src/App.js
import '. /App.css’;
function App () {
return (
) ;
}
export default App;
Создание компонента контактной формы
В srcкаталоге нашего приложения React создайте Form.jsфайл и добавьте в него следующие строки кода:
// src/Form.js
import '. /form.css’
export default function Form () {
return (
<form
method='POST’
name='contactform’
className='contactForm’>
<input
type='text’
name='name’
placeholder='Enter your name’ />
<input
type='email’
name='email’
placeholder='Enter your email’ />
<textarea
name='message’
placeholder='Messaage’>
function App () {
return (
тега в нашем index.htmlфайле:
В этой форме следует отметить два атрибута: nameи netlify. Атрибут nameпозволит Netlify подключиться к нашей форме JSX, а netlifyатрибут позволит боту Nelify анализировать нашу форму. Мы также использовали hiddenатрибут, чтобы скрыть форму от наших пользователей. Нет необходимости добавлять ярлыки или кнопку отправки в эту форму, поскольку она скрыта от нашего сайта.
Добавьте скрытый элемент ввода в форму JSX
В Form.jsфайле в srcкаталоге добавьте скрытый элемент ввода с установленным nameатрибутом
// src/Form.js
<input
type='hidden’
name='
value='contactForm’ />
Окончательная версия нашей формы теперь выглядит так:
// src/Form.js
<form
method='POST’
name='contactform’
className='contactForm’>
<input
type='hidden’
name='
value='contactForm’ />
<input
type='text’
name='name’
placeholder='Enter your name’ />
<input
type='email’
name='email’
placeholder='Enter your email’ />
<textarea
name='message’
placeholder='Messaage’>
$ git push -u origin master
Эти команды создадут новую фиксацию, соединит нас с нашим репозиторием GitHub и, наконец, подтолкнут к нему наше приложение React.
Обязательно заменитес
URL репозитория
После выполнения вышеуказанных gitкоманд обновите браузер. Вы обнаружите, что наше приложение React было отправлено на GitHub.
Репозиторий NetlifyForms
Теперь, когда наше приложение React доступно на GitHub, пришло время развернуть его на Netlify. Войдите в свою учетную запись Netlify, перейдите на панель инструментов и нажмите кнопку «Новый сайт из Git «. Мы попадем на страницу Создать новый сайт.
Создать новую страницу сайта
Нажмите кнопку GitHub в разделе «Непрерывное развертывание «. Затем нас перенаправляют на страницу авторизации, где Netlify запросит доступ к GitHub. После предоставления доступа к Netlify мы увидим страницу, подобную той, что показана ниже.
Создать новую страницу сайта
Прямо сейчас репозиторий NetlifyForms, который мы создали ранее, не отображается в списке репозиториев, потому что мы еще не настроили Netlify для доступа к нему.
Для этого нажмите ссылку «Настроить приложение Netlify на GitHub «внизу страницы. Мы увидим страницу, подобную той, что показана ниже.
Страница конфигурации для Netlify на GitHub
Прокрутите страницу вниз до раздела «Доступ к репозиториям «и нажмите кнопку «Выбрать репозитории «. Мы увидим список наших репозиториев GitHub.
Страница конфигурации для Netlify на GitHub
Выберите репозиторий NelifyForms и нажмите «Сохранить «, чтобы предоставить Netlify доступ к этому репозиторию. После сохранения мы будем перенаправлены на страницу «Создать новый сайт» в Netlify.
Создайте новую страницу сайта на Nelify
Наш репозиторий NetlifyForms теперь отображается в списке. Нажмите на нее, и мы увидим вот такую страницу.
Страница сборки и развертывания сайта
На этой странице мы можем установить параметры сборки и развертывания для нашего сайта, например изменить ветку Git для развертывания или команду, которая будет использоваться для развертывания нашего сайта. Но в этом не будет необходимости, потому что по умолчанию все выглядит хорошо.
Наконец, чтобы развернуть наш сайт в Netlify, прокрутите страницу вниз и нажмите кнопку «Развернуть сайт «. Развертывание может занять некоторое время, но как только оно будет завершено, мы увидим ссылку на наш сайт в правом верхнем углу страницы панели управления сайтом.
URL сайтов
Благодаря этому наше приложение React было успешно развернуто в Netlify с GitHub. Когда мы нажмем на ссылку, мы увидим созданную нами форму React.
Реагировать форма
Развертывание с помощью перетаскивания
Развертывание с помощью этого метода проще, но недостатком является то, что наш сайт не будет настроен для непрерывного развертывания. Мы можем настроить это вручную после развертывания, если наше приложение React доступно на GitHub, GitLab или Bitbucket.
Чтобы использовать метод перетаскивания, мы должны сначала создать наше приложение React. Откройте терминал и перейдите в каталог, где находится наше приложение React, затем введите следующую команду:
$ npm run build
buildПосле завершения сборки в корневом каталоге приложения React должна появиться новая папка с именем. Теперь наша структура каталогов будет выглядеть так:
> build
> node_modules
> public
> src
Теперь осталось перетащить эту папку на страницу перетаскивания Netlify.
Страница перетаскивания Netlify
Мы можем сделать это, перейдя к местоположению нашего приложения React в проводнике системных файлов, а затем перетащив buildпапку на страницу перетаскивания Netlify.
Вот GIF, который иллюстрирует именно это.
Перетащите гифку
Как только мы перетащим buildпапку в Netlify, она будет загружена и развернута. Затем мы будем перенаправлены на страницу панели инструментов нашего сайта.
Страница панели управления сайтом
Нажмите на этот URL, и вы увидите созданную нами контактную форму. Заполните форму и нажмите кнопку «Отправить «. Вы будете перенаправлены на страницу подтверждения с благодарностью.
страница подтверждения
Прохладный! Мы успешно заставили нашу форму React без сохранения состояния работать с Netlify Forms. Теперь каждая отправка формы через наше приложение обрабатывается Netlify Forms.
Прямо сейчас мы не получаем никаких уведомлений по электронной почте при отправке новой формы, потому что мы не установили адрес электронной почты, на который будут отправляться формы. Мы расскажем об этом в ближайшее время.
Управление отправкой контактной формы
Netlify не только упрощает добавление контактной формы, но также включает в себя функции, с помощью которых материалы, сделанные через нашу контактную форму, могут быть удалены, помечены как спам или загружены. Также есть место для интеграции нашей формы с бессерверными функциями Netlify. Вы можете прочитать об этом здесь.
Чтобы получить доступ к странице управления отправкой, перейдите на ранее развернутую страницу панели инструментов сайта в Netlify и щелкните ссылку «Форма «на панели навигации.
Страница панели управления сайтом
После нажатия на ссылку «Форма «вы будете перенаправлены на страницу панели инструментов формы.
Страница панели формы
Нажмите на контактную форму в разделе «Активные формы «, чтобы просмотреть страницу управления материалами, сделанными через нашу контактную форму.
Добавление уведомлений и пользовательских страниц подтверждения
В этом разделе мы расскажем, как добавить функцию уведомлений, которая позволит нам получать уведомления по электронной почте о новых отправленных формах. Мы также расскажем, как настроить страницу подтверждения «Спасибо», которая появляется после успешной отправки формы.
Получение уведомлений по электронной почте
В панели управления нашего сайта перейдите в «Настройки сайта «> «Формы «> «Уведомления форм «. Затем нажмите кнопку «Добавить уведомление «. Появится меню.
Форма уведомления
Netlify дает нам три варианта получения уведомлений. В этом уроке мы будем использовать уведомление по электронной почте.
Нажмите на уведомление по электронной почте и заполните появившуюся форму.
Форма для получения уведомления по электронной почте
Поле, которое нас больше интересует, — это поле «Электронная почта для уведомления «. Обязательно введите адрес электронной почты, на который вы хотите получать уведомления по электронной почте.
Теперь, когда мы открываем
Настройка страницы подтверждения
Чтобы настроить страницу подтверждения, первым шагом является добавление actionатрибута к formэлементу index.htmlфайла в publicкаталоге:
// public/index.htmm
Thank you
You will be replied to shortly
Чтобы проверить, работает ли страница подтверждения, нам нужно повторно развернуть наш сайт. Хорошо, что мы развернули наш сайт с GitHub. Все, что нам нужно сделать сейчас, чтобы повторно развернуть его, это написать несколько команд Git, и вуаля! Наш сайт будет автоматически повторно развернут на Netlify.
Вот команды:
$ git add *
$ git commit -m 'added confirmation page’
$ git push
Эти команды создают новую фиксацию и изменяют наш репозиторий GitHub. Поскольку мы подключили Netlify к NetlifyFormsрепозиторию на GitHub, когда в него вносятся изменения, Netlify немедленно замечает эти изменения и повторно развертывает наш сайт.
Как только наш сайт будет повторно развернут и мы отправим новую форму, мы увидим страницу подтверждения.
Индивидуальная страница подтверждения
Обработка формы в форме Stateful React
В этом разделе мы узнаем, как добавить контактную форму в приложение React с отслеживанием состояния с помощью Netlify Forms, используя компоненты на основе классов и перехватчики React.
Мы собираемся использовать форму, созданную нами в разделе «Обработка форм с контактной формой React без сохранения состояния».
Примечание. В этом разделе мы не будем рассматривать развертывание или получение уведомлений по электронной почте. Мы уже рассмотрели это в предыдущих разделах.
Обработка форм с помощью компонентов на основе классов
Чтобы использовать форму, которую мы создали в предыдущем разделе (чтобы продемонстрировать, как мы можем использовать форму Netlify с формой React с отслеживанием состояния), мы сначала должны изменить форму с формы без сохранения состояния на форму с отслеживанием состояния.
Файл Form.jsдолжен выглядеть так:
// src/Form.js
import '. /form.css’
import {Component} from 'react’
export default class Form extends Component{
constructor (props) {
super (props)
this.state = { name: '', email: '', message: '' }
}
handleChange = e =>
this.setState ({ [e.target.name]: e.target.value })
render () {
const { name, email, message } = this.state
return (
name='name’
value={name}
placeholder='Enter your name’
onChange={this.handleChange} />
<input
type='email’
name='email’
value={email}
placeholder='Enter your email’
onChange={this.handleChange} />
<textarea
name='message’
placeholder='Messaage’
value={message}
onChange={this.handleChange}>
...
Теперь давайте создадим handleSubmitметод, который будет публиковать новые отправленные формы в Netlify Forms.
Добавьте следующий код после handleChangeметода в Formкомпоненте:
// src/Form.js
...
handleSubmit = e => {
fetch ('/', {
method: 'POST’,
headers: { '
body: encode ({ '
})
.then (() => alert ('Success!'))
.catch (error => alert (error))
e.preventDefault ()
}
...
Обратите внимание, что в теле запроса мы использовали encodeфункцию. Мы создадим его в ближайшее время. Эта функция кодирует специальные символы (?, =, /, &) в форме перед ее публикацией.
Наконец, добавьте следующие строки кода перед Formкомпонентом:
...
const encode = (data) => {
return Object.keys (data)
.map (key => encodeURIComponent (key) + '=' + encodeURIComponent (data[key])).join ('&') ;
}
...
Теперь наш Form.jsфайл должен выглядеть так:
// src/Form.js
import '. /form.css’
import {Component} from 'react’
const encode = (data) => {
return Object.keys (data)
.map (key => encodeURIComponent (key) + '=' + encodeURIComponent (data[key])).join ('&') ;
}
export default class Form extends Component{
constructor (props) {
super (props)
this.state = { name: '', email: '', message: '' }
}
handleChange = e =>
this.setState ({ [e.target.name]: e.target.value })
handleSubmit = e => {
fetch ('/', {
method: 'POST’,
headers: { '
body: encode ({ '
})
.then (() => alert ('Success!'))
.catch (error => alert (error))
e.preventDefault ()
}
render () {
const { name, email, message } = this.state
return (
<form
className='contactForm’
onSubmit={this.handleSubmit}>
<input
type='text’
name='name’
value={name}
placeholder='Enter your name’
onChange={this.handleChange} />
<input
type='email’
name='email’
value={email}
placeholder='Enter your email’
onChange={this.handleChange} />
<textarea
name='message’
placeholder='Messaage’
value={message}
onChange={this.handleChange}>
const encode = (data) => {
return Object.keys (data)
.map (key => encodeURIComponent (key) + '=' + encodeURIComponent (data[key])).join ('&') ;
}
export default function Form () {
const [state, setState] = useState ({name: '', email: '', message: '' })
const handleChange = e =>
setState ({...state, [e.target.name]: e.target.value })
const handleSubmit = e => {
fetch ('/', {
method: 'POST’,
headers: { '
body: encode ({ '
})
.then (() => alert ('Success!'))
.catch (error => alert (error))
e.preventDefault ()
}
return (
<form
className='contactForm’
onSubmit={handleSubmit}>
<input
type='text’
name='name’
value={state.name}
placeholder='Enter your name’
onChange={handleChange} />
<input
type='email’
name='email’
value={state.email}
placeholder='Enter your email’
onChange={handleChange} />
<textarea
name='message’
placeholder='Messaage’
value={state.message}
onChange={handleChange}>
