Красив дизайн на формата. Красива форма за обратна връзка без изображения, използваща чист CSS

И така, нека започнем, първо ще маркираме страницата и ще напишем стилове за нея. Маркирането ще включва обикновена форма за обратна връзка с два входа (телефон, поща) и едно текстово поле, където според нашата идея потребителят ще въвежда своето съобщение. Ще поставим манипулатора на формуляра на отделна страница. Форма за обратна връзка Въведете телефон: Вашата поща: Вашият въпрос: Нека напишем стиловете: Html, тяло (височина: 100%; поле: 0; ) html (цвят на фона: #fff; цвят: #333; шрифт: 12px/14px Verdana, Tahoma, sans-serif; курсор: по подразбиране; ) #feedback-form (цвят на фона: #ececec; поле: 50px автоматично 0; подравняване на текст: център; ширина: 430px; подложка: 15px; ) #feedback-form h2( margin-bottom: 25px; ) #feedback-form input, #feedback -form textarea( background-color: #fff; border: 1px solid #A9A9A9; padding: 1px 5px; width: 90%; ) #feedback-form input(height: 26px; ) #feedback-form textarea(height: 75px; padding-top: 5px; ) #feedback-form input( margin-top: 15px; background-color: #0B7BB5; border: 1px solid #CCCCCC; color: #FFFFFF; font-weight: bold; height: 40px; line- височина: 40px; преобразуване на текста: главни букви; В резултат на всички тези действия ще получите следната форма: Сега е време да се заемем със сървъра. Нашият скрипт ще включва няколко части: настройка; Спомагателни функции; Обработка на входящи данни; Изход на съобщение. Всички тези части, разбира се, са условни, тъй като никой не ни спира да правим бъркотия в кода или, обратно, да преместваме ключови части в други файлове. Но мисля, че е по-добре да направите манипулатора в един файл, така че да е удобно да го свържете с други проекти. Настройки На този етап ще създадем три променливи: $my_email (пощенската кутия, до която се изпращат данните), $path_log (пътят до лог файла) и $time_back (времето, когато потребителят се връща на сайта). // Посочете вашата пощенска кутия $my_email = " [имейл защитен]"; // Посочете къде ще се съхраняват регистрационните файлове $path_log = "log.txt"; // Времето, през което потребителят се връща на сайта (сек) $time_back = 3; Помощни функции Тук описваме пет функции, които ще опростят обработката на данни. Шаблони за извеждане на съобщения: Функция error_msg($message)( $message = "".$message.""; return $message; ) function success_msg($message)( $message = "".$message.""; return $message; ) Изчистване на данните, получени от формуляра: Функция clear_data($var)( return trim(strip_tags($var)); ) Изпращане на писмо: Функция send_mail($email, $subj, $text, $from)( $headers = "От: ".$from." \r\n"; $headers .= "MIME-версия: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n" $result = mail($subj, $text, $headers) return true; И последната функция, която ще провери телефона и пощата за правилния запис на техния формат. Функция check_format($data, $type)( switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data)( return true; ) break; case "phone": $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-] *([\d-]*)$/"; if(preg_match($pattern, $data))( return true; ) break; ) return false; ) Както можете да видите, всички функции, които написахме, са малки по размер. Можете да ги оставите извън областта за обработка на данни, но когато трябва да промените или разширите нещо, например check_format(), ще бъде много по-просто и удобно. Обработка на входящи данни Първо откриваме от коя страница е дошъл потребителят. След това дефинираме променливите, в които ще се съхраняват нашите съобщения и състоянието на изпращане на писмото. // Разберете предишната страница $prev_page = $_SERVER["HTTP_REFERER"]; // Нашите съобщения $msg = ""; // Статус на имейл $status_email = ""; Сега, за да избегнем проблеми с кодирането, ние го посочваме с помощта на заглавката. Header("Content-Type: text/html; charset=utf-8"); If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["number"], $_POST["email"], $_POST["question"]))( $number = clear_data ($_POST["номер"]); $email = clear_data($_POST["email"]); check_format($email, "email") && !empty($question))( // Формиране на писмо $e_title = "Ново съобщение"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "!} "; $e_body .= "Поща: ".$email; $e_body .= " "; $e_body .= "Въпрос: ".$question; $e_body .= ""; $e_body .= ""; // КРАЙ Формирайте писмо if(send_mail($my_email, $e_title, $e_body, $prev_page) ) ( $status_email = "успех"; $msg = success_msg("Благодарим ви за въпроса. Ние ще ви отговорим възможно най-скоро."); )else( $status_email = "error"; $msg = error_msg("Възникна грешка при изпращане на имейла."); ) // Запис във файл $str = " Час: ".date ("d-m-Y G:i:s")."\n\r"; $str .= "Телефон: ".$номер."\n\r"; $str .= "Поща: " .$email." \n\r"; $str .= "Въпрос: ".$question."\n\r"; $str .= "Имейл: ".$status_email."\n\r"; str .= "= ===================================\n\r"; ($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "Попълнете формуляра правилно!"); ) )else( $msg = error_msg("Възникна грешка!"); ) )else( изход ;) В писмения код определяме дали формулярът е изпратен, в противен случай затваряме този файл с помощта на функцията за изход. След това проверяваме наличието на клетки с нашите данни в POST масива; ако са пристигнали, ги почистваме от възможния боклук. След почистване проверяваме форматите на пощата и телефона, както и наличието на текст във въпросната променлива. След това генерираме писмо, изпращаме го и записваме дневник, където в допълнение към данните запазваме статуса на изпращане на писмото. По този начин можем да проследим работата на функцията mail() и в същото време да не загубим данни. Изход на съобщение Всичко, което трябва да направим, е да уведомим потребителя за успешно или „не толкова“ завършена операция и да го върнем обратно на сайта с формуляра. За да направим това, ние използваме маркиране с включени PHP скриптове. За да пренасочим потребителя обратно към сайта, ще използваме мета тага refresh, където вмъкваме PHP код с вече създадените променливи. Също така ще трябва да използваме малко JavaScript, за да направим страницата малко по-динамична. Пишем функция timeBack(), която ще брои секундите в обратен ред преди пренасочването. Ще се свържем с вас

Ще се свържем с вас body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Промяна на адреса на текущата страница след 3 секунди (3000 милисекунди)*/

Проверка на функционалността на формата

Извикайте прозореца и въведете данни за тестова проверка на нашата форма

Нека ви напомня още веднъж, че вашият хостинг трябва да поддържа обработка на PHP файлове, в противен случай нашият манипулатор просто няма да бъде изпълнен и няма да бъде изпратено писмо до посочения имейл адрес. Резултат от успешно попълнен формуляр за обратна връзка

Това е всичко за мен, опитах се да предам смисъла и действието на сценария по възможно най-добрия начин. Ако имате въпроси, не се колебайте да се свържете с мен в коментарите или във VK (вижте данните за контакт). Желая ви лека и ползотворна работа.

Всеки уебсайт трябва да има форма за обратна връзка, така че рано или късно всеки от нас се замисля за разработването на такава. В интернет има доста опции, някои използват популярни плъгини, други използват собствени лични разработки, но повечето търсят готови решения. Във всеки случай нашата форма за обратна връзка за сайта ще работи и ще работи и нека поговорим за всичко това по ред.

HTML

И така, нека започнем, както винаги, с обичайния шаблон - html. Първо имаме нужда от формуляр с няколко полета. За яснота и стандарт на всички формуляри ще вземем 3 полета. Тези. това ще бъде име, имейл и телефон.

Всеки вход има свое уникално име, което ще ни трябва по-късно, за да изпращаме съобщения. Можете също свободно да добавяте свои собствени полета и не само да въвеждате, но и да избирате текстово поле. Само не забравяйте да зададете на всеки от тях собствени имена, които ще използваме, когато изпращаме информация по имейл. За удобство добавих задължителен атрибут към всяко поле, благодарение на което браузърът няма да позволи на потребителя да изпраща празни стойности и ще уведоми за необходимостта от попълването им.

CSS

Когато формулярът е готов, можете да го трансформирате малко. Тук всичко зависи и от вашите нужди и фантазии. За по-голяма яснота скицирах няколко стила за всеки елемент, така че всичко да не изглежда толкова плоско. Но ако сте мързеливи или не знаете как да го направите, тогава можете да използвате моята опция:

Form( max-width: 400px; width: 100%; margin: 0 auto; ) input(box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 11); поле: 10 пиксела; контур: 5 пиксела; ширина: 0,3 пиксела; 0px 2px 0 1px черно;

Клиентска част

Тук си струва да разберете по-подробно или по-скоро да изберете подходящата опция за себе си. За да изпращаме съобщения по имейл, ще трябва да използваме езика php, т.е. създайте отделен файл, в който ще прехвърлим всички тези данни. Но ние няма да разглеждаме този метод тук, тъй като е много по-красиво, когато всичко се случва без презареждане на страницата. Така че ще разгледаме изпращането на данни чрез ajax.

Ако искате да направите всичко по старомодния начин, тогава ще трябва леко да промените горния html и да зададете стойността на атрибута на метода на формуляра (post или get). Всичко зависи от това как искате да прехвърлите данните от формуляра. И също така не забравяйте да напишете действие, което ще посочи пътя към php файла.

И ние ще използваме по-усъвършенстван метод и ще изпращаме данни без презареждане на страницата, а когато получим отговор от сървъра, ще дадем на потребителя съобщение за успешна операция или грешка. Ще ни трябват обаче и 2 файла, да речем contact.php и custom.js.

На първо място, не забравяйте да свържете библиотеката Jquery, с нейна помощ ще намалим кода няколко пъти и можем лесно да извършваме всякакви действия, като използваме готови решения.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( тип: "POST", url: "contact.php", данни: str, успех : function(msg) ( if(msg == "ok") ( alert("Съобщението е изпратено"); ) else ( alert("Грешка! Може да сте попълнили полетата неправилно."); ) ) ) );

