Как да създадете формуляр за контакт с помощта на Formspree

Можете да използвате много методи на уебсайта си, за да позволите на потребителите да ви изпращат сигурно имейли. Един пример е използването на атрибута mailto във форма за контакт. Атрибутът mailto отваря инсталирано приложение за електронна поща, за да може потребителят да въведе съобщение.

За по-добро изживяване помислете за интегриране на инструмент като Formspree. Formspree действа като посредник, записвайки данните от формуляра и ги изпраща на посочения от вас имейл адрес.

Какво е Formspree и как работи?

Formspree е услуга за имейл, която можете да интегрирате в персонализиран формуляр за контакт. Когато влезете във Formspree, можете да посочите целевия си имейл адрес за формуляр. Formspree обработва изпращането на формуляри от ваше име. То ви позволява

Formspree ще генерира крайна точка, която ще трябва да добавите към вашия персонализиран формуляр. Когато потребител натисне бутона „Изпращане“, формулярът ще използва крайната точка, за да извика API услугата на Formspree. Това ще генерира имейл със съдържанието на формата за контакт.

Formspree ще изпрати този имейл до целевия имейл, който сте посочили във вашия акаунт във Formspree. След това ще получите имейла във входящата си поща. Вашият акаунт във Formspree също има място, където можете да видите изпратените от вас формуляри за контакт.

За да регистрирате своя имейл във Formspree, влезте и въведете целевия имейл адрес за вашия формуляр.

1. Влезте в Formspree. Ако нямате акаунт, ще трябва да въведете своя имейл адрес и парола. Регистрирайте се, като използвате имейл адреса, на който искате формуляра за контакт да изпраща изявления. Може също да се наложи да потвърдите този имейл адрес по време на процеса на регистрация.
2. След като процесът на регистрация приключи, ще се отвори страницата „Формуляри“. Кликнете върху Нова форма.
3. Въведете произволно име за вашия формуляр за контакт и оставете настройките на проекта по подразбиране. Въведете целевия имейл адрес в полето „Изпращане на имейли до“. Това е мястото, където Formspree ще изпрати изпратените от вас формуляри за контакт. След като приключите, кликнете върху Създаване на формуляр.
4. Formspree ще ви предостави крайна точка и примери за това как да я използвате. Ще трябва да добавите тази крайна точка към вашата персонализирана форма за контакт на вашия уебсайт (повече за това по-късно).
5. По подразбиране Formspree съхранява вашия формуляр в проект, наречен "Моят първи проект". Ако искате да промените името на това, върнете се на страницата „Формуляри“. Кликнете върху Настройки до името на проекта.
6. Тук можете да промените името на вашия проект на друго. Например, можете да го преименувате, за да има същото име като вашия уебсайт. Можете също да добавите URL адреса за вашия уебсайт.

Ще трябва да добавите крайната точка, предоставена от Formspree, във формата за контакт в кода на вашия уебсайт.

1. Добавете крайната точка в атрибута "действие" за формуляра. Това ще накара браузъра на потребителя да изпрати формуляра до този URL адрес, когато го изпрати.

   <форма действие="https://formspree.io/f/xjvlaqpe" метод="ПУБЛИКАЦИЯ">
   <!-- Вашият формуляр тук -->
   <тип бутон="Изпращане" клас="бутон"> Изпращане </button>
   </form>

2. Добавете входове към вашия формуляр. Можете да използвате този примерен формуляр, който използва Bootstrap CSS рамката:

   <форма действие="https://formspree.io/f/mbjqjrdl" клас="допълнителна подплата" метод="ПУБЛИКАЦИЯ">
   <div клас="форма-група">
   <етикет за="отговаряте на"> Вашата електронна поща </label>
   <тип вход="електронна поща" клас="форма-контрол" id="отговаряте на" име="_отговаряте на" ngModel="отговор" aria-describedby="имейл Помощ" заместител="[email protected]">
   <малък идентификатор="имейл Помощ" клас="форма-текст текст-заглушен"> Вашият имейл няма да бъде споделен с никой друг. </small>
   </div>
   <div клас="форма-група">
   <етикет за="съобщение"> Твоето съобщение </label>
   <име на текстова област="съобщение" стил="височина: 200px" клас="форма-контрол" id="съобщение" заместител="Ей там! аз'се свързвам с вас, защото..."></textarea>
   </div>
   <тип бутон="Изпращане" клас="бутон"> Изпращане </button>
   </form>
   

За да проверите дали Formspree работи, изпратете си съобщение, като използвате формата за контакт, натиснете Изпращане, и проверете входящата поща на вашия имейл.

1. Стартирайте уебсайта си и отворете страницата, която съдържа формата за контакт. Въведете съобщение във формата за контакт и натиснете Изпращане.
2. Ще получите съобщението за контакт във входящата си кутия.
3. Ако се върнете към Formspree, щракнете върху Изявления раздел. Тук също ще можете да видите изпратените съобщения от вашата форма за контакт.

Formspree е една от многото услуги, които можете да използвате, за да интегрирате персонализиран формуляр за контакт във вашия сайт. Позволява ви бързо да започнете да приемате обратна връзка от потребителите, без да се притеснявате за подробностите за бекенда.

Ако сте нов в създаването на формуляри с HTML и JavaScript, можете също да научите повече за валидирането на формуляри от страна на клиента. Това помага да се гарантира, че вашите формуляри за контакт могат да потвърдят всички въведени от потребителя данни.

За автора

Шарлин фон Дренен (Публикувани 9 статии)

Шарлийн е технически писател в MUO и също така работи на пълен работен ден в разработката на софтуер. Тя има бакалавърска степен по ИТ и предишен опит в осигуряването на качество и преподаване в университета. Шарлийн обича да играе и да свири на пиано.

Още от Sharlene Von Drehnen