Как установить контактную форму на сайт getsimple


 

           На любом сайт-визитке должна быть форма обратной связи, для этого скачиваем модуль обратной связи.

Распоковываем модуль в папку plugins. Заходим в плагины и включаем его.

Создаем страницу "Контакты" , и вставляем на страницк код :

(% contact %)

Заходим в настройки плагина

 

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

select "выберите тип сайт?" = "Интернет-магазин" selected | "Сайт-визитка" | "Корпоративный сайт" | "Промо сайт" | "Каталог товаров",,captcha!

Сохраняем настройки и смотрим страницу. Как видим наши поля для ввода данных имеют грубый вид.

Округляем слегка поля и задаем им более привлекательный стиль. Для этого заходим в файл стиля вашей темы css и дописываем вот этот код:

/* СТИЛИ ДЛЯ КОНТАКТНОЙ ФОРМЫ */
.p01-contact {position:relative;width: 500px;padding: 20px;color:inherit;margin-left:-5px;background: white;margin-bottom:20px;overflow:hidden;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;behavior: url(/PIE.htc);}
.p01-contact .field{margin-bottom:10px}
.p01-contact .field.captcha{float:left}
.p01-contact .captcha input{width:160px;color:inherit !important;background-color:#FFF;}
/* INPUT FIELDS */
.p01-contact .text input{width:400px;}
.p01-contact textarea{width:400px; height:100px}
.p01-contact .text input,
.p01-contact .captcha input,
.p01-contact textarea {background-color:#FFF;border:1px solid #DDD;font-size:12px;color:inherit !important;padding:5px;-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px; behavior: url(/PIE.htc);} 
.p01-contact .text input {color:inherit;}
/* End of INPUT-FIELDS */
.p01-contact .submit{position:absolute;bottom:20px;right:20px;-moz-border-radius:10.2em 10.2em 10.2em 10.2em;-moz-box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.5);background-color:#666;    border-bottom:0.2em solid #666666;color:#FFF;cursor:pointer;font-size:1em;line-height:1;padding:0.3em 0.6em;text-shadow:0 0 0.1em #666;}

Смотрим результат:

 

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


Интересные статьи

  • Психология выбора цвета при создании сайта.
  • Какой должен быть интернет-магазин или что раздражает посетителей.
  • Интернет-магазин глазами покупателя
  • Повышение пребывания в интернет-магазине и что такое липкий сайт.
  • Почему нужен сайт?

  •