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

Внедрение контактных форм; также веб-формы, которые могут быть опубликованы на ваших веб-сайтах. Эти формы позволяют посетителям связаться с вами, заполнив свою информацию в форме и отправив ее владельцу сайта.

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

Я хотел бы поделиться с вами тем, как вы можете создать свою собственную простую веб-форму, которую вы можете разместить на своем веб-сайте, что позволит посетителям напрямую связываться с вами одним нажатием кнопки.

Первое, что вам нужно сделать, это разработать форму.

Для начала вы можете использовать приведенный ниже HTML-код.

<form action="https://formsubmit.co/[email protected]" method="POST">
     <input type="text" name="name" placeholder="Name" required>
     <input type="email" name="email" placeholder="Email" required>
     <textarea name="message" placeholder="Write Your Message Here" rows="4" required></textarea></div>
     <button type="submit">Send</button>
</form>

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

Он также имеет кнопку «Отправить», которую ваш посетитель может нажать, чтобы отправить форму.

Для тех из вас, кто плохо разбирается в HTML, позвольте мне разобрать код.

<form action="https://formsubmit.co/[email protected]" method="POST">

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

Все, что вам нужно сделать, это изменить [email protected] на свой собственный адрес электронной почты, и все готово!

Единственное, что вы должны принять к сведению, это то, что если вы используете эту форму в первый раз, будет отправлено электронное письмо с запросом подтверждения с вашей стороны. Но это в основном все, что вам нужно сделать, чтобы использовать сервис FormSubmit.

     <input type="text" name="name" placeholder="Name" required>
     <input type="email" name="email" placeholder="Email" required>
     <textarea name="message" placeholder="Write Your Message Here" rows="4" required></textarea></div>

Следующая часть кода — это то, как создаются поля формы. Для этого примера мы создали атрибуты с именами «Имя» и «Электронная почта», а также текстовую область с надписью «Напишите здесь свое сообщение», чтобы предложить посетителю ввести свое сообщение.

Посетитель вашего веб-сайта не может отправить форму, не заполнив данные, потому что мы поместили атрибут required перед концом тегов.

     <button type="submit">Send</button>

Последняя часть кода — это кнопка отправки, которая инициирует отправку формы и электронного письма, отправленного вам.

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

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

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

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

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

Благодаря этому вы сможете разместить на своем веб-сайте персонализированную контактную форму, чтобы люди могли связаться с вами!

Подпишитесь на меня на Medium, чтобы первыми узнавать о моем еженедельном обмене знаниями в области технологий.

Хотите увидеть, над чем я работаю?

Посетите мой Персональный сайт и GitHub

Хотите связаться со мной?

Свяжитесь со мной в LinkedIn.