Контактна форма с 2 полета в Contact Form 7
Contact Form 7 е от онези плъгини, които почти всеки WordPress сайт е ползвал поне веднъж. Причината е проста: безплатен е, работи стабилно и не те заключва в някакъв „builder“ интерфейс. Вместо това формата се описва с текстови тагове — в началото звучи странно, но реално е голям плюс: копираш, променяш и поддържаш формуляра супер лесно.
Често ти трябва не „голяма“ форма, а нещо минимално — само две полета. Това е идеално за лендинг страница, страница „Контакт“, микро-сайт или просто като бърз начин да събираш запитвания без да товариш човека отсреща.
Защо точно 2 полета: име + имейл
Колкото по-кратка е формата, толкова по-голям е шансът да бъде попълнена. Две полета стигат напълно, ако целта ти е:
- да получиш контакт за обратна връзка
- да върнеш отговор с уточняващи въпроси
- да събереш запитване/lead без излишно „разпитване“
Вариантът „име + имейл“ е удобен, защото името прави комуникацията по-човешка, а имейлът е каналът за връзка. Ако по-късно решиш да надградиш, можеш да добавиш поле „Съобщение“, но за старт тези две са напълно ок.
Как работи CF7: тагове в квадратни скоби
CF7 формите се пишат като шаблон с тагове. Примерно:
[text* your-name]е задължително текстово поле[email* your-email]е задължително поле за имейл с базова валидация- звездичката
*означава „задължително“
Това прави плъгина много удобен за copy/paste — можеш да си държиш готови шаблони, да ги ползваш между различни сайтове и да правиш промени за секунди.
Ето пример за минимална форма с 2 полета (име + имейл), която можеш директно да използваш като шаблон в Contact Form 7 (в таба „Форма“):
<p>
Твоето име<br />
[text* your-name autocomplete:name]
</p>
<p>
Твоят имейл<br />
[email* your-email autocomplete:email]
</p>
<p>
[submit "Изпрати"]
</p>autocomplete не е задължително, но помага на браузъра да попълва автоматично, което е малък UX бонус.
Важното, което много хора пропускат: какво точно пристига в имейла
Да направиш формата е половината работа. Другата половина е какво точно ще получиш по имейл. При Contact Form 7 това се контролира от Mail шаблона — там трябва да присъстват таговете (mail tags), които съвпадат с полетата във формата.
При „име + имейл“ логиката е проста: искаш да получиш уведомление с двете стойности и да можеш да отговориш директно на подателя. Тук е важно да се ползва Reply-To, вместо да се слага имейлът на посетителя като From (което често създава проблеми с доставката).
Примерен текст за съдържанието на имейла (Message body), който можеш да копираш в таба „Поща“:
Получихте нова заявка за контакт:
Име: [your-name]
Имейл: [your-email]И пример за допълнителна заглавка (Additional headers), за да можеш да отговаряш директно на подателя:
Reply-To: [your-email]Така като натиснеш „Отговор“ в пощата, отговаряш директно на човека, без да копираш имейла му на ръка.
Shortcode: лесно вграждане почти навсякъде
CF7 работи със shortcode, което означава, че можеш да сложиш формата в страница, публикация, блок в Gutenberg, sidebar и т.н. Това е удобен и универсален подход, особено ако имаш повече от една форма.
Shortcode-ът изглежда горе-долу така (стойностите при теб ще са различни):
[contact-form-7 id="123" title="Прост контакт (2 полета)"]Малко UX подобрение без да добавяш нови полета
Ако искаш формата да изглежда по-изчистена, можеш да ползваш placeholder-и вместо текст над полетата:
<p>
[text* your-name placeholder "Твоето име" autocomplete:name]
</p>
<p>
[email* your-email placeholder "Твоят имейл" autocomplete:email]
</p>
<p>
[submit "Изпрати"]
</p>Само имай едно наум: placeholder-ът не е пълна замяна на етикет (label), особено за достъпност. За най-сигурния вариант етикетите над полетата си остават най-добрият избор.
Заключение
С Contact Form 7 можеш да направиш супер прост контактен формуляр с две полета, без излишни настройки и без page builder. Най-важното е да имаш коректни тагове и във формата, и в Mail шаблона, за да пристига информацията както трябва. После вече можеш да надграждаш — стилизация с CSS, анти-спам защита и по-добра доставяемост (SMTP) са най-честите следващи стъпки.
