Формуляр за персонализиране на обратна връзка: Как да създадете онлайн? Как да направите красива форма за обратна връзка на изскачането HTML и PHP с телефон и изпращане на поръчка по E -mail?

Инструкции за създаване на форма за обратна връзка за HTML и CSS, както и колекция от готови форми и ръководство за свързването и конфигурирането им.

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

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

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

Фигура 1. Какво е форма за обратна връзка и защо е толкова необходимо?

Каква е форма за обратна връзка и защо е толкова необходимо?

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

Формулярът за обратна връзка е отделна страница или блок (отдел), състояща се от няколко полета на въвеждането на текст и бутона „Изпращане“. По правило стандартната форма има следните полета:

• Пълно име
• Електронна поща (имейл адрес)
• Номер на мобилен телефон
• Адресите на вашия сайт
• Поле за въвеждане на текстово съобщение

Полетата обаче могат да бъдат колкото искате, и те могат да бъдат подписани, както искате. Всичко зависи от вашите нужди и въображение.

Фигура 2. Какво е форма за обратна връзка и защо е толкова необходимо?

• В допълнение, някои собственици добавят Google или Yandex карти към формата за обратна връзка, форми за въвеждане на сайта, използвайки социални мрежи „Vkontakte“, „Facebook“, „Google+“ и т.н. Но ще говорим за създаването на най -простата форма на обратна връзка, за която ще ви трябват изключително познания за основите на езика на маркирането Html И нищо повече.

Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

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

За да пресъздадете работната форма на обратна връзка, се нуждаете от три важни елемента, един от които е отговорен за маркирането и структурата на формата ( Html), вторият за своя външен дизайн ( CSS), и третата за обработка и предаване на данни ( Php). Да започнем в ред:

Писане на HTML код за обратна връзка

• Етап 1. За да се посочи форма в Html Етикетът се използва ‹Форма› ‹/Форма›. Вътре ще бъдат зададени размери, стилове и други жизненоважни свойства на формата. Когато записва самия маркер, той трябва да зададе клас, който да посочи, което допълнително ще помогне да се инсталира за формуляра CSS Стилове.

Фигура 1. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 2. По -нататък, за да създадем първото поле на нашата форма вътре в етикета ‹Форма› Трябва да напишете блокче ‹P›което е отговорно за създаването на нова линия.

Фигура 2. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 3. Вътрешен маркер ‹P› От новия ред въвеждаме следния маркер: ‹Етикет за \u003d" Име "›Име ‹/Етикет›. Той е отговорен за имената на бъдещото поле на формата.

Фигура 3. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 4. На новата линия всичко е в един и същи маркер ‹P› Предписваме етикета за създаване на поле със следните стойности: ‹Type Input \u003d" Text »name \u003d" Name "Stuzholder \u003d"Въведете вашето име »Задължително \\›. Параметър " type \u003d "текст"" Задава типа текстово поле и параметъра " заместител \u003d "Въведете вашето име «» Задава първоначалния текст в това много текстово поле. Параметър " задължително»На посетителя на сайта става ясно, че това поле е задължително за попълване. В резултат на това трябва да получите форма с едно поле, както е показано на екрана по -долу.

Фигура 4. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 5. С горния пример добавете останалите полета, от които се нуждаете, всеки път, като започнете от маркера ‹P›. За да инсталирате поле с текстово съобщение, използвайте маркер ‹TextArea name \u003d" Съобщение "Cols \u003d" 50 ″ редове \u003d "6 ″ Изисква се› ‹/TextArea›. Настроики " cols" и " редове»Са отговорни за ширината и височината на текстовото поле. Можете да зададете параметрите, които ви харесват повече. Трябва да получите нещо подобно, показано на екрана по -долу.

Фигура 5. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 6. За да се предпазите от ботове, които днес са доста в интернет, създайте друга линия с етикет ‹Входно име \u003d" bezspama "type \u003d" text »style \u003d" display: none "value \u003d" " /›. Поради параметъра " style \u003d "дисплей: няма"»Това поле няма да бъде видимо от простосмъртни, но ботовете ще бъдат запълнени автоматично. По този начин, винаги можете да разграничите жив човек от програмата.

