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

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

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

Ваш ip адрес:54.198.210.67

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

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

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

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

Скажем якщо взяти сайт створений на csm WordPress то існують багато плагінів за допомогою яких ви зможите створити контактну форму.

Якщо взяти сайт написаний на мові HTML5 то в такому разі контактну форму можна створити за допомогою мови програмування РНР,  або також за допомогою JavaScript.  В цій публікації я розкажу як створити контактну форму на мові програмування РНР.

 

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

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

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

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

Щоб перевірити чи працює контактна форма написана на РНР,  потрібно встановити в себе на компютері пакет програм від “Денвер”. В мене встановлений іменно від “Денвер” тому як перевірити чи працює контактна форма я орієнтувався саме на цей пакет.

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

Створюємо контактну форму на мові програмування РНР

1 — Відкриваємо веб редактор, хоча може бути навіть текстовий “Блокнот”.

2 — Копіюємо код нижче, вставляємо в веб або краще рнр редактор, зберігаємо файл, назву можите любу придумати, свій я назвав “mail1”  зберігаємо файл, розширення повинно бути тільки php.

Контактна форма, код — скрипта на мові програмування РНР, повністю робочий.
<?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();
 ?>

3 — Перевіряємо як працює скрипт, для цього використовумо локальний сервер, якщо у вас відсутній, обовязково встановіть, в мене створений пакет від Денвер, запускаємо “Денвер”, в папці  “home” створюємо папку, назву даємо бажано похожу як назву доменного імені ( наприклад “syte. ua”) в створеній папці  “syte. ua”  створюємо ще одну папку обовязково з назвою “www” потім  наш щойностворений файл mail1.php  поміщаємо  в папку “www”.

4 — Після того потрібно перезапустити “Денвер”, далі відкриємо браузер я для локального сервера користуюсь браузером Google Chrome, в верхні панелі в полі пошуку а не в пошуковій системі Google чи Yandex набираємо syte. ua.

Появиться сторінка з назвою

Index of /

на якій клацаємо клавішою на файл  “mail1.php”,   якщо всі дії виконані правильно тоді має зявитись контактна форма.

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

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

php1

⇑на файл  “mail1.php”

А так  сам вигляд цієї контактної форми мені подобається.

php2

⇑вигляд цієї контактної форми

5 — Тепер перевіряємо як працює контактна форма, для цього заповнюємо всі поля і пишем повідомлення, потім натискаємо кнопку відправити, і після того як сторінка перезапуститься має появитись “Дякую! Ваш лист відісланий.”

До речі, якщо наприклад у вас буде скрипт з іншою контактною формою і коли ви будете перевіряти заповнивши необхідні поля, і після відправки в вас зявиться щось на подобі “Параметри виставлені не правильно”.  Тоді раджу “не паритись”, а просто пошукайте інший скрипт.

Даний скрипт повністю робочий тому лишається перевірити чи правильно відображається лист. Для цього в віртуальному диску в мене диск “Z” шукаємо папку “tmp” вона розміщена на початку,  як тільки відкриємо “віртуальний диск Z”. Знаходиться з папками “denwer” “home” “usr”.

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

php3

⇑в папці “tmp” відкриваємо папку “!sendmail”

php4

⇑якщо всі дані відображаються правильно, значить все працює

6 — Залишається тільки зєднати цей файл з вашим ресурсом, для прикладу я зєднав з своїм тестовим сайтом, на якому я практикуюсь, простим способом.

Спочатку вставив файл з розширенням рнр в кореневу папку сайту, а потім  в полі де знаходяться посилання на сторінки тестового сайту, в сторінці для контактів

 <a href=”contact.html“”#” class=”button heart”>Контакти</a>

поміняв на 

<a href=”mail1.php“”#” class=”button heart”>Контакти</a>.

На всіх сторінках необхідно прописати посилання з розширенням рнр. Ну а файл contact.html тепер не потрібний, видаляємо.

php5

⇑вставити файл в кореневу папку сайту

7 — Для того щоб повідомлення приходили на ваш “email” потрібно відкрити файл “mail1” в текстовому редакторі Notepad++ шукаємо 47–рядок і в коді

$to = ‘test@test.ru’; замість test@test.ru вставляємо “email” на який ми хочемо отримувати листи.

php6

⇑замість test@test.ru вставляємо ваш “email”

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

contact_form5

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

На цьому все до зустрічі.

Leave a Reply

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