Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 31
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

form_shipВітаю всіх вас з Новим Роком та Різдвом Христовим, в сьогоднішній публікації до вашої уваги красива форма зворотнього звязку, форма яка складається тільки з стилів CSS.

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

Хоча на Zura — Blog, по контактній  формі як мені не змінює память, викладено три або чотири публікації, можливо навіть і більше, якщо ще враховувати піблікації які стосуються форми зворотього  звязку, яку застосовують для csm WordPress.

Отож, в цій публікації буде говоритись, про ще одну форму зворотнього звязку, на вигляд така сторінка з формою зворотнього звязку, як на мою думку, просто сама по собі краща по рівняно з попередніми, сам вигляд сторінки — це (конверт з кольоровими стрічками по краях), як для мене виглядає красиво, і створений такий “конверт” тільки за рахунок стилей CSS.

В принципі, стосовно попередніх форм зворотнього звязку, то вони на вигляд були простеньки, оскільки  створені тоді були тільки мною, маю на увазі самі рядки кодів писались мною, а це було давніше, приблизно два роки назад, досвіду як такого в мене тоді не було, а вигляд відображався таким чином, це звичайна картинка на яку прописувалось посилання, для того щоб форма відображалась в середині тієї картинки.

А ця вже форма, точніше сам вигляд форми, створений за рахунок стилів CSS, на вигляд це “конверт”, а по краях кольорові стрічки з відтіненням внизу, в принципі, в такий “конверт” можна додавати не тільки форму зворотнього звязку, а також і якусь іншу форму, скажем форму підписки, або реєстраційну.

Звісно, для того щоб додавати в цей шаблон інші види форми, потрібний  досвід,  отож  що головне  потрібно  зробити, а саме в цьому шаблоні, щоб відображалась ваша форма, потрібно, щоб саме блок “div”, повинен  мати  назву “form-wrapper”,  для того щоб поля для відправки відображались в середині “конверта”.

Далі прописуєте код – обробник, він потрібний для обробки і відправки даних, всі  коди, як і код обробника на мові програмування РНР, так і код стилей CSS,  всі  ці коди  можна розмістити на одній сторінці.

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

Отож, мета цієї публікації, це описати і показати на прикладі, як можна використати подібний шаблон форми, не має значення чи форми звязку, чи реєстраційної, для своїх потреб. Похожих шаблонів  як цей “конверт”, написаних тільки на стилях  CSS,  в мережі можна знайти безліч.

І саме один з таких елементів, ви зможите застосовувати для своїх цілей, поєднюючи код даного елементу з стилями  CSS, з кодом обробником написаного мовою програмування РНР, і в кінцевому підсумку зієднавши рядки кодів, самому зробити повністю робочий елемент, такий як форма зворотнього звязку, або реєстраційну форму, і т.д.

Варіантів може бути багато, наприклад у вас є в наявності повністю робоча форма звязку, але на вигляд “така собі, або не дуже то може підходити по кольоровій гаммі вашого сайту.

Які можливі варіанти, звичайно що кольори можна поміняти в кодах, якщо для відображення використовується картинка, то кольори на картинці також підганяються в редакторі.

Але, ось ви мережі знайшли красивий шаблон, на вигляд такий предмет скажем як “конверт” або щось похоже, і на вашу думку було би не пагоно, щоб підігнати під цей вигляд вашу форму відправки.

Яким тоді чином зробити.

Варіант, це звичайно підігнати частинки кодів під цей скажем предмет “Конверт”, або похожий який ви можливо маєте в наявності, або знайшли но одному з ресурсів.

І в кінцевому підсумку отримати прийнятний для вас результат. Ще раз додам, що таких шаблонів в мережі знайдеться безліч, але під них, як за звичай потрібно самому писати скрипт, чи для відправки, чи для реєстрації.

Скрипт можна самому і не писати, тим більше якщо ви не гуру, скажем в мові програмуванні “РНР”, але з похожого чи прийнятного скрипта, чи веб сторінки, можна повитягувати частинки кодів, і підєднавши їх, отрмати то чого ви і хотіли.