Сега нека разберем плана за действие и защо имаме нужда от всички тези библиотеки и файлове. Когато потребителят щракне върху бутона за изпращане, имаме събитие за изпращане, което ще напишем в custom.js и на базата на което ще получим всички данни от формата и ще ги предадем на файла contact.php. Тук проверяваме отново дали полетата ни са празни (за да избегнем друга възможност за спам), изпращаме съобщение по имейл и уведомяваме потребителя за резултатите, които се изпращат като отговор на custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail) "]); $txtphone = trim($_POST["mfbPhone"]); // от кого $fromMail = " [имейл защитен]"; // Въведете вашия имейл тук $emailTo = " [имейл защитен]"; $subject = "Обратна връзка"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "От: Примерен формуляр\n"; $headers . = „Тип съдържание: текст/обикновен; charset="utf-8"\r\n"; $headers .= "MIME-версия: 1.0\r\n"; $headers .= "Дата: ". date("D, d M Y h:i:s O") ."\r\n"; // тяло на писмото $body = "Получих писмо от сайта ".$site." \n\nИме: ".$txtname."\nТелефон: ".$txtphone."\ne-mail: ".$txtemail."\nСъобщение: ".$txtmessage; mail($emailTo, $subject, $body, $headers);

Това е най-основният пример за това как работи формуляр за контакт. Има много опции за това как да промените файла за проверка в PHP, да създадете свои собствени класове и т.н. Но нашата задача беше да създадем прост и работещ пример, който можете да използвате на уебсайта си.

