Как добавить контактную форму (страницу «Свяжитесь с нами») в Blogger?

Опубликовано: 2020-11-10

Добавление формы обратной связи в Blogger - утомительная задача, поскольку она не поддерживает такие плагины, как WordPress.

Большинство блоггеров Blogspot обращаются за помощью к сторонним сайтам (foxyform, jotform, 123contactform и т. Д.).

Страница контактной формы Blogger Сегодня вы узнаете, как добавить официальную страницу контактов в Blogger.

Как я уже сказал ранее, можно получить сторонние коды для вставки на новые страницы, например, на прогулке в парке. Тем не менее, официальная форма для связи намного лучше этих.

Преимущества официальной формы Blogger

Вы получите сообщение, как только его отправите. И доставляемость тоже 100%.
Простой интерфейс позволяет посетителям с легкостью связаться с вами.
Если вы знаете язык Cascade Style Sheet (CSS), вам будет легко настроить форму по своему вкусу.
Вся страница не будет перезагружена для отправки сообщения.

Я разделил это руководство на три раздела: добавление гаджета контактов, его скрытие и внедрение официального кода на новой странице.

Часть 1. Добавление гаджета контактов

Следуйте приведенным ниже инструкциям, чтобы добавить гаджет "Связаться с нами" в свой блог.

Шаг 1. Посетите blogger.com и войдите в свою учетную запись. Если вы ведете несколько блогов, вам нужно выбрать нужный блог из списка.

Шаг 2 : Нажмите «Макет» на левой боковой панели, чтобы получить возможность добавлять гаджеты.

Шаг 3. Вы можете увидеть ссылку « Добавить гаджет» на главной панели справа. Нажав на нее, вы попадете в список гаджетов.

Шаг 4. Затем выберите « Другие гаджеты» слева. Теперь вы увидите контактную форму . Просто добавьте то же самое.

Часть 2: Скрытие гаджета

Теперь вы узнаете, как скрыть гаджет контактов.

Шаг 1 : Нам нужно поиграть с разделом шаблонов здесь. Итак, нажмите «Шаблоны» в левом меню.

Шаг 2 : Затем нажмите « Редактировать HTML», и вам будет предоставлен весь код вашего блога в большом поле.

Шаг 3. Найдите ]]> </ b: skin> и поместите следующий код непосредственно перед ним.

div # ContactForm1 {
дисплей: нет! важно;
}

Затем нажмите «Сохранить», чтобы сохранить изменения.

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

Часть - 3: Добавление контактной формы на страницу

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

Шаг 1 : Перейдите в Pages и нажмите New page.

Шаг 2. Вставьте следующий код в редактор сообщений HTML после удаления всего содержимого.

<div id = ”custom_ContactForm1 ″ class =” widget ContactForm ”>
<div class = ”contact-form-widget”>
<p> Свяжитесь с нами, заполнив форму ниже. </p>
<div class = ”form”>
<form name = ”contact-form”>
<p> </p>
название
<br>
<input type = "text" value = "" size = "30 ″ name =" name "id =" ContactForm1_contact-form-name "class =" contact-form-name ">
<p> </p>
Электронное письмо
<span style = ”font-weight: bolder;”> * </span>
<br>
<input type = "text" value = "" size = "30 ″ name =" email "id =" ContactForm1_contact-form-email "class =" contact-form-email ">
<p> </p>
Сообщение
<span style = ”font-weight: bolder;”> * </span>
<br>
<textarea rows = ”5 ″ name =” email-message ”id =” ContactForm1_contact-form-email-message ”cols =” 25 ″ class = ”contact-form-email-message”> </textarea>
<p> </p>
<input type = "button" value = "Send" id = "ContactForm1_contact-form-submit" class = "contact-form-button contact-form-button-submit">
<p> </p>
<div style = ”выравнивание текста: центр; максимальная ширина: 222 пикселей; ширина: 100% ”>
<p id = ”ContactForm1_contact-form-error-message” class = ”contact-form-error-message”> </p>
<p id = ”ContactForm1_contact-form-success-message” class = ”contact-form-success-message”> </p>
</div>
</form>
</div>
</div>
<div class = ”clear”> </div>
<span class = ”widget-item-control”>
<span class = ”item-control blog-admin”>
<a title = ”Edit” target = ”configContactForm1 ″ onclick =” return _WidgetManager._PopupConfig (document.getElementById («ContactForm1 ″));» href = ”// www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =” quickedit ”>
<img width = ”18 ″ height =” 18 ″ src = ”// img1.blogblog.com/img/icon18_wrench_allbkg.png” alt = ””>
</a>
</span>
</span>
<div class = ”clear”> </div>
</div>

Шаг 3: Добавьте заголовок (например, «Свяжитесь с нами»), а затем измените настройки, указанные ниже.

Шаг 4: Наконец, нажмите кнопку «Опубликовать». Вот и все.

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

➜ Другие полезные руководства по Blogspot:

Как добавить собственный файл Robots.txt в Blogger?
Как отправить карту сайта Blogger в консоль поиска Google?

Заключение

Надеюсь, теперь вы знаете, как добавить страницу контактов в Blogger. Если вы обнаружите какие-либо трудности, например, нулевую доставляемость, даже после сообщения об успехе, я рекомендую переустановить виджет «Контакты».

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

Не забудьте поделиться этим постом со своими друзьями-блогерами.