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

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

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

Настройка на проекта

Преди да започнете да кодирате, уверете се, че вашата среда за разработка е настроена. Отворете предпочитания от вас текстов редактор или една от препоръчителните интегрирани среди за разработка (IDE) като Код на Visual Studio или Възвишен текст.

Създайте папка на проекта, за да поддържате вашите HTML и CSS файлове организирани.

В тази папка създайте отделни файлове за HTML (index.html) и CSS (style.css). И накрая, свържете своя CSS файл във вашия HTML документ раздел с помощта на етикет.

instagram viewer

Създаване на HTML структура

Основата на всяка форма за контакт е нейната HTML структура. Ето как можете да създадете необходимите HTML елементи за вашата форма за контакт.

<main>
<h1>Welcome to my Formh1>
<formid="form">
<divclass="input__container">
<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">
<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
form>
main>

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

В момента вашата форма за контакт изглежда така:

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

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 font-size: 62.5%;
}


body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}


main {
 width: 40rem;
 box-shadow: 2px 3px 5pxrgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}


h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}


form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}


.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}


.input__containerlabel { font-size: 1.6rem; }


.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#555;
 resize: none;
}
button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
}

Вашата форма за контакт сега изглежда така:

Внедряване на валидиране на формуляр

Осигуряването на точност и пълнота на предоставената от потребителите информация е от първостепенно значение. Един ефективен подход включва използване на JavaScript за валидиране на формуляр от страна на клиента. За да започнете, създайте таг на скрипт в края на вашия HTML файл и насочете елемента на формуляра.