обязательное поле введите ваш email

Адрес электронной почты

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

Синтаксис создания поля следующий.

Атрибуты по большей части совпадают с текстовым полем и приведены в табл. 1.

Табл. 1. Атрибуты поля для почтового адреса

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

Пример 1. Адрес электронной почты

HTML5 IE 10+ Cr Op Sa Fx

По своему виду поле для ввода адреса ничем не отличается от текстового поля. Различия проявляются, если указать некорректный адрес, в этом случае браузер выведет замечание об ошибке. Firefox поле с неверным адресом обозначает красной рамкой и сообщением об ошибке при отправке формы (рис. 1), Chrome никак сразу не выделяет поле с ошибкой, но выводит сообщение при отправке формы (рис. 2). Аналогично поступает и Opera (рис. 3). Сама форма на сервер не отправляется, пока ошибка не будет исправлена.

Рис. 1. Отправка формы в Firefox

Рис. 2. Отправка формы в Chrome

Рис. 3. Отправка формы в Opera

Другие популярные браузеры (IE, Safari) интерпретируют поле для адреса электронной почты как текстовое.

Источник

Как добавить контактную форму в WordPress

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

Обычно контактная форма состоит из нескольких полей, которые нужно заполнить. Например: «Имя», «Адрес электронной почты», «Текст сообщения». Через контактную форму пользователям будет удобнее с вами связаться: они заполнят необходимые поля и отправят форму в один клик, не нужно звонить или отправлять сообщение на email. Кроме того, посетители смогут подписаться на рассылку вашего сайта, оставить отзыв, заказать товар или услугу.

Шаг 1. Установите плагин Contact Form 7

Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите Contact Form 7 и нажмите Установить:

После установки нажмите Активировать:

Готово, вы установили и активировали плагин.

Шаг 2. Создайте форму обратной связи

Перейдите на появившуюся после установки вкладку Contact Form 7 — Добавить новую. На вкладке «Шаблон формы» откроется редактор формы с уже готовым стандартным шаблоном:

Шаг 3. Настройте шаблон формы

В стандартном шаблоне в форму добавлены поля «Ваше имя», «Ваш e-mail», «Тема», «Сообщение» и кнопка Отправить.

Для Contact Form 7 настройка шаблона выглядит следующим образом. В редакторе шаблона можно использовать HTML-код и так называемые теги формы. Теги формы — это шорткоды (короткие коды), которые при публикации преобразуются в HTML-код и добавляют поля формы. Также существуют теги почты для настройки электронной почты. Рассмотрим синтаксис тегов формы и тегов почты.

Синтаксис тега формы

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

Рассмотрим поля, которые можно добавить:

Посмотрите, как можно применить все инструменты, на примере. Ниже приведён код с тегами формы и результат — получившаяся форма заказа Вордпресс:

Синтаксис тега почты

Шаг 4. Настройте шаблон письма

Если посетитель вашего сайта заполнит форму и отправит её, то на ваш электронный адрес придёт сообщение с этой формы.

Вы можете настроить это сообщение на вкладке «Письмо». При редактировании используйте почтовые теги:

Шаг 5. Настройте уведомления при отправке формы

На вкладке «Уведомления при отправке формы» вы можете настроить уведомления, которые видит посетитель в различных ситуациях.

Некоторые сообщения — это уведомления о состоянии отправки контактной формы. Например, при успешной отправке пользователь получит сообщение «Спасибо за ваше сообщение. Оно успешно отправлено», а при ошибке отправки — «При отправке сообщения произошла ошибка. Пожалуйста, попробуйте ещё раз позже». Другие сообщения — это уведомления об ошибках заполнения формы «Поле слишком короткое» или «Введён некорректный URL-адрес».

В уведомлениях можно использовать только текст. Но также можно добавить почтовые теги. Например, настройте уведомление «Спасибо, [your-name], вы отправили форму!» Когда пользователь при заполнении формы введёт своё имя [your-name], то в сообщении при отправке тег заменится на его имя.

Сохраните отредактированную форму.

Готово, вы настроили и сохранили форму.

Шаг 6. Добавьте форму на сайт

Перейдите на вкладку Contact Form 7 — Контактные формы. Рядом с вашей контактной формой находится шорткод. Скопируйте его:

Добавьте шорткод на страницу сайта или запись в редакторе:

Добавленная форма (здесь стандартная) будет выглядеть в режиме предпросмотра и на сайте таким образом:

Готово, вы добавили контактную форму WordPress Contact Form 7 на сайт. Теперь посетители сайта смогут воспользоваться ей, а данные со всех заполненных форм придут на ваш email.

Источник

Как сделать обязательным одно из полей: почта или телефон

Бывают ситуации, когда нужно обязательно получить от пользователя телефон или почту, но не обязательно и то и другое вместе. Из коробки CF7 не даёт такого функционала, поэтому ниже напишем его сами.

Вариант 1: без проверок на форму

Как видно из разметки, поля user-email и user-phone не обязательные. Проверим их в коде ниже.

Если бы они были обязательные, то форма требовала бы заполнения их обоих, а нам нужно: телефон или почта (оба необязательно).

Проверим нашу форму перед отправкой — заполнено хотя бы одно из двух полей:

Этот способ подойдет, если у вас:

Вариант 2: проверка формы по скрытому полю

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

