Как создать контактную форму с помощью Formspree

Вы можете использовать множество методов на своем веб-сайте, чтобы пользователи могли безопасно отправлять вам электронные письма. Одним из примеров является использование атрибута mailto в контактной форме. Атрибут mailto открывает установленное почтовое приложение, чтобы пользователь мог ввести сообщение.

Для лучшего опыта рассмотрите возможность интеграции такого инструмента, как Formspree. Formspree действует как посредник, записывая данные формы и отправляя их на указанный вами адрес электронной почты.

Что такое Formspree и как это работает?

Formspree — это служба электронной почты, которую вы можете интегрировать в настраиваемую контактную форму. Когда вы входите в Formspree, вы можете указать целевой адрес электронной почты для формы. Formspree обрабатывает отправку форм от вашего имени. Это позволяет вам

Formspree сгенерирует конечную точку, которую вам нужно будет добавить в свою пользовательскую форму. Когда пользователь нажимает кнопку «Отправить», форма будет использовать конечную точку для вызова службы API Formspree. Будет создано электронное письмо с содержимым контактной формы.

Formspree отправит это электронное письмо на целевой адрес электронной почты, который вы указали в своей учетной записи Formspree. После этого вы получите электронное письмо на свой почтовый ящик. В вашей учетной записи Formspree также есть место, где вы можете просматривать отправленные вами контактные формы.

Чтобы зарегистрировать свою электронную почту в Formspree, войдите в систему и введите целевой адрес электронной почты для своей формы.

1. Авторизоваться Формспри. Если у вас нет учетной записи, вам нужно будет ввести свой адрес электронной почты и пароль. Зарегистрируйтесь, используя адрес электронной почты, на который вы хотите, чтобы контактная форма отправляла материалы. Вам также может потребоваться подтвердить этот адрес электронной почты в процессе регистрации.
2. После завершения процесса регистрации откроется страница «Формы». Нажмите на Новая форма.
3. Введите любое имя для своей контактной формы и оставьте настройки проекта по умолчанию. Введите целевой адрес электронной почты в поле «Отправлять электронные письма». Сюда Formspree будет отправлять отправленные вами контактные формы. После завершения нажмите на Создать форму.
4. Formspree предоставит вам конечную точку и примеры ее использования. Вам нужно будет добавить эту конечную точку в настраиваемую контактную форму на вашем веб-сайте (подробнее об этом позже).
5. По умолчанию Formspree хранит вашу форму в проекте под названием «Мой первый проект». Если вы хотите изменить это имя, вернитесь на страницу «Формы». Нажмите на Настройки рядом с названием проекта.
6. Здесь вы можете изменить название вашего проекта на другое. Например, вы можете переименовать его, чтобы он имел то же имя, что и ваш сайт. Вы также можете добавить URL своего веб-сайта.

Вам нужно будет добавить конечную точку, предоставленную Formspree, в контактную форму в коде вашего веб-сайта.

1. Добавьте конечную точку в атрибут «действие» для формы. Это приведет к тому, что браузер пользователя отправит форму на этот URL-адрес при ее отправке.

   <действие формы ="https://formspree.io/f/xjvlaqpe" метод="СООБЩЕНИЕ">
   <!-- Ваша форма здесь -->
   <тип кнопки="Отправить" класс="кнопка"> Представлять на рассмотрение </button>
   </form>

2. Добавьте входные данные в форму. Вы можете использовать эту примерную форму, которая использует CSS-фреймворк Bootstrap:

   <действие формы ="https://formspree.io/f/mbjqjrdl" класс="дополнительная прокладка" метод="СООБЩЕНИЕ">
   <раздел класс ="форма-группа">
   <метка для ="ответить на"> Ваш адрес электронной почты </label>
   <тип ввода="Эл. адрес" класс="контроль формы" идентификатор ="ответить на" имя="_ответить на" нгМодель ="Ответить" ария-описано="электронная почтаПомощь" заполнитель ="[email protected]">
   <маленький идентификатор ="электронная почтаПомощь" класс="форма-текст текст-приглушен"> Ваша электронная почта не будет передана никому другому. </small>
   </div>
   <раздел класс ="форма-группа">
   <метка для ="сообщение"> Твое сообщение </label>
   <имя текстовой области ="сообщение" стиль="высота: 200 пикселей" класс="контроль формы" идентификатор ="сообщение" заполнитель ="Привет! я'Я связываюсь с вами, потому что..."></textarea>
   </div>
   <тип кнопки="Отправить" класс="кнопка"> Представлять на рассмотрение </button>
   </form>
   

Чтобы проверить, работает ли Formspree, отправьте себе сообщение через контактную форму, нажмите Представлять на рассмотрение, и проверьте папку "Входящие" вашей электронной почты.

1. Запустите свой веб-сайт и откройте страницу с контактной формой. Введите сообщение в форму обратной связи и нажмите Представлять на рассмотрение.
2. Вы получите сообщение формы обратной связи в свой почтовый ящик.
3. Если вы вернетесь в Formspree, нажмите кнопку Материалы вкладка Здесь вы также сможете увидеть отправленные сообщения из контактной формы.

Formspree — это один из многих сервисов, которые вы можете использовать для интеграции пользовательской контактной формы на свой сайт. Это позволяет вам быстро начать принимать отзывы пользователей, не беспокоясь о внутренних деталях.

Если вы новичок в создании форм с помощью HTML и JavaScript, вы также можете узнать больше о проверке форм на стороне клиента. Это помогает гарантировать, что ваши контактные формы могут проверять все вводимые пользователем данные.

Об авторе

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

Шарлин — технический писатель в MUO, а также работает полный рабочий день в сфере разработки программного обеспечения. Она имеет степень бакалавра информационных технологий и имеет предыдущий опыт работы в области обеспечения качества и преподавания в университете. Шарлин любит игры и игру на пианино.

Другие работы Шарлин фон Дренен