демо

файлове

Готови добавки

Тъй като сте в блог на WordPress, вероятно сте готови и нетърпеливи да използвате всички видове плъгини, особено ако сте пълен ламер в програмирането и оформлението. И аз не ви обвинявам за това и дори мога да представя един от тях на вашето внимание за яснота. Целта на този параграф не е препоръка, а само пример, тъй като съм използвал приставката Contact Form 7 в няколко проекта.

Конфигурира се много лесно и почти винаги работи безупречно. Ако трябва да създадете свой собствен уникален дизайн, можете да го направите. Всичко, което трябва да направите, е да добавите необходимите полета в конструктора, да преведете и промените известията за грешки и успешно изпращане по свой начин и сте готови. След това копирайте краткия код и го поставете на желаното място във формата.

Никога не съм имал проблеми с плъгина и ако трябва бързо и готово решение, това е. Ако имате свои собствени изисквания към формуляра по отношение на функционалност и дизайн, тогава е по-добре да използвате първия вариант, който изисква познания в тази индустрия.

Здравейте, скъпи приятели и гости на блога! Обратната връзка с уебсайта е една от най-важните характеристики, която позволява на блогъра да комуникира с посетителите си. Но има една уловка - плъгините, които показват обратна връзка за сайта, тежат много!

От известно време бях зает да олекотя блога си и реших да се отърва от ненужните плъгини, които го утежняват с теглото си и пречат на страниците да се зареждат бързо. И на първо място, изборът ми падна върху формуляра за обратна връзка или по-скоро върху приставката, която го показваше на моя уебсайт „Формуляр за контакт 7“, а също така имаше нужда от втора приставка, която показваше captcha „reCaptcha“. Ето как реших да се отърва от два доста важни плъгина наведнъж, използвайки форма за обратна връзка, която не изисква никакви плъгини и е лесна за инсталиране на сайта. Сега ще ви разкажа за това и, разбира се, ще ви позволя да изтеглите файловете, за да можете да създадете подобна обратна връзка за вашия сайт...

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

