Как да си добавим икони във формуляра за контакт на приставката „Contact Form 7“ в WordPress

Чудите ли се как да си персонализирате формуляра за контакт с икони и текст, използвайки приставката „Contact Form 7“ в WordPress?

Лично за мен потребителското изживяване е по-приятно, когато формата за контакт съдържа икони, които асоциират за потребител, email, тема, съобщение и телефонен номер.

Как става това?

Важно условие е шаблонът, който използвате да има възможност за използване на „Font Awesome“ (векторни икони) или ако няма такава, да добавите ръчно официалната им приставка за WordPress, която е достъпна за всички, които искат лесно да използват иконите в своите проекти.

Това е формуляра, който използвам в настоящ клиентски проект.

А това е кодът с желаните полета, икони и текст във формата за контакт:

<p><span class="fa fa-user"></span>[text* your-name placeholder "Вашите имена*"]</p>

<p><span class="fa fa-envelope"></span>[email* your-email placeholder "Email*"]</p>

<p><span class="fa fa-folder"></span>[text your-subject placeholder "Относно"]</p>

<p><span class="fa fa-pencil"></span>[textarea* your-message placeholder "Съобщение*"]</p>

<p><span class="fa fa-phone"></span>[textarea* your-message placeholder "Телефон за връзка с вас*"]</p>

[submit "Изпращане"]

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

Тук може да видите формата за контакт онлайн.

Ето кода, който използвам за промяна на стила:

The CSS styling code is:

.wpcf7-form input {
border-radius:6px;           /* Прави ръбовете заоблени на полето за e-mail*/
}
.wpcf7-form textarea {
border-radius:6px;           /* Прави ръбовете заоблени на полето за събщение*/
}

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{  
 padding-left: 45px;         /* Отстоянието на текста спрямо иконата */
}
.wpcf7 p{ position: relative; }
.wpcf7 p .fa{
  position: absolute;
  color: #666666;
  z-index: 100;
  font-size: 18px;
  top: 28%;
  left: 1.5%;
}
.wpcf7 p .fa-pencil{ top: 5%; left: 1.5%}

 /* Стил, който променя дизайна само на полета за въвеждане на текст */

  input[type=text], select, textarea {
  width: 100%; /* Пълна ширина */
  padding: 12px; /* Отстояние */ 
  border: 1px solid #ccc; /* Сиви рамки */
  border-radius: 4px; /* Заоблени рамки*/
  box-sizing: border-box; /* Уверете се, че подложката и ширината остават на мястото си */
  margin-top: 6px; /* Добавете горно поле */
  margin-bottom: 16px; /* Долно поле */
  resize: vertical /* Позволете на потребителя да преоразмерява вертикално текстовото поле (не хоризонтално) */
}

/* Оформете бутона за изпращане с определен цвят на фона и т.н. */

input[type=submit], {
  background-color: #F9DC08;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Когато премествате мишката върху бутона за изпращане, добавете по-тъмен цвят */
input[type=submit]:hover {
  background-color: #5B5B5B;
}

Ако статията е била полезна за вас, ще се радвам да я споделите!