Отож, шаблон який я ще скачав два роки назад, тоді зрозуміло що гірше розбирався, не щодавно передивляючись всі папки і файли які в мене знаходяться на жорсткому диску, з метою щоб не потрібні повидаляти, і звільнити місце, якраз і знайшов цей шаблон.

 

На вид “класний”, яким чином з нього зробити повністю робочу форму.  

Отож надалі, до вашої уваги все описую, і можливо додам в якості додатка, ще й відео.

Зрозуміло, що публікація в основному стосується початківців, ну а в кого є досвід, той звичайно переглянувши приклад на картинці, якщо сподобалось, тоді  просто скопіює код, в коді вже сам де що поміняє, підігнавши під свій дизайн, і звичайно що не має сенсу все детально читати, і можливо переглядати ще й відео.    

Отож до вашої уваги, код шаблону форми відправки, той код який я взяв з одного з ресурсів, в принципі як самі бачите вигляд класний, ну і звичайно, щоб була можливість з форми даного шаблону відправити повідомлення, конче потрібний скрипт, який обробляв би і доставляв повідомлення.

Адже він на сторінці був відсутній.

<!DOCTYPE html>
<html>
<head>
<title>HTML5 & CSS3 envelope contact form demo</title>
<style>

html,body
{
    margin: 0;
    padding: 0;
}

body
{
    background: #eee;
    padding: 50px 0 0 0;
}