Можете да видите и проверите функционалността на моята форма за обратна връзка за сайта на страницата “ “. Пишете във формата ми за контакт в сайта и ще Ви отговоря!

Сега нека да преминем към най-важното нещо и да създадем своя собствена обратна връзка за сайта, независимо от каквито и да било добавки...

Предоставяме обратна връзка за сайта без плъгини!

Всичко, от което се нуждаем за това: моя блог сайт със статията „Обратна връзка за сайта“, текстов редактор и разбира се вашето желание да създадете своя собствена форма за контакт на сайта, за да го улесните, като се отървете от ненужните и тежки плъгини!

Ето HTML кода на формата за обратна връзка за сайта, който можете да поставите във вашия сайт или блог навсякъде, за мен това е страницата за контакти:

Форма за обратна връзка

как се казваш

Имейл

Тема на съобщението

Изпратете съобщение

Моля, обърнете внимание на някои важни неща, които трябва да направите в този код:

Работете с код само в текстовия редактор на Notepad++

Коригирайте пътя до файла mail.php в първия ред на кода, за който ще ви разкажа малко по-късно

Трябва да качите този файл на вашия хостинг в основната папка на двигателя на сайта! Но първо проверете дали сте го оправили или не!

В реда, където е изписан текстът “ВАШИЯТ ХОСТИНГ ИМЕЙЛ АДРЕС”!

Сега трябва да свържете скрипт, който свързва библиотеката jQuery на сайта за правилната работа на нашата система „обратна връзка за сайта“. Първо проверете на уебсайта си, може би този скрипт вече е инсталиран, ако не знаете как да направите това, задайте въпрос на поддръжката на вашия хостинг.

Ето го скрипта:

Или можете да добавите тази функция към вашия WordPress functions.php файл:

Функция my_jquery() ( wp_deregister_script("jquery"); wp_register_script("jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); wp_enqueue_script("jquery" ;)

Той замества скрипта и също така включва библиотеката jQuery на сайта на WordPress.

Сега свързваме скрипт на нашия уебсайт, който ще работи заедно с файла mail.php, изпращайки вашите писма. За да направим това, трябва да създадем js файл като contact.js и да го изпратим на вашия уебсайт в папката със скриптове на вашата активна тема, която се нарича js. Ако го нямате на уебсайта си, създайте го!

Ето го скрипта:

JQuery(document).ready(function($) ( $("#contact").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url : "ВАШИЯТ ДОМЕЙН/wp-content/themes/ВАШАТА ТЕМА/mail.php", данни: str, успех: функция(msg) ( if(msg == "ОК") ( резултат = "Съобщението е изпратено"; $(" #fields").hide(); ) else (result = msg;) $("#note").html(result); ) )); return false; )); ));

Почти готово! Сега просто трябва да качим стиловете във вашия CSS файл, който отговаря за стиловете на темата на сайта, на нашия хостинг. Ако това не бъде направено, тогава нашата новосъздадена обратна връзка за сайта няма да бъде красива и едноцветна.

Ето кода на стила за формата за обратна връзка за сайта:

Form#contact ( border:1px solid #e5e5e5; padding:10px; background:#e9ffd0; border-radius:5px; ) #contact label (font-size: 14px;) #contact input:required:valid (box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; #fff url(images/valid.png) no-repeat 98% center ) #contact textarea:required:valid (box-shadow: 0 0 3px # BCEF89; border-color: #BCEF89!important; ) #contact input:focus:invalid ( box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; background: #fff url(images/invalid. png ) no-repeat 98% center; ) #contact textarea:focus:invalid ( box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; ) .err ( border: 1px solid #ff8c00; padding: 10px ; фон: подравняване на текста: ляво; радиус на границата: 3 пиксела; плътно поле: #f5f9fd; подравняване на текста: 3 пиксела; ) #author, #email, #url (ширина: 30%; подложка: 5px; радиус на границата: 5px; граница: 1px плътен #e5e5e5; ) #comment (padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; ) #submit (font-weight: 400; background: #393; font-size: 15px; цвят: #fff подложка: 10px 50px;

Просто ги копирайте и ги изпратете във файла style.css на вашата активна тема в сайта. Ако след това искате да промените цветовете и формата, но това е само за напреднали!

Сега нашата обратна връзка за сайта е напълно готова за използване. Тествайте го и се насладете на работата му!

Това е всичко!

Ако сте харесали този материал? След това кликнете върху социалните бутони, абонирайте се за актуализации на блога и напишете своя коментар по-долу!