Этот способ хорош, но есть маленький недостаток. Бывает формы не создают с нуля, а дублируют уже созданные, а потом редактируют. Есть шанс, что скрытое поле забудут удалить и описанная нами логика проверок может помешать корректной работе продублированной формы. Впрочем, вероятность такого события очень мала и описанный способ подойдёт в 99% случаев.

Вариант 3: проверка формы по переданному в шорткод CSS классу

Этот способ решает недостаток способа описанного выше.

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

Вариант 4: проверка формы по переданному в шорткод своему атрибуту

К коду из прошлого примера теперь нужно дописать поддержку собственного атрибута в шорткоде формы.

Теперь, в отличие от предыдущих способов, мы уберегли себя от случайного дублирования скрытого поля или использования атрибута html_class не по назначению.

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

Напоследок стоит упомянуть, что передавать значение в атрибут необязательно и можно упростить шорткод:

можно вполне сделать так:

или для понятности так:

Теперь, форма остаётся без изменений, а вот код немного изменится:

Какой из способов вам больше всего понравился? А может вы используете уже готовые решения в виде плагина? Поделитесь своим мнением в комментариях!

Источник

Как правильно написать адрес электронной почты (e-mail) ✔, чтобы вам могли на нее отправить письмо.

Доброго дня!

«Почему не отвечаешь?», «Мне ничего не приходило на почту!», «Вы мне не можете скинуть письмо с документами?!» — это всё вопросы и претензии, которые я неоднократно получал как на рабочем месте, так и на этом блоге. 👀

Самое интересное во всем этом — что в этих случаях в принципе нельзя было ответить и отправить e-mail, так как адрес был неправильно написан. И человеку на том конце провода никогда ничего не докажешь.

Собственно, после очередного такого «случая» решил набросать небольшой ликбез по этой теме (теперь будет куда поставить ссылку в случае очередной подобной претензии. 👌).

Как создать электронную почту: e-mail (на портале mail.ru). Настройка почты — [см. пошаговую инструкцию]

Правильное написание e-mail адреса

ШАГ 1: основы

К тому же, написание e-mail должно быть выполнено латинскими буквами (прим.: допускаются цифры, подчеркивания)!

То, что я перечислил выше — это не чье-то требование, а международный формат. Соблюдая его, вам всегда смогут ответить и переслать письмо.

См. в качестве примера скриншот ниже. 👇

Пример e-mail адреса

Пару примеров правильного написания e-mail адресов:

Разберу каждую часть адреса подробнее:

Важно!

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

Вставка e-mail в форму

ШАГ 2: как завести себе почтовый ящик

Завести почту сегодня можно практически на любом крупном портале (👉 лучшие сервисы электро-почт).

Например, весьма неплохим выбором может стать 👉 почта от Яндекса.

Чтобы завести ящик, нужно-то:

Завести почту на Яндекс

ШАГ 3: как отправить кому-нибудь письмо на e-mail

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

После того, как вы заведете себе ящик и войдете в него, пред вами предстанет достаточно простое меню. Для создания письма — достаточно кликнуть по кнопке «Написать» в верхнем углу.

Прикрепление к письму документов

ШАГ 4: как сделать свой номер мобильного адресом почты

Весьма хорошим способом перестать путаться с написанием e-mail может стать одна функция Яндекс-почты — можно свой номер мобильного использовать в качестве адреса электро-почты!

Чтобы включить данную опцию, после регистрации в почте от Яндекса, зайдите в настройки личных данных и используйте функцию «Сделать адресом номер телефона» (см. скрин ниже, стрелками показано, куда нужно нажать). 👇

Сделать адресом номер телефона

После этого, вы сможете получать электронную почту как по адресу 79271234567@yandex.ru *, так и по своему прежнему (т.е., по сути, у вас будет 2 адреса e-mail, письма с которых будут поступать в один ящик!).

На сим сегодня всё. Дополнения приветствуются.

Источник

Подтверждение E-mail

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

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

Шаг 1

Если адресов электронной почты ранее не добавлялось, то окно подтверждения выглядит так:

Шаг 2

После нажмите «Добавить».

Шаг 3

На указанный почтовый ящик придет письмо, содержащее код подтверждения и ссылку для подтверждения адреса.

Существует 2 способа подтвердить адрес почты:

Способ 1. Подтверждение адреса посредством ввода кода

Вам необходимо нажать на ссылку “Подтвердить” рядом с только что добавленным адресом в списке.

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

После ввода необходимо нажать кнопку “Подтвердить”

Способ 2. Подтверждение адреса посредством ссылки

Просто перейдите по ссылке из письма.

При активации ссылки, система сообщит об успешном подтверждении адреса.

После подтверждения адреса посредством ссылки необходимо нажать в списке адресов на ссылку «Подтвердить».

И далее в форме нажать кнопку “Готово”.

Готово!

В случае если код введен верно, либо подтверждение по ссылке прошло успешно, адрес будет считаться подтвержденным и станет доступен доступен для выбора в качестве контактных данных.

Подтвержденный адрес отображается в списке адресов следующим образом:

Повторная отправка

В случае если при подтверждении посредством ссылки возникли ошибки, система известит Вас об этом сообщением:

В случае если письмо на ящик не пришло, либо возникла ошибка подтверждения посредством ссылки необходимо проверить правильность введенного адреса. Если адрес введен правильно, то необходимо запросить повторную отправку письма. Для этого воспользуйтесь кнопкой “Отправить повторно”.

В случае повторной отправки, система предупредит, что запрашивать повторную отправку возможно не чаще, чем раз в 2 минуты.

Обратите внимание!

Источник