Искате ли да персонализирате форма за контакт 7 с плъгина Elementor Essential Addons?
Contact Form 7 е един от най-популярните плъгини за създаване на формуляри в WordPress. Въпреки това, докато функциите му са мощни, персонализирането на външния вид на формулярите може да бъде ограничено без познаване на CSS.
с WordPress плъгин Формуляр за контакт 7 можете да създадете много видове формуляри, като формуляр за резервация или формуляр за качване на файл. Той предлага 14 типа полета, които можете да използвате, докато създавате формуляр.
Вижте също: Как да използвате уиджети/шаблони на Elementor като блокове на Гутенберг
Но един от често срещаните проблеми по отношение на плъгина Contact Form 7 е неговият процес на персонализиране. Формуляр за контакт 7 използва вашия стил по подразбиране WordPress тема активен. Можете да използвате различен стил, но ще са необходими CSS умения.
Тук идват Essential Addons за Elementor. Този плъгин предлага набор от инструменти за стилизиране и подобряване на вашите форми. С Essential Addons можете да персонализирате всеки аспект на вашите формуляри за контактен формуляр 7 директно от интерфейса на Elementor.
В тази статия ще проучим как да използвате този плъгин, за да трансформирате формулярите си във визуално привлекателни елементи.
Съдържание
Как да стилизирате формуляр за контактна форма 7 с основни добавки
Инсталиране и конфигуриране
Започнете с инсталиране и активиране Elementor et Форма за обратна връзка 7 на вашия WordPress сайт. Веднъж инсталиран, създайте основна форма, която ще стилизирате по-късно.
След това инсталирайте и активирайте Основни добавки за Elementor. Уверете се, че Elementor също е инсталиран и активен на вашия сайт. Essential Addons работи в тандем с Elementor, за да предложи разширени опции за персонализиране.
В таблото за управление на WordPress активирайте приспособлението „Формуляр за контакт 7“ в настройките на Essential Addons, ако още не сте го направили.
След като инсталирате и активирате, създайте нова страница (Страници – > Добавяне) и го редактирайте с Elementor.
Оформяне на формата с основни добавки
Преди да започнете процеса на персонализиране, задайте оформлението на страницата, като щракнете върху иконата на зъбно колело над страницата. Задайте оформлението от падащото меню. на Elementor с пълна ширина.
За да започнете да персонализирате, отидете до страницата, където искате да вмъкнете формуляра чрез редактора на Elementor. Добавете джаджата „ Формуляр за контакт на EA 7 » от Essential Addons към вашата страница.
След като формулярът е добавен, можете да започнете да го оформяте. Essential Addons ви позволява да променяте цветове, типографии, полета и др. Регулирайте външния вид на полетата, бутоните и съобщенията за грешки според вашите предпочитания.
Отидете в левия панел и изберете формата, чийто стил искате да персонализирате.
След като изберете формуляр, отидете до раздела Стил. Както можете да видите, можете да зададете няколко опции за стилизиране. Ето основните опции за стилизиране, които можете да зададете.
Ширина на формуляра, подравняване и фон
Под блока FormContainer, щракнете върху инструмента за избор на цвят в секцията Тип фон и задайте желания цвят за фона на формата. Можете да използвате плътен цвят или градиентен цвят като фон.
Прочетете още: Elementor: Как да импортирате или експортирате шаблони
За да зададете подравняването на формуляра, просто изберете предпочитаната от вас опция за подравняване в секцията Подравняване на формата.
За да зададете ширината на формуляра, задайте стойността на Максимална ширина на формуляра в полето Максимална ширина на формата.
Фоново поле, ширина на границата и радиус
За да определите фона на полетата, ширината и радиуса на границата, можете да отворите секцията Въвеждане и текстова област. Щракнете върху инструмента за избор на цвят на полето Цвят на фона за задаване на фона.
Можете също да зададете цвета на фона на полетата в режим на отстраняване на грешки, като щракнете върху раздела Фокус.
За да дефинирате ширината на полетата, можете да дефинирате стойността в полетата Ширина на входа. В този раздел можете също да зададете ширината на полето за текстово поле Ширина на текстовото поле.
За да зададете радиуса на границата, просто отидете да редактирате полето Граничен радиус и задайте стойността на границата, която предпочитате. Можете също да зададете типографията (семейство шрифтове, размер на шрифта, стил на шрифта), като щракнете върху иконата на молив в полето книгопечатане.
Етикети
Essential Addons също ви позволява да персонализирате стила на вашите етикети на формуляри. Можете да зададете цвета на текста, както и типографията. За да направите това, отворете опцията Етикети. Задайте цвета на текста, като щракнете върху инструмента за избор на цвят в полето Цвят на текста.
За да зададете типографията, щракнете върху иконата на молив в полето Книгопечатане.
Бутон за изпращане
За да персонализирате стила на бутона за изпращане, отворете блока Подаване на Бътън. От тук можете да зададете подравняване на бутоните, ширина, цвят на фона, цвят на текста, радиус на границата, както и типография.
Съобщение за грешка
За да персонализирате стила на съобщението за грешка, можете да отворите блока грешки. Можете да зададете цвета на текста на съобщението за грешка, типографията, цвета на фона на грешката при валидиране, цвета на текста на грешката при валидиране и т.н.
Можете да зададете няколко други опции за стилизиране. Можете да играете с левия панел, докато не сте доволни от стила на вашата форма.
Можете да добавите няколко други елемента към вашата страница, като използвате наличните джаджи, предлагани от Elementor и Essential Addons. Когато сте готови, щракнете върху бутона ПУБЛИКУВАНЕ в долната част на левия панел, за да публикувате страницата си.
Интегриране на формата в обикновена страница
След натискане на бутона ПУБЛИКУВАНЕ, вашата страница за контакт е публикувана. Самата страница се поддържа от Elementor. Ако предпочитате да добавите своя Формуляр за връзка 7 към обикновена страница (страница, създадена с Gutenberg, редакторът на WordPress по подразбиране), можете да инсталирате приставката Елементарни блокове за Гутенберг. Този плъгин ще конвертира шаблон на Elementor в блок Gutenberg.
За да регистрирате своя Формуляр за връзка като шаблон на Elementor щракнете върху бутона със стрелка до бутона ПУБЛИКУВА / АКТУАЛИЗИРА в левия панел и изберете Запази като шаблон.
Дайте име на вашия шаблон и щракнете върху бутона ЕНГРЕГИСТР.
Създайте нова страница (Страници – > Добавяне) и му дайте име като „свържете се с нас“ „контакт“ или друго име, което желаете.
Добавете нов блок и изберете Библиотека Elementor и изберете шаблона на формуляр Формуляр за връзка които току-що сте създали.
И сега току-що персонализирахте своя формуляр за контакт.
Тестване и оптимизация
След като формулярът е стилизиран, важно е да проверите дали се показва правилно на всички устройства. Тествайте отзивчивостта на формуляра с помощта на вградените инструменти на Elementor. Направете необходимите корекции, за да сте сигурни, че формулярът е идеално четим на мобилно устройство и таблет.
Освен това се уверете, че приложените стилове не влияят на ефективността на вашия сайт. Добре оформената форма трябва да остане бърза за зареждане. Ако е необходимо, оптимизирайте изображенията и минимизирайте визуалните ефекти, за да осигурите оптимална производителност.
Прочетете също ресурсите, свързани с тази статия
- Elementor : Как да създадете продуктова карта
- Elementor : Как да създадете раздел за членове на екипа
- Elementor : Как да създадете шестоъгълна карта с ефект
- Elementor : как да превъртите изображение при задържане
- Elementor : Как да добавите звуков ефект на бутон
Често задавани
Съвместими ли са Essential Addons с други добавки за формуляри?
Да, Essential Addons е съвместим с няколко други добавки, въпреки че някои специфични функции са предназначени за формуляр за контакт 7.
Мога ли да използвам Essential Addons без Elementor?
Не, Essential Addons работи само с Elementor, тъй като е разширение на този конструктор на страници.
Какво да направите, ако стилизацията не е приложена правилно?
Уверете се, че кешът на вашия сайт е изчистен и всички добавки са актуални. Ако проблемът продължава, проверете за възможни конфликти с други добавки или теми.
Заключение
Така че! Това е всичко за тази статия, която ви показва как да персонализирате формуляр за контактен формуляр 7 с Essential Addons. Следователно стилизирането на формуляр за контактна форма 7 с Essential Addons е ефективен начин да направите формулярите си по-привлекателни визуално, като същевременно поддържате отлично потребителско изживяване.
С добри практики за персонализиране можете да създавате формуляри, които не само привличат вниманието на потребителите, но и подсилват визуалната идентичност на вашия сайт. Не се колебайте да разгледате други функции на Essential Addons, за да отидете още по-далеч в персонализирането на вашия WordPress сайт.
Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни в Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...