Могу ли я добавлять ссылки в настраиваемые поля?
Добавлять ссылки в настраиваемые поля можно двумя способами. Вы можете создать:
- настраиваемое поле для URL. Это подтверждаемое поле ввода, в котором можно указать адрес сайта.
- текстовое поле и добавить тег
<a>, чтобы привязать к нему ссылку на внешнюю страницу. Это доступно для текстовых полей с возможностью выбора.
После этого можно добавить настраиваемые поля в формы и лендинги.
В этой статье мы расскажем, как добавить ссылку в текстовое поле. Для получения общей информации о создании настраиваемых полей (включая поля с URL) смотрите раздел Как создавать и использовать настраиваемые поля.
Если вам необходимо добавить поля согласия и ссылку на Политику конфиденциальности, смотрите раздел Как создавать и использовать поля согласия?.
Создание поля выбора
1. В учетной записи GetResponse перейдите в Контакты и в верхнем меню выберите Настраиваемые поля.
2. Нажмите кнопку Добавить настраиваемое поле.
3. Введите имя. Например, «pole_vybora_s_url».
4. В поле типа выберите Текст.
5. В поле формата выберите многовариантный выбор.
6. В поле опций введите текст, который будет показываться потенциальным контактам.
Чтобы вставить ссылку, добавьте HTML-тег — <a>. Пример:
Замените ссылку в примере на нужный адрес и измените текст ссылки. Не забудьте добавить https:// и используйте в теге одинарные кавычки (‘ ‘). Документ будет открываться по ссылке в отдельном окне.
7. Нажмите Сохранить.
Созданное настраиваемое поле появится на странице Настраиваемые поля, в разделе Заданный пользователем.
Повторите шаги 2-7, чтобы создать новые поля выбора.
Добавление поля в формы и лендинги
После создания поля выбора вы можете добавить его в формы и лендинги.
Лендинги
Чтобы добавить поле согласия на подписку в конструкторе лендингов, выполните следующее:
1.
Перейдите Лендинги и нажмите Создать лендинг.
2. Выберите шаблон.
3. Во всплывающем окне введите имя и нажмите Использовать. Откроется редактор шаблона.
4. Разместите форму регистрации и нажмите на нее, чтобы включить режим редактирования.
5. Нажмите Поля веб-формы.
6. Выберите нужное настраиваемое поле из списка. Активируйте поле Обязательно.
7. Нажмите ОК, чтобы добавить настраиваемое поле и вернуться в редактор.
Теперь редактирование лендинга можно завершить.
Веб-формы
Чтобы добавить поле согласия на подписку в конструкторе форм, выполните следующее:
- Перейдите Формы и нажмите
- В Конструкторе форм выберите шаблон, который хотите использовать.
- Во вкладке Добавить поле найдите раздел Настраиваемые поля. Перетащите нужное настраиваемое поле в форму.
Вы можете изменить отображение поля с помощью различных опций во вкладках Верстка и Стиль.
Вы можете изменить отображение поля с помощью различных опций во вкладках Верстка и Стиль.HTML-верстка для email-рассылки — Digital Academy
Темы контента и дизайна письма мы обсудили в двух последних статьях, теперь займемся версткой. Получить готовый макет email-рассылки вы можете двумя способами: сайт-конструктор или ручная HTML&CSS-верстка. Первый вариант технически проще, но он проигрывает второму. Потому что количество шаблонов ограничено конструктором, да и приедаются такие однотипные рассылки быстро.
Чтобы контент письма получился интересным, читабельным и функциональным, предлагаем вам ручной способ: язык разметки HTML + язык стилей CSS.
Оглавление
- Что такое HTML и CSS по-русски
- Где писать код
- Формат шаблона HTML-писем
- Создание документа. Хедер
- Тело письма: таблица
- Футер
- Кнопка и ссылки перехода
- Безопасные универсальные шрифты
- Адаптивная верстка, или «Отзывчивый email-дизайн»
- Как проверить верстку
Что такое HTML и CSS по-русски
Если вы не планируете вникать во все тонкости ручной верстки, воспользуйтесь бесплатными сервисами для запуска email-рассылки.
Если хочется попробовать свои силы, двигаемся дальше. Начнем с краткого ликбеза.
В двух словах, HTML — строительный материал для веб-страниц, язык разметки. Он состоит из специальных тегов, которые содержат команды для браузера:
- <title> … </title> — название документа
- <a> … </a> — чтобы вставить ссылку
- <img> … </img> — чтобы вставить картинку
- <head> … </head> — содержит команды, которые объясняют почтовым движкам, как отображать письмо
- <body> … </body> — обозначает видимое содержание страницы
Существует множество других тегов для различных команд. Полный список можно посмотреть здесь.
Обычно теги открываются <> и закрываются </> — это попарные. Если в этой статье вы увидите незакрытые теги, они относятся к одиночным. Например: <img> и <br>.
Теги диктуют команды, на основе которых строится содержимое страниц.
Язык стилей CSS добавляет на страницу эффекты, анимацию и прочую красоту. CSS мы прописываем в HTML-коде через внутренний (inline) стиль или ссылаемся на сторонние классы стилей.
1 — задаем CSS через внутренний стиль; 2 — через сторонние классы стилей
Также теги HTML могут ссылаться на контейнер с CSS, который находится на другом сайте. Но если вы затеваете масштабную и длительную работу с ручной версткой, лучше загрузить все необходимое на свой сервер.
Чтобы сверстать рассылку, мало знать базовые правила HTML и CSS. Вы можете создать идеальное письмо и отправить его покорять интернет, но почтовым графическим движкам не понравится, как вписаны атрибуты, и все «полетит». Чтобы рассылочное письмо максимально точно передало ваши мысли и дизайн, рассмотрим базовые правила верстки HTML-рассылки и сложные, но важные нюансы, которые нужно обязательно учитывать.
Где писать код
Профессионалы используют такие редакторы, как Sublime — он удобный и подходит даже для сложной работы.
Единственный минус — у сервиса нет живой выгрузки. То есть посмотреть, что получилось, у вас не получится.
Sublime открывает файлы, позволяет вносить однотипные изменения сразу в несколько строк, автоматизировать работу индивидуальными настройками для каждого проекта и многое другое
Вы можете написать код даже в «Блокноте», но мы все-таки советуем использовать визуальные HTML-редакторы для проверки: CodePen, HTML-online и другие. Они не подойдут для полноценной верстки письма, но помогут проверить результат.
Еще один вариант: использовать редактор, в котором можно одновременно писать код и проверять его отображение — например, Brackets.
Формат шаблона HTML-писем
Ручная верстка радует нас многообразием блоков, дизайнов, вставок, но даже такое email-письмо предусматривает шаблон:
- Хедер. Шапка письма, которая обычно содержит логотип, навигационные ссылки. На языке HTML это все, что находится между тегами <head> и </head>.
- Тело. Текст, картинки, ссылки, анимация. Контент ограничивается тегом <body>.
- Футер. Подвал письма. Обычно здесь находятся кнопки перехода на соцсети, ссылки на обратную связь и отписку от рассылки. Иногда футер сливается с телом письма и не выделяется.
Давайте попробуем сверстать «скелет» рассылки, просто выполняя следующие правила. Мы хотим дать вам не только рекомендации по верстке, но и показать, как это работает.
Создание документа. Хедер
Начинаем писать код для email-письма. Здесь и далее пользуемся визуальным редактором HTML-Online:
XHTML-документ, с которого начинается верстка
Обращаем ваше внимание, что письмо открывает не хедер (). Перед ним надо прописать:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> — если простыми словами, то это переводчик или режим отображения контента.
Он объясняет почтовому клиенту, как правильно читать письмо: какие будут теги и наборы правил HTML, CSS. Доктайпы бывают разные — для разных HTML и режимов.
В примере письма мы используем DOCTYPE HTML 4.01 Transitional, который поддерживает все актуальные элементы и атрибуты документов в HTML 4.01. Его еще называют переходным синтаксисом XHTML. Подробнее о вариантах отображения можно прочитать на Хабре, в статье, посвященной тегу.
<meta http-equiv=»Content-Type» /> — подсказывает почтовому клиенту, как отображать текст и специальные символы.
<meta content=»text/html; charset=utf-8″ > — уточняет, что текст нужно читать через HTML.
Тело письма: таблица
Оптимальные версии для верстки писем — HTML 4 и CSS 2. Почтовые клиенты и браузеры не поддерживают некоторые теги следующих версий. Поэтому после того, как мы закрываем тег <head>, открываем теги <body> и <table>
С точки зрения верстки наша рассылка будет выглядеть как таблица в таблице.
- Чтобы предупредить появление пустого пространства в шаблоне, значения margin и padding ставим нулевыми.
- Поскольку главная таблица — каркас всего письма, ее ширина должна быть 100%. Ширина письма фиксированная, 600 или 660 px.
- Чтобы убрать ненужные отступы от границ ячейки таблицы, cellpadding и cellspacing также приравниваем к нулю.
- Для вложенной таблицы используем атрибут <border-collapse> со значением «collapse». Так почтовый движок будет знать, как правильно отображать границы вокруг табличных ячеек.
Фоновый цвет ячейки задаем через тег <bgcolor>. Значения цветов для писем обязательно нужно прописывать форматом HEX (#6 символов кода). Например, <td bgcolor=»#808080″> — ячейка окрасится в серый цвет. Если вы используете другие обозначения — например #FFF для белого вместо #FFFFFF, — в письме цвет не отобразится.
Изображение вставляем прямо в ячейку, предварительно расставляем отступы от картинки до внутренних границ ячейки через свойство <padding>.
Вот как это выглядит на практике:
«Скелет» письма с хедером
Футер
Сделаем простой футер: контакты и ссылка отписки. Поскольку это два разных элемента, поделим строку «Or die» на две таблицы. Перед ними прописываем padding. Содержимое ячеек выравниваем на свое усмотрение атрибутом align.
Вот как изменилась строка «Or die», которую мы превратили в футер:
Чтобы сделать футер кликабельным, используем тег <a>
Кнопка и ссылки перехода
Чтобы добавить в рассылку кнопку, берем подходящую картинку, вставляем ее в ячейку (тег <img> с атрибутом src=%источник, откуда берем картинку%) и добавляем ссылку перехода (на целевую страницу, в приложение).
Применим этот вариант для нашего «скелета»:
Не забываем прописывать alt и для кнопки
Безопасные универсальные шрифты
Конечно, наш скелет не подходит для отправки подписчикам. Как минимум, мы использовали скучные шрифты, которые напоминают пользователям о школьных рефератах в стиле Microsoft Office Word.
Чтобы выделиться среди конкурентов, одного только качественного контента недостаточно. Учитывая, как за его внимание борются даже в почтовом ящике, клиенту мало просто хорошего предложения. Клиент хочет, чтобы предложение было просто и приятно читать. Выбор шрифта отыгрывает здесь не последнюю роль.
Поскольку не все шрифты универсально отображаются в почтовых службах и браузерах, используйте что-то из безопасных. Можете выбрать для себя 2–3 ходовых шрифта и ставить их во всех рассылках — пусть читатели привыкают к вашему стилю.
Безопасные шрифты
Подробнее тему шрифтов мы разобрали в статье о дизайне email-рассылки.
Адаптивная верстка, или «Отзывчивый email-дизайн»
По данным ТАСС, в 2019 году мобильный трафик в России вырос в 1,5 раза — до 3,3 млрд гигабайт. С мобильным трафиком растет и количество пользователей, проверяющих почту со смартфонов и планшетов. Сверстав рассылку руками, вы должны позаботиться и об адаптивной верстке. Иначе ваше письмо может выглядеть как-то так:
Текст письма подстроился под новую ширину экрана с неравномерными промежутками между словами. Это выглядит рвано и неаккуратно — такое письмо скорее оттолкнет читателя
Непроработанные интервалы между блоками письма привели к слипанию контента
При верстке не учли адаптацию под смартфон, из-за чего хедер со всем контентом уехали вниз
Понятие «отзывчивого дизайна» появилось в 2010 году. Смысл в том, что вне зависимости от формы дисплея устройства один и тот же контент смотрится по-человечески, читабельно. Хотя за последние 9 лет появилось много стратегий по адаптационной верстке, HTML-рассылок это не касается.
Почтовые клиенты и сайты отображают не все способы адаптивной верстки. А из тех, что работают неплохо, выделим две: медиа-запросы и Mobile First.
Медиа-запросы. Чтобы потенциальный клиент мог прочитать письмо с любого девайса, попробуйте прописать медиа-запросы. Это команды, которые приспосабливают макет HTML-письма к экранам разного формата. Минус медиа-запросов — их поддерживают не все почтовые клиенты и сайты. Подробнее об этом способе адаптации писем рассказали на Хабре.
Mobile First. Иногда компьютерная страница содержит столько всего, что адаптировать это на мобильную версию нереально или очень сложно. Стратегия Mobile First предлагает не переводить ПК-версию на мобильную. Философия метода строится на том, что сначала мы прорабатываем мобильный интерфейс, а потом уже версию для ПК. Эта стратегия не бюджетная, обычно она вписывается в долгосрочную маркетинговую стратегию.
Топ-20 курсов по вёрстке сайта: где учиться на верстальщика HTML и CSS
Выбрать курс
20 курсов
Как проверить верстку
Итак, письмо готово.
Но прежде чем отправить его покорять интернет, проконтролируем, как отображается верстка. Нам нужно проверить, как будет выглядеть рассылка на смартфонах, ноутбуках, компьютерах в зависимости от операционной системы мобильных устройств и почтовиков. Специально для этого есть сайты litmus.com и emailonacid.com. Минусы данных сервисов в том, что они зарубежные (Mail.ru и почты Яндекса нет в базе) и платные — можно тестировать бесплатно до 7 дней.
Так письмо будет выглядеть на iPad Air с системой iOS 11:
Всего у сервиса Email on Acid проверка отображения письма для 90 устройств, почтовых сервисов и операционок
Альтернативное решение — проверить верстку на практике: отправить пробное письмо себе, коллегам, друзьям. Посмотрите на письмо глазами адресатов и доведите верстку до финальной версии.
Успешных писем!
Где учиться email-маркетингу: лучшие курсы по запуску email-рассылок
Выбрать курс
11 курсов
Добавить ссылку на обратный адрес электронной почты (mailto:) в сообщении
Outlook для Microsoft 365 Outlook 2021 Outlook 2019 Outlook 2016 Outlook 2013 Outlook 2010 Outlook 2007 Дополнительно.
Вы можете включить обратную ссылку электронной почты в тело сообщений электронной почты. При нажатии на ссылку открывается пустое сообщение, уже адресованное человеку, компании или любому месту назначения по вашему выбору. Например, такая ссылка, как mailto: [email protected], уже адресована представителю отдела обслуживания клиентов вашей компании.
Как видите, вы можете отформатировать текст ссылки (слова, которые люди видят и на которые нажимают), чтобы сказать все, что вы хотите.
В сообщении выберите текст или изображение, которое вы хотите отобразить в качестве ссылки.
На вкладке Вставка нажмите Ссылка или Гиперссылка .
В разделе Ссылка на щелкните Адрес электронной почты .
Либо введите нужный адрес электронной почты в поле Адрес электронной почты , либо выберите адрес электронной почты в списке Недавно использованные адреса электронной почты .
Если вы хотите изменить текст ссылки, в Текст для отображения поле, введите текст.
Чтобы настроить всплывающую подсказку, которая появляется при наведении указателя на ссылку, щелкните Экранная подсказка и введите нужный текст.
Если вы не укажете подсказку, Outlook использует в качестве подсказки «mailto», за которым следует адрес электронной почты и строка темы.Щелкните OK .
Если вы не укажете подсказку, Outlook использует в качестве подсказки «mailto», за которым следует адрес электронной почты и строка темы.Совет: Вы также можете создать простую обратную ссылку по электронной почте, введя адрес в сообщении и нажав клавишу ВВОД или ПРОБЕЛ, если вы не отключили автоматическое форматирование гиперссылок.
Если вы хотите автоматически включать обратную ссылку электронной почты во все исходящие сообщения, добавьте ее в подпись Outlook. Подпись может состоять только из ссылки или любой другой дополнительной информации по вашему выбору. Дополнительные сведения см. в разделе Создание и добавление подписи к сообщениям.
Верх страницы
Anleitung und Bedeutung der HTML-Links
Robert Schanze,
3 мин. LesezeitCommentare1Der Begriff «mailto» ist ein HTML-Befehl, um einen E-Mail-Verweis in ein Document oder eine Webseite einzubauen. Aber wie genau erstelle ich einen solchen E-Mail-Link? Und wie können Betreff, Kopie (CC) und Blindkopie (BCC) hinzugefügt werden?
Die Auszeichnungssprache HTML определен, как Browser eine Internetseite verarbeiten und darstellen. Grundgerüst dafür sind sogenannte Теги. Das sind Befehle, die in eckigen Klammern gesetzt werden. Der Mailto-Tag ist dann bedeutsam, wenn ihr beispielsweise ein Kontaktformular in HTML erstellen oder euren Besuchern die Option geben wollt, euch einfach per Mausklick eine E-Mail zu schreiben. Wie ihr den Mailto-Tag erstellt und welche Optionen ihr einfügen könnt, zeigen wir euch im Folgenden.
Mailto-Link erstellen: Codiert ihr den E-Mail-Verweis im Quelltext
So get ihr den E-Mail-Verweis als Mailto-Link in das HTML-Gerüst eurer Webseite ein:
| Mailto-Befehl | |
| Eine E-Mail an einen Empfänger | |
| Eine E-Mail mehrere Empfänger | |
| Электронная почта с определением Betreff | Электронная почта mit Betreff "Das ist ein Betreff" |
| E-Mail mit sichtbarer Копия (CC) | Электронная почта с копией |
| E-Mail mit Blindkopie (BCC) | E-Mail mit Blindkopie |
de">Отправить электронную почту Vor dem jeweiligen „“ könnt ihr beliebigen Text wählen. Dort braucht nicht «Sende eine E-Mail» или «Contakt zu uns» stehen. Gebt einfach den Text ein, der für eure Webseite passt, denn dieser Teil ist für eure Besucher als Textlink sichtbar.
Der Mailto-Link Lässt sich auch als Hyperlink über das Menu eures Editors einfügen:
- Markiert dazu einfach den Text oder das Bild, von dem aus das E-Mail-Programm des Nutzers geöffnet werden soll, wenn er darauf klickt .
- Нажмите на « Einfügen », wählt « Link » aus und gebt
mailto:[email protected]ein.
Seid ihr euch unsicher, könnt ihr einfach wichtige HTML-теги nachschlagen. Ihr findet die Codes übersichtlich im SelfHTML Handbuch und to dort zum Beispiel auch, wie ihr fett, kursiv und Blocksatz schreiben auf der Webseite darstellen könnt.
Einen kurzen Einblick for Anfänger in die Welt des HTML5 beetet euch der praktische Ratgeber HTML5 Schnelleinstieg для чайников:
HTML5 Schnelleinstieg для чайников: Jetzt aber flott — der kompakte Einstieg in HTML5
Preis kann jetzt höher sein. Preis vom 27.06.2023 14:03 Uhr
Mailto-Generator nutzen
Ist es euch zu kompliziert den Mailto-Link manuell einzufügen, nutzt einfach einen kostenlosen externen Mailto-Link Generator 9 0077 ви:
- MailtoLink. me
- mailtolinkgenerator.com
meLesetipp
Marco Kratzenberg
Mailto: Die Vorteile des HTML-Befehls
Egal, ob ihr den HTML-Befehl im classischen HTML-Modus, eurer Веб-сайт в WordPress (базовый на HTML) в Textmodus и inebt: Durch die Mailto- Anweisung gibt es zwei Vorteile :
- Webseiten-Besucher haben den Vorteil, дополнительный адрес электронной почты не указан в программе электронной почты einfügen zu müssen. Das Fenster zum Versenden einer neuen E-Mail wird autotisch geöffneten und der von euch bestimmte Empfänger eingetragen.
- Der Webseiten-Betreiber hat den Vorteil, dass seine E-Mail-Adresse nicht direkt auf der Internetseite zu lesen ist, wenn ihr diesen nicht ausschreibt.
Он не содержит такой информации, поэтому он содержит Mailto-Link для использования HTML-кода. Hat es bei euch funktioniert oder habt ihr noch Fragen, wie ihr den Code als praktischen Link in euren Text or Kontaktformular einfügt?
Du willst keine News rund um Technik, Games und Popkultur mehr verpassen?
Есть ли актуальные тесты и руководства? Dann folge uns auf
Фейсбук
или Твиттер.
