На хорошем веб-сайте-портфолио должна быть страница контактов, на которой посетители могут отправлять вам электронные письма. В конце концов, какой смысл тратить столько усилий на создание веб-сайта, когда посетители не могут с вами связаться? Не все хотят звонить по телефону, поэтому с помощью удобной формы электронной почты им будет удобно отправить вам сообщение. В этом руководстве я научу вас, как создать форму электронной почты для вашего веб-сайта портфолио React с помощью EmailJS и React-Hook-Form.
1. Создайте новый проект
Давайте создадим новое приложение React, чтобы вы могли следить за ним. Идите вперед, перейдите в подходящий каталог и введите
npx create-react-app my-portfolio
затем cd в каталог проекта и откройте его в любом редакторе кода. Откройте src / App.js и удалите тег заголовка и его содержимое. Вы также можете удалить или закомментировать импортный логотип из ‘./logo.svg’; в строке 2, поскольку мы не будем его использовать.
Теперь давайте создадим компонент "Контакт". Создайте файл Contact.js в src /. А пока давайте сделаем это как можно проще.
// Contact.js
import React from 'react';
const Contact = () => {
return (
<div className='contact'>
<h1>Contact</h1>
</div>
);
}
export default Contact;
Теперь продолжайте и импортируйте его в App.js.
// App.js
import React from 'react';
import './App.css';
import Contact from './Contact.js';
function App() {
return (
<div className="App">
<Contact />
</div>
);
}
export default App;
Мы много сделали. Давайте убедимся, что созданный нами компонент «Контакт» импортируется и отображается правильно. В терминале запустите
npm start
и вы должны это увидеть:
Потрясающие! Теперь мы знаем, что наш компонент «Контакт» работает правильно. На вашем реальном веб-сайте он будет условно отображаться с помощью чего-то вроде React Router и Navlinks, но в этом руководстве мы рассматриваем только страницу контактов, поэтому не нужно ни о чем из этого беспокоиться. Теперь, когда у нас есть компонент "Контакт", давайте заполним его.
2. Создайте форму
Вы можете создать обычную форму на JSX, но мне нравится использовать response-hook-form. Он предлагает несколько функций, таких как проверки и наблюдение за изменениями ввода, которые упрощают управление поведением нашей формы и веб-приложения. Идите и установите его.
npm install react-hook-form
Теперь давайте создадим эту электронную форму. Добавьте следующее в основной блок Contact.js.
// Contact.js <form id='contact-form'> <input type='text' name='user_name' placeholder='Name' /> <br/> <input type='email' name='user_email' placeholder='Email' /> <br/> <textarea name='message' placeholder='Message'/> <br/> <input type='submit' value='Send' /> </form>
Мы можем добавить немного стиля. Создайте файл Contact.css в src /. Добавьте следующий css.
// Contact.css
input {
width: 600px;
}
textarea {
height: 10em;
width: 600px;
}
Итак, теперь ваша страница должна выглядеть так.
Отлично. Давайте интегрируем некоторые функции формы реакции. Импортируйте форму реакции-ловушки в Contact.js.
// Contact.js
import { useForm } from 'react-hook-form';
Затем внутри нашего функционального компонента Contact добавьте следующие строки перед оператором return.
const { register, handleSubmit, watch, errors } = useForm();
const onSubmit = data => console.log(data);
Наконец, добавьте событие onSubmit в форму и добавьте атрибуты ref к каждому входному тегу. Наша форма должна выглядеть так.
<form id='contact-form' onSubmit={handleSubmit(onSubmit)}>
<input type='text' name='user_name' ref={register} placeholder='Name' />
<br/>
<input type='email' name='user_email' ref={register} placeholder='Email' />
<br/>
<textarea name='message' ref={register} placeholder='Message'/>
<br/>
<input type='submit' value='Send' />
</form>
Давайте протестируем нашу форму реакции-крючка, введя данные в нашу форму. Вы можете видеть, что наши данные правильно записываются в консоль. Ура!
Обратите внимание, что наша форма обрабатывается с помощью функции onSubmit, которую мы объявили непосредственно перед оператором return. Здесь мы позже отправим данные в наш почтовый ящик.
3. Добавьте проверки в форму
Теперь давайте добавим проверки с помощью формы response-hook, чтобы убедиться, что наш отправитель отправляет полное электронное письмо. Во поле ввода имени добавьте следующий атрибут aria и обновите атрибут ref. При желании мы также можем добавить атрибут maxLength.
maxLength='30'
aria-invalid={errors.user_name ? "true" : "false"}
ref={register({ required: true })}/>
Мы также добавим условно отображаемое сообщение об ошибке прямо над входным тегом.
{errors.user_name && errors.user_name.type === "required" && (
<div role="alert">Name is required<br/></div>
)}
Ваш законченный ввод имени должен выглядеть так.
{errors.user_name && errors.user_name.type === "required" && (
<div role="alert">Name is required<br/></div>
)}
<input
type='text'
name='user_name'
placeholder='Name'
maxLength='30'
aria-invalid={errors.user_name ? "true" : "false"}
ref={register({ required: true })}/>
<br/>
Таким же образом обновите теги Email input и Message textarea.
Наконец, добавьте следующее в Contact.css.
// Contact.css
div[role='alert'] {
color: red;
margin-top: 1em;
}
Обратите внимание, что теперь, когда вы пытаетесь отправить форму с отсутствующим полем, вы получите сообщение об ошибке. Данные формы также не записываются в консоль, что означает, что функция onSubmit не запускается. Это хорошо; мы хотим, чтобы эта функция запускалась только после прохождения всех наших проверок.
Давайте также добавим к сообщению максимальную длину символа. Присвойте тегу textarea в Contact.js атрибут максимальной длины.
maxLength='1500'
Мы также можем воспользоваться формой реакции-крючка для отображения количества символов, оставшихся на странице. В начале компонента функции Contact объявите новую переменную, в которой хранится текущее сообщение, и переменную, которая отслеживает оставшееся количество символов.
const message = watch('message') || "";
const messageCharsLeft = 1500 - message.length;
Затем добавьте переменную в форму сразу после текстового поля.
<p className='message-chars-left'>{messageCharsLeft}</p>
Наконец, добавьте немного стиля.
// Contact.css
.message-chars-left {
width: 600px;
margin: auto;
text-align: left;
}
Проверьте это!
Хорошо выглядит! На данный момент мы закончили с формой. Затем мы собираемся добавить в наш проект почтовый сервис, чтобы форма работала.
4. Создайте учетную запись и шаблон EmailJS.
Мы собираемся использовать EmailJS для обработки отправки данных в ваш личный почтовый ящик. Перейдите на https://www.emailjs.com и создайте бесплатную учетную запись. На вкладке Службы электронной почты нажмите Добавить новую службу. Я использую учетную запись Gmail, поэтому выберу ее. Введите Контактную форму для имени и contact_form для идентификатора услуги. Это может быть все, что вы пожелаете, если они имеют для вас смысл. Завершите, нажав Добавить службу. Это должна быть ваша служба по умолчанию.
Теперь давайте создадим наш шаблон электронной почты. На вкладке «Шаблоны электронной почты» нажмите «Создать новый шаблон». Таким образом отправленное письмо будет отображаться в вашем почтовом ящике. Давайте изменим этот шаблон, чтобы он лучше соответствовал нашим потребностям.
Начните с замены переменной {{from_name}} в строке Subject на {{user_name}}. Значение будет взято из формы.
Затем в верхней части сообщения вставим строку «Контактный номер: {{contact_number}}». Это будет случайно сгенерированный номер, который будет указан в форме для справки.
Затем замените {{to_name}} своим именем, так как это будет относиться к вам и только к вам.
Затем вы получите сообщение от {{user_name}}, поэтому используйте его вместо следующего {{from_name}}.
Теперь внутри раздела с кавычками добавьте {{user_name}} ({{user_email}}) в новую строку.
Вы можете оставить или удалить закрытие Best Wishes. Наконец, в поле "Ответить кому" справа измените его на {{user_email}}. Вы можете оставить поле От имени пустым.
Ваш готовый шаблон должен выглядеть так.
Щелкните Сохранить, чтобы сохранить шаблон по умолчанию.
5. Добавьте EmailJS в свой проект
В код вашего проекта мы собираемся интегрировать EmailJS. Вы можете загрузить EmailJS в свой html-файл, но я собираюсь установить EmailJS как модуль узла.
npm install emailjs-com --save
Теперь давайте импортируем и инициализируем EmailJS в Contact.js с вашим идентификатором пользователя. Вы можете найти свой идентификатор пользователя на вкладке «Интеграция» на панели управления EmailJS.
// Contact.js
import { init, sendForm } from 'emailjs-com';
init('YOUR_USER_ID');
Давайте также создадим наш метод генерации контактного номера. Обновите свой импорт React, включив useState, и создайте состояние и метод установки состояния. Затем создайте метод, который будет генерировать контактный номер.
import React, { useState } from 'react';
// ...
const Contact = () => {
const [contactNumber, setContactNumber] = useState("000000");
const generateContactNumber = () => {
const numStr = "000000" + (Math.random() * 1000000 | 0);
setContactNumber(numStr.substring(numStr.length - 6));
}
// ...
}
Метод generateContactNumber () устанавливает случайную строку из 6 цифр в качестве контактного номера. Этот метод гарантирует, что контактный номер состоит из 6 цифр с сохранением начальных нулей.
EmailJS отправляет данные из входных значений формы, поэтому нам нужно добавить этот контактный номер в нашу форму. Это легко сделать, добавив скрытое поле ввода прямо в форму.
<input type='hidden' name='contact_number' value={contactNumber} />
Наконец, мы можем добавить функцию, которая будет отправлять данные на нашу электронную почту. В функции onSubmit вызовите метод generateContactNumber () и метод sendForm (), передав в качестве аргументов идентификатор службы, идентификатор шаблона (из панели управления EmailJS) и идентификатор HTML-формы. Нам не нужно передавать наш идентификатор пользователя EmailJS, поскольку мы уже инициализировали EmailJS. УБЕДИТЕСЬ, что вы вызываете метод generateContactNumber () ВНУТРИ метода onSubmit (), иначе ваш код войдет в бесконечный цикл, установит контактный номер, обновит компонент и снова установит контактный номер.
const onSubmit = (data) => {
// console.log(data);
generateContactNumber();
sendForm('default_service', 'YOUR_TEMPLATE_ID', '#contact-form')
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
}, function(error) {
console.log('FAILED...', error);
});
}
Как только у вас все будет, попробуйте!
Мы получили сообщение об успехе в консоли! Давай проверим нашу электронную почту!
Это сработало!! Только вот, хм, это выглядит не совсем. В нашем тестовом сообщении у нас были разрывы строк между заголовком, телом и закрытием в нашем сообщении, но в электронном письме все слова были помещены в одну строку. Давай исправим это.
Откройте свой шаблон электронной почты в панели управления EmailJS. Нажмите кнопку «Исходный код», чтобы открыть HTML-код для вашего шаблона.
Добавьте это к встроенному стилю в теге ‹p› сообщения.
white-space: pre-wrap
Сохраните свой шаблон. А теперь давайте отправим сообщение еще раз.
Идеально! Обратите внимание, что контактный номер также обновился, подтверждая, что новый номер будет генерироваться при каждом отправленном сообщении. Имейте в виду, что у вас есть ежемесячный лимит на количество писем, которые отправляет EmailJS, 200 в месяц, если вы используете бесплатный план. Учтите это при устранении неполадок и тестировании кода.
На данный момент ваша контактная форма работает. Однако есть несколько вещей, которые мы можем сделать, чтобы по-настоящему очистить его и сделать его более удобным в использовании. Начнем с очистки формы при ее отправке. Для этого мы будем использовать старый добрый JavaScript. Давайте возьмем форму в функции onSubmit () и сбросим ее, когда функция sendForm () завершится успешно.
const onSubmit = (data) => {
const form = document.querySelector('#contact-form');
// ...
sendForm(YOUR_PARAMETERS)
.then(function(response) {
// ...
form.reset();
}, ...);
};
Давайте также включим статусное сообщение, которое позволит отправителю узнать, было ли сообщение отправлено успешно или нет. В начале компонента функции Contact создайте новую переменную состояния Hooks.
const [statusMessage, setStatusMessage] = useState("Message");
Исходное состояние «Сообщение» удерживает на странице место для сообщения. Пустая строка не будет занимать вертикальное пространство, а обновление сообщения приведет к смещению содержимого страницы.
Добавьте статусное сообщение к возвращенному JSX.
return (
<div className='contact'>
<h1>Contact</h1>
<p className='status-message'>{statusMessage}</p>
// ...
</div>
);
Теперь давайте возьмем это сообщение о статусе в функции onSubmit () и обновим его при отправке формы.
const onSubmit = (data) => {
const statusMessage = document.querySelector('.status-message');
// ...
sendForm(YOUR_PARAMETERS)
.then(function(response) {
// ...
setStatusMessage("Message sent!");
statusMessage.className = "status-message success";
setTimeout(()=> {
statusMessage.className = 'status-message'
}, 5000)
}, function(error) {
// ...
setStatusMessage("Failed to send message! Please try again later.");
statusMessage.className = "status-message failure";
setTimeout(()=> {
statusMessage.className = 'status-message'
}, 5000)
});
}
Не забывайте стиль! Давайте скроем сообщение, пока мы не будем готовы его показать.
// Contact.css
.status-message {
opacity: 0;
}
.success {
opacity: 1;
color: green;
}
.failure {
opacity: 1;
color: red;
}
Посмотрим, работает ли это. Выключите на устройстве Wi-Fi и данные или иным образом отключитесь от Интернета и отправьте тестовое сообщение.
Отлично, теперь подключитесь к Интернету и попробуйте еще раз.
Поздравляем, ваша электронная почта полностью работоспособна! У нас есть не только проверки, чтобы убедиться, что отправитель не отправляет сообщение преждевременно, но и уведомление в стиле тоста, чтобы уведомить отправителя, если сообщение было отправлено успешно!
Эта форма электронной почты чистая, отзывчивая и простая в использовании. Кроме того, у вас есть много возможностей для добавления собственного дизайна и функциональности. Дайте мне знать, насколько полезным вы нашли этот урок на моей личной странице контактов.
Удачного кодирования!
