Урок 15. Форма обратной связи

В этом уроке я покажу как вставить форму обратной связи, например, вот такую:

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

1. Сначала установим гаджет "Форма для связи"

2. Создаем страницу "Контакты"

Панель управления - Страницы - Создать страницу. Переключаемся в режим HTML и вставляем этот код:

<form name="contact-form"><p></p>Имя<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><p></p>Адрес e-mail <span style="color: red; font-weight: bolder;">*</span><p></p><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><p></p>Сообщение<span style="color: red; font-weight: bolder;">*</span><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><p></p><input id="ContactForm1_contact-form-submit" type="button" value="Отправить" /><div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><style type="text/css">/* Menyembunyikan elemen dalam postingan */#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style>

После того, как переключитесь обратно в режим Создать должно быть что-то типа этого:

Нажимаем Публикация.
Далее открываем Настройку списка страниц и ставим галочку перед "Контакты"

3. Переходим в Шаблон - Изменить HTML. С помощью горячих клавиш Ctrl+F находим тег ]]></b:skin>, перед ним вставляем этот код:

/* CSS Contact Form */#ContactForm1{display:none;}#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 300px;height:auto;margin: 5px auto;padding: 10px;background: #f2f2f2;border: 1px solid #ccc;color:#777;}#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;}#ContactForm1_contact-form-email-message{width: 450px;height: 175px;margin: 5px auto;padding: 10px;background: #f2f2f2;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;}#ContactForm1_contact-form-submit {width: 101px;height: 35px;float: left;color: #FFF;padding: 0;margin: 10px 0 3px 0 0;cursor: pointer;background: #5E768D;border: 1px solid #556f8c;border-radius:3px;}#ContactForm1_contact-form-submit:hover {background:#435c74;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 450px;margin-top:35px;}

 Нажимаем Сохранить шаблон.