Добър ден, форма за обратна връзка трябва да присъства на всеки уебсайт. Днес ще покажа пример за готова форма за вмъкване във всеки уебсайт, включително и в WordPress двигателя. Готовият пример на html и php код може да бъде копиран на вашия уебсайт. В допълнение към готовия пример има много плъгини, които също са много популярни. В много сайтове такава форма вече е вградена в темата, но понякога има нужда да добавите друга към друга страница или да замените старата.

Преди да започна да пиша тази статия, сърфирах в интернет в търсене на отговор на този въпрос. След като прегледах още сайтове и блогове, намерих много малко висококачествени отговори относно вмъкването на формуляр за обратна връзка в сайт. Повечето от материалите са написани за работа с плъгини. В някои статии не е съвсем ясно какво и как да се направи, кодът не работи, писма не пристигат... и т.н.

Има, разбира се, достойни отговори, но те са много малко. Ще ви дам един прост пример, който не изисква много интелект. Не са необходими специални познания по PHP, или по-скоро изобщо не са необходими. Ще пиша подробно какво и къде трябва да се промени, когато е необходимо. Формата работи добре без никакви проблеми. Пример за формуляр е на моя уебсайт. В готовия пример добавих няколко стила за красота, така че формата вече изобщо да не изглежда „бедна“. Ако желаете, можете да промените всичко по свое усмотрение.

Готова форма за обратна връзка за сайт в html

В този пример формулярът за обратна връзка за сайта се състои от html код. Можете да вмъкнете този примерен html код в абсолютно всяка страница от сайта, без значение къде и какво използвате. Същият код може да бъде вмъкнат в страницата на двигателя на WordPress, всичко ще работи правилно и без грешки.

Име Имейл: Тема Вашият текст:

< form action = "/wp-content/themes/xmarkup/form.php" method = "post" name = "form" >Име< input class = "inp" style = "width: 30%;" name = "name" type = "text" / > Имейл:< input class = "inp" style = "width: 30%;" name = "email" type = "text" / > Тема на съобщението< input class = "inp" style = "width: 30%;" name = "temma" type = "text" / > Вашият текст: < textarea class = "inp" style = "width: 80%;" cols = "1" name = "massage" rows = "5" > < / textarea > < input class = "inp" type = "submit" value = "Изпратете" / > < / form >

В самото начало на кода, в първия ред, трябва да посочите пътя си към php файла form.php (повече за него малко по-късно). Няма нужда да променяте нищо друго. Ако не сте доволни от името на формуляра и неговите полета, винаги можете да добавите нови или да промените старите. Можете също да добавите свои собствени стилове директно към масата. Ако тази опция е неудобна за вас, дефинирайте нови класове и едва след това добавете стилове чрез вашия файл style.css

За тези, които не знаят как да направят това, отидете в административния панел на сайта, отидете в редактора и отворете файла style.css. Добавете този код в самия край на листа със стилове. В резултат на това кодът на формуляра трябва да бъде вмъкнат в страницата, а вашите css стилове в таблицата style.css

Inp( padding: 10px; border: 1px solid #E5E5E5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0) , 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px )

Inp ( подложка: 10px; граница: 1px плътен #E5E5E5; ширина: 200px; цвят : #999999; box-shadow: rgba (0, 0, 0, 0.1) 0px 0px 8px; Moz-box-shadow: rgba (0, 0, 0, 0.1) 0px 0px 8px; Webkit-box-shadow: rgba (0, 0, 0, 0.1) 0px 0px 8px;

След тези стъпки трябва да имате формуляр за обратна връзка като този на страницата. Не се увличайте твърде много; формата ви трябва да е проста и възможно най-удобна. Без излишни допълнителни полета...име, имейл, тема и съобщение. При желание може да се премахне дори темата на съобщението.

Php код на формуляр

Взехме решение за маркирането на формуляра, направихме го красив, сега трябва да създадем файл с разширение php и да добавим следния код към него. Добавете файла чрез FTP клиент към вашия уебсайт. Повечето потребители използват CMS, пуснете този файл в папката с вашата тема. Първоначално трябва да напишете адреса и името на този файл в маркирането на вашия формуляр, което показах по-горе. Записах пълния път за примера, за да е ясно какво трябва да се вмъкне и къде.

(

 

---

Прочетете:
Ако обувките не пасват на Aliexpress: правилните действия в този случай Продуктът Aliexpress е с правилния размер 3 разпределени информационни бази Мениджър на съдържанието - отговорности, заплата, обучение Недостатъци и предимства на работата като специалист по съдържание Как да се предпазите от скрит майнинг във вашия браузър? Възстановяване на парола в Ask