Фигура 6. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 7. Последният етап от маркирането ще бъде създаването на бутона за изпращане. Тагът се използва за това ‹Бутон›. Създайте нов блок ‹P› И вътре в него въведете кода на бутона със следните параметри: ‹Бутон клас \u003d" изпращане "type \u003d" изпращане "›изпрати съобщение ‹/Бутон›. Подобен резултат трябва да се окаже, както е показано на екрана.

Фигура 7. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

Работа с каскадни стилове (CSS)

• Както вече забелязахте в процеса на маркиране, ние се оказахме нещо много криво, неписано и отвратително. За да придаде формата за обратна връзка повече или по -малко кокетна поява, един език Html Няма да е достатъчно. За тази цел ще трябва да прибягвате до използването на стилове CSS.
• В случай, че се възползвате от съветите, за да затегнете основните си умения за ресурса htmlbook.ru, след това задайте определени параметри на дизайна за всички части на формата, използвайки CSS Няма да ви е трудно. Ако нямате желание или време да се забърквате с всичко това, тогава ще ви предоставим готов код -направен и ще ви кажем как да го свържете.

Фигура 8. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

Свържете стилове CSS да се Html Можете да по два начина:

• Копирайте кода от нашата каскадна таблица в долната част на файла style.cssкойто присъства в хостинга на сайта
• Преместете нашия файл със стилове към вашия хостинг и го свържете

Файл style.css Свързва се вътре в маркера ‹Глава› ‹/Глава› Използване на скрипт ‹Link Rel \u003d" Stylesheet "Media \u003d" Екран "HREF \u003d" Style.CSS "›. В случай, че файл със Styles се крие в същата папка като основния HTML файл, тогава трябва да посочите пътя към него. В нашия файл със стилове всеки елемент има обозначение. Ако желаете, можете да промените параметрите за себе си, ръководени само от основни умения за програмиране.

PHP файлова връзка и настройка

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

За разлика от файла style.css, файл с PHP скрипт е прикачен в свойствата на самата форма. Да започнем в ред:

• Етап 1. Отворете предварително написания код и намерете ред с маркер с отворен формуляр. Добавете към него свойства " action \u003d "contact-orm.php"" и " метод \u003d "Пост"". Гледайте пример на екрана.

Фигура 9. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 2. Изтеглете нашия PHP файл и го поставете върху хостинга в същата папка, където се намира документът HTML. По този начин PHP и HTML файловете ще си взаимодействат помежду си.

Фигура 10. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 3. След това трябва да конфигурирате скрипта за себе си. Отворете файла и задайте променливите, като им присвоите същите имена като в HTML скрипта. Ако сте добавили допълнителни полета към формата, добавете ги в PHP скрипта точно както е показано на екрана.

Фигура 11. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 4. След това трябва да добавите още две променливи с адреса на вашия имейл и темата на буквата, която ще се показва на вашето поле. В линия с променлива " $ Адрес"Посочете електронната поща и в линията" $ sub»Темата на буквата е показана на екрана.

Фигура 12. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

• Стъпка 5. В линия с променлива " $ ms»Форматът на писмото, което ще получите по пощата, е конфигуриран. Можете да го пренапишете непроменен или да редактирате свой собствен вкус.

Фигура 13 Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

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

Фигура 14. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

Изтеглете CSS и PHP файлове за обратна връзка

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

Фигура 15. Как да създадете най -простата форма за обратна връзка за сайта на HTML и PHP?

Избор от красиви дизайнерски форми на обратна връзка за HTML и CSS за различни цели

• Въз основа на горните инструкции можете лесно да „изтеглите“ формата за обратна връзка по свой вкус. Ако обаче нямате време или желание да създадете формуляр от нулата, можете да намерите готови форми за дизайн в интернет и да имате основни умения Html Редактирайте ги сами.

Фигура 1. Избор от красиви дизайнерски форми на обратна връзка за HTML и CSS за различни цели

• След като потърсихме малко, намерихме за вас селекция от 35 Красиви изскачащи дизайнерски форми на обратна връзка, които са написани на Html и CSS. Тези форми са подходящи за двигатели като WordPress и JoomlaТе имат прости и светлинни настройки от контролния панел и също са идеални за сайтове без двигател.

Изтеглете селекция от дизайнерски форми на обратна връзка за сайтове

Видео: ReadPress Reframed обратна връзка отзиви отзиви