Хотите знать – как добавить страницу контактов в Blogger? Она будет выглядеть примерно так, как на этом сайте, когда нажмете в меню "Contact Us"
Это очень просто, и никаких технических знаний не требуется. Просто следуйте инструкциям ниже.
1. Перейдите на панель управления Blogger > выберите свой блог > Дизайн.
2. Добавьте контактную форму с именем "Contact Us" на боковую панель блога.
3. Проверьте ее появление на боковой панели блога.
Предупреждение. Чтобы эта контактная форма работала на странице «Contact Us» в Blogger, необходимо добавить контактную форму в свой блог. Если вы не добавите контактную форму и не поставите галочку «показать контактную форму», то контактная форма работать не будет.
4. Скройте контактную форму с боковой панели блога
Мы скроем контактную форму для Blogger, используя код CSS. Вам нужно выполнить шаги, чтобы скрыть гаджет контактной формы с боковой панели блога.
а. Перейдите в «Темы»> нажмите на три вертикальные точки> «Редактировать HTML».
б. Найдите следующий код- ]]></b:skin>
Ниже описано, как выполнять поиск с помощью Blogger HTML.
в. Вставьте следующий код CSS прямо над ним.
div#ContactForm1{display: none !important;}
Обратите внимание на цифру 1 для ContactForm.
Посмотрите на скриншот, как это реализовать.
г. Теперь щелкните значок дискеты, чтобы сохранить изменения.
После выполнения всех шагов, указанных в пункте номер три. Ваша контактная форма будет присутствовать на боковой панели, но не будет видна посетителю блога. Проверьте ее исчезновение. Если не исчезла, измените в ContactForm1 цифру 1 на цифру 2, получится так:
div#ContactForm1{display: none !important;}
и снова проверьте исчезновение формы из боковой панели. Точную цифру можно узнать, нажав F12 в браузере, наведя указатель на форму и посмотреть код.
5. Затем перейдите в раздел «Страницы».
6. Щелкните оранжевый значок ⊕, чтобы создать новую страницу. (не пост)
7. Вставьте следующий HTML-код (шаблон страницы «Свяжитесь с нами») и опубликуйте страницу. Это стильная контактная форма для Blogger.
<div class="widget-content contact-form-widget">
<div class="form">
<form name="contact-form">
<input ariby="Name" class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Ваше имя*"size="30" type="text" value="" />
<input ariby="Email *" class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Ваш e-mail *" size="30" type="text" value="" />
<textarea ariby="Message *" class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Ваше сообщение *" rows="5"></textarea>
<input class="contact-form-button btn contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</form>
</div>
</div>
Посмотрите на следующий
снимок экрана, это выглядит так:
8. Откройте страницу в веб-браузере и проверьте, правильно ли работает страница и могут ли пользователи отправлять вам сообщения.
Перейдите в раздел «Страницы» и нажмите на значок глаза, чтобы просмотреть страницу контактов.
Обратите внимание на идентификатор id="ContactForm1.... - он должен быть индивидуальный для всего кода и не повторяться.
Осталось проверить работу контактной формы и получить результат.
