Притурката "Контактна форма" на статична страница

Здравейте всички! Днешната тема ще бъде как да се инсталирате притурката "Контактна форма" на статична страница на вашия блог. Скъпи приятели, в предишна статия, аз говорих за това как да инсталирате стандартната притурка "Контактна форма" на Blogger. За връзка с автора на блога притурката е много полезна, защото тя позволява да се организира обратна връзка с читателите и посетителите му. И за да се отговори на въпросите им, не само в коментарите.
Въпреки това, поставяне на формата за контакт в страничната колона не е най-доброто място според мен. Бих предпочела да сложа формата за контакт на статична страница. Това е, което имаме да направим днес.

Вижте как ще изглежда тази форма на тестовия блог

Как да инсталирате притурката "Контактна форма" на статична страница на вашия блог на Blogger
Преди всичко, това което трябва да направите е да добавите стандартната притурка "Контактна форма" на страничната лента или в долния колонтитул на блога си. За това говорихме в предишна публикация на тази тема. След това създайте нова статична страница с наименование Contacts или нещо друго със същия смисъл. В HTML режим въведете в нея следния код:

<form name="contact-form">

<p>

</p>

Име

<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<p>

</p>

Адрес Email <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>

Освен това, от дясната страна на менюто "Опции" изберете "Използвайте клавиша Enter, за пренасяне на редовете". Натиснете публикуване.
Нататък. Трябва да добавите кода за CSS стилове на формата, като в същото време така ще се скрие притурката от страничната колона на блога. В шаблона намерете реда  ]]></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;

}

Това е. В следваща публикация ще покажа още притурки-контактни форми с друг дизайн и в различна цветова гама.
Доскоро и успех!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: