Как да създадете формуляр за контакт с 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

В горния фрагмент сме:

  • Създаване на нова форма
  • Във формуляра има име атрибут, метод и data-netlifyатрибут, зададени наtrue
  • Създаване на 3 полета на формуляра с етикети, всеки идентифициран с атрибут име
  • Създаване на бутон за изпращане на формуляра

Нещото, което искаме да обърнем най-много внимание, е 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; } 

За допълнителна стъпка за бонус ще актуализирам заглавието на страницата си до „Свържете се с мен“ и ще премахна описанието. Чувствайте се свободни да направите това, което искате.

И след като сте готови, подобно на преди, добавете това като ново хранилище към 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.

След това щракнете върху Deploy site и той ще започне точно както преди.

След като приключи разгръщането, сега ще сме готови да отворим приложението.

И след като отворим приложението си, можем да тестваме формуляра си, като го попълним и натиснем „Изпращане“.

Подобно на преди, ще кацнем на страница за успех на 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 и други интересни неща!

  • ? Последвай ме в Туйтър
  • ? Абонирайте се за моя Youtube
  • Регистрирайте се за моя бюлетин
  • ? Спонсорирайте ме