Контактная форма с помощью Emailjs - простой JavaScript

Контактные формы являются важной частью каждого веб -сайта, особенно веб -сайтов портфеля. Вот как обращаются.

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

Emailjs это бесплатный инструмент, который позволяет отправлять электронную почту непосредственно с Frontend без кода сервера. Вы можете отправлять и получать до 200 электронных писем, используя бесплатный пакет. Это разумно, если вы спросите меня. Вы также можете Обновление с небольшим жетоном Анкет

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

Создать и настройку бесплатной учетной записи

Перейти к Запись страница и создать учетную запись.

Теперь вы должны быть в панели приборной панели так:

Добавить новую службу электронной почты

Служба электронной почты может быть Личный или Транзакция Анкет Вы можете прочитать больше об этом Здесь Анкет

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

В боковом меню нажмите на Электронная почта :
Нажмите на Добавить сервис электронной почты :
Выберите Gmail из диалогового окна:
Теперь вы можете увидеть свой Идентификатор службы на экране это следует
Нажмите на Подключить учетную запись чуть ниже Идентификатор службы Анкет

Не снимайте с ума Отправить тестовое электронное письмо для проверки конфигурации Если вы хотите получить тестовое электронное письмо, подтверждающее ваше соединение

Теперь у вас должен быть экран авторизации Gmail. Пожалуйста, выберите электронное письмо, которое вы хотите использовать

Установите все флажки и Продолжать

Когда соединение будет успешным, теперь вы должны вернуться к этому экрану с помощью подтверждающего сообщения: Соединен как Как экран ниже

Вы всегда можете вернуться сюда, чтобы отключиться

Я также получил электронное письмо, чтобы подтвердить мое соединение с электронной почтой:

Окончательно, Нажмите на Создать сервис Чтобы завершить создание службы электронной почты

Теперь вы должны добавить новую услугу так:

Хороший!!! Держите идентификатор обслуживания, потому что вам понадобится в ближайшее время.

Создайте свой шаблон электронной почты

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

Нажмите на Создайте новый шаблон

Теперь у вас будет экран шаблона так:

Вы заметите, что экран выглядит так же, как вы собираетесь создать новое электронное письмо.

Для каждого поля вы можете заполнить текст по умолчанию, который вы хотели бы получить. Однако любой текст в боковых двойных вьющихся скобках становится переменной. Например, в теле электронной почты, {{сообщение}} является переменной. Когда вы создаете форму, поле ввода с именем: Сообщение собирать текст, который будет отображаться в теле электронной почты, где {{сообщение}} расположен.

Я надеюсь, что в этом есть смысл. Вы все равно поймете больше.

Давайте теперь немного изменим контент по электронной почте. Для Тема поле, просто введите {{субъект}} и для тело электронной почты , введите следующее:

{{message}}

{{name}}
{{email}}

Мой экран теперь выглядит так:

Нажмите на Сохранять

Вы можете проверить его, нажав на Контрольная работа Это Кнопка рядом с Сохранить Кнопка. Это довольно просто.

На этот раз мы можем построить наше заявление на JavaScript.

JavaScript

Стартовый проект

Получить стартовый код Здесь или просто создайте проект с файлом: index.html и добавить следующий код:




  
    
    

    
    
    JavaScript Emailjs
  
  
    
      
        
          Email - JavaScript Contact Form
          
          
            
            
              Name
              
            

            
            
              Email address
              
            

            
            
              Subject
              
            

            
              Message

После настройки его на локальной машине у вас должен быть следующий экран:

В коде Сообщение Имя поля – Сообщение Анкет Это было изначально опущено

Установите Emailjs, добавив следующий скрипт внизу

* Не забудьте положить Your_user_id своему собственному идентификатору пользователя *

Чтобы получить user_id, перейдите на панель инструментов и нажмите на Интеграции Ссылка в боковом меню. Вы должны быть на такой странице, как это:

Ваш user_id находится внизу под Ключи API

Теперь вернемся к нашему коду, запустите еще один сценарий ниже со следующим кодом внутри:

Строка кода, которую вы видите, – это все, что вам нужно для отправки сообщений из вашей формы на свой адрес электронной почты по электронной почте. Вам нужно будет изменить «your_service_id» и «your_template_id» на ваши фактические значения.

Чтобы получить your_service_id, нажмите на ссылку по электронной почте в боковой меню панели инструментов

Чтобы получить your_template_id, нажмите на ссылку «Шаблоны электронной почты» в боковом меню панели панели и перейдите на вкладку «Настройки» так:

Добавить id к форма с именем: myform тег как так <форма>

Все хорошо!!!

Теперь, когда вы нажимаете на Отправить Кнопка вашей формы, это работает! Но мы просто получим пустое письмо, и мы не знаем, действительно ли это сработало или нет с нашего веб -сайта.

Для этого нам нужно будет добавить Тогда ... поймать ... блокировать. Так вместо

У нас будет это:

В приведенном выше коде мы просто слушаем, когда форма отправляется, и называем emailjs.send form () функция Теперь мы получаем сообщение с обратной связью в нашей консоли и предупреждающую обратную связь.

Это было много работы, давайте проверим нашу тяжелую работу.

Тестирование

Электронная почта в действии (GIF)

Электронная почта в действии (JPEG)

По электронной почте получено

Yaaahhhh, это работает !!!

Поздравляю с тем, чтобы вы достигли этой ноги !!!

Вывод

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

Таким образом, мы рассмотрели общий обзор Emailjs, как настроить учетную запись, создать услуги по электронной почте и Templetes. Наконец, мы увидели, как интегрировать его в свой код, если он написан на простом JavaScript. В конце концов, это было успешным. Я надеюсь, тебе было весело!

Все код Здесь

Далее я буду показывать тех, кто использует Реагировать Как это может быть реализовано. До тех пор не стесняйтесь поддерживать связь.

Оригинал: “https://dev.to/ebereplenty/contact-form-with-emailjs-plain-javascript-365l”