#form-wrapper
{
    width: 700px;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    border: 1px solid #ddd;

    background-color: #fff;
    background-image: -moz-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

	background-image: -webkit-gradient(linear, left top, right bottom,
										color-stop(5%, #fff), color-stop(5%, #fff),
										color-stop(15%, #844049), color-stop(15%, #fff),
										color-stop(25%, #fff), color-stop(25%, #fff),
										color-stop(35%, #3E4996), color-stop(35%, #fff ),
										color-stop(45%, #fff), color-stop(45%, #fff),
										color-stop(55%, #844049), color-stop(55%, #fff),
										color-stop(65%, #fff), color-stop(65%, #fff),
										color-stop(75%, #3E4996), color-stop(75%, #fff ),
										color-stop(85%, #fff), color-stop(85%, #fff),
										color-stop(95%, #844049), color-stop(95%, #fff)
									   );															

    background-image: -webkit-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);   

    background-image: -o-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px); 

    background-image: -ms-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

    background-image: repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);
}

#form-wrapper:before, #form-wrapper:after
{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#form-wrapper:after
{
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

#form-wrapper form
{
    background: #fff;
    height: 400px;
}

#form-wrapper #form-inner
{
    margin: 0 auto;
    padding: 35px 0;
    width: 545px;
}

#form-wrapper label
{
    font: bold 18px/25px Corbel, Arial, Helvetica;
    text-shadow: 0 1px 0 #fff, 0 2px 0 #ccc;
    float: left;
    margin-right: 10px;
    width: 120px;
}

#form-wrapper .input
{
    font: 15px Arial, Helvetica;
    padding: 5px;
    margin: 0 0 20px 0;
    border: 1px solid #b9bdc1;
    width: 400px;
    color: #797979;

    -moz-box-shadow: 0 2px 4px #bbb inset;
    -webkit-box-shadow: 0 2px 4px #bbb inset;
    box-shadow: 0 2px 4px #bbb inset;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

}

#form-wrapper .input:focus
{
    background-color: #E7E8E7;
    outline: 0;
}

#form-wrapper .textarea
{
    height:150px;
}

#form-wrapper .button
{
    float: right;
    margin: 10px 0 0 0;
    padding: 7px 15px;
    cursor: pointer;
    color: #fff;
    font: bold 13px Tahoma, Verdana, Arial;
    text-transform: uppercase;
    overflow: visible; /* IE6/7 fix */
    border: 0;  

    background-color: #7089b3;
    background-image: -moz-linear-gradient(#a5b8da, #7089b3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
    background-image: -webkit-linear-gradient(#a5b8da, #7089b3);
    background-image: -o-linear-gradient(#a5b8da, #7089b3);
    background-image: -ms-linear-gradient(#a5b8da, #7089b3);
    background-image: linear-gradient(#a5b8da, #7089b3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a5b8da', EndColorStr='#7089b3');     

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    text-shadow: 0 1px 0 rgba(0,0,0,.3);

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
}

#form-wrapper .button:hover
{
    background-color: #a5b8da;
    background-image: -moz-linear-gradient(#7089b3, #a5b8da);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7089b3), to(#a5b8da));
    background-image: -webkit-linear-gradient(#7089b3, #a5b8da);
    background-image: -o-linear-gradient(#7089b3, #a5b8da);
    background-image: -ms-linear-gradient(#7089b3, #a5b8da);
    background-image: linear-gradient(#7089b3, #a5b8da);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7089b3', EndColorStr='#a5b8da');
}

#form-wrapper .button:active
{
    background: #64799e;
    position: relative;
    top: 2px;

    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

</style>
</head>

<body>

<div id="form-wrapper">
    <form>
        <div id="form-inner">
            <label for="name">Ваше імя:</label>
            <input type="text" class="input" id="name" placeholder="Zura-Blog">

            <label for="email"> Ваш Email:</label>
            <input type="email" class="input" id="email" placeholder="stetso9@mail.ru">

            <label for="message">Ваш текст:</label>
            <textarea class="input textarea" id="message" placeholder="Напишіть текст"></textarea>

             <input type="submit" class="button" value="Відправити">
        </div>
    </form>
	</div>

</body>
</html>

form_ship1

Які варіанти можуть бути щоб з цього шаблону зробити повністю робочу “контактну форму” — це написати код – обробник самому, або підігнати під форму інший код обробник, або і саму форму під  цей шаблон.

Я прийнявся за другий варіант, мені він легший, та й своя форма більше подобається.

В любому випадку, спочатку уважно передивляється  код, визначаємо з чого складається сторінка, з яких тегів і атрибутів, отож  тег “<style>”, і все що знаходиться між тегами  “<style></style>”, саме ці рядки кодів  відображають “конверт”.

Наступне це блок “div”, адже в середині блоку знаходиться форма, з полями для заповнення. Як бачимо до блоку “div” приписаний індентифікатор (id=”form-wrapper”), саме цей індентифікатор зєднює форму з стилями CSS. Без індентифікатора форма з полями буде відображатись на сторінці, поза цим конвертом.

Отож, якщо ми хочимо щоб форма з полями для заповнення відображалась в цьому “конверті”, вона повинна входити всередину блоку “div”, з цим індентифікатором “form-wrapper”.

<div id=”form-wrapper”> </div> — всередині цих тегів має знаходитись форма з полями для заповнення, щоб на сторінці відображатись в “конвері”, а не поза ним.

Звичайно, що в цьому коді відображається своя, але нею ми ніякі дані не відправимо, адже відсутній скрипт відправки форми. Я щоб справитись з цим завданням, вирішив використовувати іншу форму, з готовим скриптом – обробником форми.

Скрипт який є в наявності на Zura — Blog, він повністю робочий, взятий з публікації “Створюємо контактну форму на мові програмування PHP”, і саму форму з полями для відправки, а також блок “div” в цьому скрипті, можна застосувати замість попередньої.

<?PHP

function show_form()
{
?>
<form action="" method=post>
<div align="center">
              <br />Ваше імя*<br />
              <input type="text" name="name" size="40">
              <br />Контактний телефон<br />
              <input type="text" name="tel" size="40">
              <br />Ваш email*<br />
              <input type="text" name="email" size="40">
              <br />Teма<br />
              <input type="text" name="title" size="40">
              <br />Повідомлення*<br />
              <textarea rows="10" name="mess" cols="30"></textarea>
              <br /><input type="submit" value="Відіслати" name="submit">
</div>
</form>
* Відмічені поля, які необхідно заповнити
<?
} 

function complete_mail() {
        // $_POST['title'] містить дані з поля "Тема", trim() - забираємо всі лишні пробіли і переноси рядків, htmlspecialchars() - переобразує спеціальні символи в HTML по суті, для того, щоб самі прості спроби взламати сайт не вийшли, ну і  substr($_POST['title'], 0, 1000) - зменшуємо текст до 1000 символів. Для змінних $_POST['mess'], $_POST['name'], $_POST['tel'], $_POST['email'] все аналогічно
        $_POST['title'] =  substr(htmlspecialchars(trim($_POST['title'])), 0, 1000);
        $_POST['mess'] =  substr(htmlspecialchars(trim($_POST['mess'])), 0, 1000000);
        $_POST['name'] =  substr(htmlspecialchars(trim($_POST['name'])), 0, 30);
        $_POST['tel'] =  substr(htmlspecialchars(trim($_POST['tel'])), 0, 30);
        $_POST['email'] =  substr(htmlspecialchars(trim($_POST['email'])), 0, 50);
        // якщо не заповнене поле "Імя" - показуемо помилку 0
        if (empty($_POST['name']))
             output_err(0);
        // якщо не правильно заповнене поле email - показуемо помилку 1
        if(!preg_match("/[0-9a-z_]+@[0-9a-z_^\.]+\.[a-z]{2,3}/i", $_POST['email']))
             output_err(1);
        // якщо не заповнено поле "Повідомлення" - показуемо помилку 2
        if(empty($_POST['mess']))
             output_err(2);
        // створюємо наше повідомлення
        $mess = '
Імя відправника:'.$_POST['name'].'
Контактний телефон:'.$_POST['tel'].'
Контактний email:'.$_POST['email'].'
'.$_POST['mess'];
        // $to - кому відправляємо
        $to = 'test@test.ua';
        // $from - від кого
        $from='test@test.ua';
        mail($to, $_POST['title'], $mess, "From:".$from);
        echo 'Дякую! Ваш лист відісланий.';
} 

function output_err($num)
{
    $err[0] = 'ПОМИЛКА! Не введено імя.';
    $err[1] = 'ПОМИЛКА! Невірно введений e-mail.';
    $err[2] = 'ПОМИЛКА! Не введено повідомлення.';
    echo '<p>'.$err[$num].'</p>';
    show_form();
    exit();
} 

if (!empty($_POST['submit'])) complete_mail();
else show_form();
 ?>

Пробуємо, передивляємось код скрипта, зрозуміло що скрипт РНР, для того щоб працював на тій самій сторінці що і коди стилів CSS, повинен розташовуватись в самому верху, в іншому випадку працювати не буде, або створювати окремий файл для цього скрипта, прописувати посилання, щоб зєднати форму з полями для заповнення з файлом, в якому буде цей скрипт.

Я обрав саме такий варіант, щоб все було на одній сторінці, тому щоб скрипт працював, код обробник на мові РНР, повинен бути вище всіх інших кодів.

Що нам потрібно з цього скрипта, звичайно що форму для заповнення, перенести в блок </div> з індентифікатором  (id=”form-wrapper”) <div id=”form-wrapper”> </div>, щоб поля для заповнення  відображались в “конверті”, потрібно в цьому блоці, додати код рядків цієї форми.

<div id="form-wrapper">
<form action="" method=post>
<div align="center">
              <br />Ваше імя*<br />
              <input type="text" name="name" size="40">
              <br />Контактний телефон<br />
              <input type="text" name="tel" size="40">
              <br />Ваш email*<br />
              <input type="text" name="email" size="40">
              <br />Teма<br />
              <input type="text" name="title" size="40">
              <br />Повідомлення*<br />
              <textarea rows="10" name="mess" cols="30"></textarea>
              <br /><input type="submit" value="Відіслати" name="submit">
</div>
</form>
* Відмічені поля, які необхідно заповнити</div>

Далі зберегти і отримати результат, форма з полями відобразиться в середині, і вона вже повністю робоча, оскільки є можливість відправити повідомлення. І далі вже дрібниці залишаються.

form_ship2

І до фону сторінки додати красиву картинку, тут також варіантів декілька, або прописати лінк, або поміняти тег в стилях CSS, замість  “background” виставити тег “background-image”, який буде вказувати щоб фон сторінки відображався з картинкою.

form_ship3

Отож, нище змінений вже попередній код, змінено деякі числа в стилях CSS, змінений один тег, який буде відображати картинку, ну і власне сама адреса картинки, “background-image:url(images1/nastol.com.ua-1087861.jpg);” — як самі бачите вказано images1 це папка, а “nastol.com.ua-1087861” — файл картинки, в коді всі ці значення можите поміняти.

<?php
function show_form()
{
?>
<?php
}
function complete_mail() {
    // $_POST['title'] містить дані з поля "Тема", trim() - забираємо всі лишні пробіли і переноси рядків, htmlspecialchars() - переобразує спеціальні символи в HTML по суті, для того, щоб самі прості спроби взламати сайт не вийшли, ну і  substr($_POST['title'], 0, 1000) - зменшуємо текст до 1000 символів. Для змінних $_POST['mess'], $_POST['name'], $_POST['tel'], $_POST['email'] все аналогічно
    $_POST['title'] =  substr(htmlspecialchars(trim($_POST['title'])), 0, 1000);
    $_POST['mess'] =  substr(htmlspecialchars(trim($_POST['mess'])), 0, 1000000);
    $_POST['name'] =  substr(htmlspecialchars(trim($_POST['name'])), 0, 30);
    $_POST['tel'] =  substr(htmlspecialchars(trim($_POST['tel'])), 0, 30);
    $_POST['email'] =  substr(htmlspecialchars(trim($_POST['email'])), 0, 50);
    // якщо не заповнене поле "Імя" - показуемо помилку 0
    if (empty($_POST['name']))
        output_err(0);
    // якщо не правильно заповнене поле email - показуемо помилку 1
    if(!preg_match("/[0-9a-z_]+@[0-9a-z_^\.]+\.[a-z]{2,3}/i", $_POST['email']))
        output_err(1);
    // якщо не заповнено поле "Повідомлення" - показуемо помилку 2
    if(empty($_POST['mess']))
        output_err(2);
    // створюємо наше повідомлення
    $mess = '
Імя відправника:'.$_POST['name'].'
Контактний телефон:'.$_POST['tel'].'
Контактний email:'.$_POST['email'].'
'.$_POST['mess'];
    // $to - кому відправляємо
    $to = 'test@test.ua';
    // $from - від кого
    $from='test@test.ua';
    mail($to, $_POST['title'], $mess, "From:".$from);
    echo 'Дякую! Ваш лист відісланий.';
}

function output_err($num)
{
    $err[0] = 'ПОМИЛКА! Не введено імя.';
    $err[1] = 'ПОМИЛКА! Невірно введений e-mail.';
    $err[2] = 'ПОМИЛКА! Не введено повідомлення.';
    echo '<p>'.$err[$num].'</p>';
    show_form();
    exit();
}

if (!empty($_POST['submit'])) complete_mail();
else show_form();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style>
html,body
{
    margin: 50;
    padding: 0;
}

body
{
    background-image:url(../images1/nastol.com.ua-1087861.jpg);
    width: 600px;
}
#form-wrapper
{
    width: 700px;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    border: 1px solid #ddd;

    background-color: #fff;
    background-image: -moz-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

	background-image: -webkit-gradient(linear, left top, right bottom,
										color-stop(5%, #fff), color-stop(5%, #fff),
										color-stop(15%, #844049), color-stop(15%, #fff),
										color-stop(25%, #fff), color-stop(25%, #fff),
										color-stop(35%, #3E4996), color-stop(35%, #fff ),
										color-stop(45%, #fff), color-stop(45%, #fff),
										color-stop(55%, #844049), color-stop(55%, #fff),
										color-stop(65%, #fff), color-stop(65%, #fff),
										color-stop(75%, #3E4996), color-stop(75%, #fff ),
										color-stop(85%, #fff), color-stop(85%, #fff),
										color-stop(95%, #844049), color-stop(95%, #fff)
									   );

    background-image: -webkit-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

    background-image: -o-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

    background-image: -ms-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

    background-image: repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);
}

#form-wrapper:before, #form-wrapper:after
{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#form-wrapper:after
{
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

#form-wrapper form
{
    background: #fff;
    height: 400px;
}

#form-wrapper #form-inner
{
    margin: 0 auto;
    padding: 35px 0;
    width: 545px;
}

#form-wrapper label
{
    font: bold 18px/25px Corbel, Arial, Helvetica;
    text-shadow: 0 1px 0 #fff, 0 2px 0 #ccc;
    float: left;
    margin-right: 10px;
    width: 120px;
}

#form-wrapper .input
{
    font: 15px Arial, Helvetica;
    padding: 5px;
    margin: 0 0 20px 0;
    border: 1px solid #b9bdc1;
    width: 400px;
    color: #797979;

    -moz-box-shadow: 0 2px 4px #bbb inset;
-webkit-box-shadow: 0 2px 4px #bbb inset;
    box-shadow: 0 2px 4px #bbb inset;

-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

}

#form-wrapper .input:focus
{
    background-color: #E7E8E7;
    outline: 0;
}

#form-wrapper .textarea
{
    height:150px;
}

#form-wrapper .button
{
    float: right;
    margin: 10px 0 0 0;
    padding: 7px 15px;
    cursor: pointer;
    color: #fff;
    font: bold 13px Tahoma, Verdana, Arial;
    text-transform: uppercase;
    overflow: visible; /* IE6/7 fix */
    border: 0;

    background-color: #7089b3;
    background-image: -moz-linear-gradient(#a5b8da, #7089b3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
    background-image: -webkit-linear-gradient(#a5b8da, #7089b3);
    background-image: -o-linear-gradient(#a5b8da, #7089b3);
    background-image: -ms-linear-gradient(#a5b8da, #7089b3);
    background-image: linear-gradient(#a5b8da, #7089b3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a5b8da', EndColorStr='#7089b3');

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    text-shadow: 0 1px 0 rgba(0,0,0,.3);

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
}

#form-wrapper .button:hover
{
    background-color: #a5b8da;
    background-image: -moz-linear-gradient(#7089b3, #a5b8da);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7089b3), to(#a5b8da));
    background-image: -webkit-linear-gradient(#7089b3, #a5b8da);
    background-image: -o-linear-gradient(#7089b3, #a5b8da);
    background-image: -ms-linear-gradient(#7089b3, #a5b8da);
    background-image: linear-gradient(#7089b3, #a5b8da);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7089b3', EndColorStr='#a5b8da');
}

#form-wrapper .button:active
{
    background: #64799e;
    position: relative;
    top: 2px;

    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

</style>
</head>
<body>
<div id="form-wrapper">
	<form action="" method=post>
<div align="center">
              <br />Ваше імя*<br />
              <input type="text" name="name" size="40">
              <br />Контактний телефон<br />
              <input type="text" name="tel" size="40">
              <br />Ваш email*<br />
              <input type="text" name="email" size="40">
              <br />Teма<br />
              <input type="text" name="title" size="40">
              <br />Повідомлення*<br />
              <textarea rows="10" name="mess" cols="30"></textarea>
              <br /><input type="submit" value="Відіслати" name="submit">
              <br />* Відмічені поля, які необхідно заповнити
</div>
</form>
</div>
</body>
</html>

Продовжуємо, або в принципі можна вже і сказати що закінчуємо, оскільки коди є в наявності, як і що можна поміняти під ваші потреби, таке тлумачення також присутнє, нижче посилання для того щоб ви мали можливість скачати повністю готову сторінку, і не парились з створенням сторінок.


Скачати повністю форму зворотнього звязку, написану тільки на стилях CSS можна тут


Щоб перевірити як працює форма, для цього потрібно буде застосувати локальний сервер, сервер який можливо створити завдяки пакету програм від “Denver” або “Endels” або зараз популярний “Openserver”.

Можливо з часом, на сторінці появиться і відео, по цьому матеріалу.

Отож новий рік наступив, астрологи обіцяють що відбудуться зміни, але мені і не віриться що в кращу сторону, зміни кожного року відбуваються але все в гіршу сторону, чув що курс виросте до сорока, але і “весело” буде.

Отож веселих свят і смачної куті, ну і До зустрічі!

Leave a Reply

Your email address will not be published. Required fields are marked *