В тази статия ще разберете как да създадете формуляр с безплатен Elementor.

Въпреки че приспособлението Form е достъпно само на Elementor Pro, това не означава, че не можете да добавяте формуляри с безплатната версия на Elementor.

Ако искате да включите формуляр в страница, създадена с безплатната версия на Elementor, има два метода, които ще разгледаме в тази статия.

Elementor, в своята професионална и безплатна версия, предлага две джаджи, които ви позволяват да създавате формуляри. Това са джаджи за HTML и Shortcode. HTML приспособлението ви позволява да вградите формуляр с помощта на HTML код, докато приспособлението Shortcode ви позволява да вградите формуляр от добавки за формуляри, като използвате кратки кодове, като Форма за контакт 7.


Съдържание


Създайте формуляр с безплатната версия на Elementor с помощта на HTML Widget в 7 стъпки

Създаването на формуляр с безплатната версия на Elementor е напълно възможно, дори ако нямате достъп до изпълнимия модул Form, наличен в Pro версията. Ефективен метод е да използвате HTML уиджета, който ви позволява да вградите формуляр с помощта на HTML код.

Стъпка 1: Създайте нова страница или редактирайте съществуващата

За да започнете, създайте нова страница и я редактирайте с Elementor (Страници -> Добавяне). Можете също да редактирате съществуваща страница, ако желаете.

Създайте нова страница или променете съществуващата

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

конфигурирайте оформлението

Стъпка 2: Подгответе HTML кода на формуляра

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

Стъпка 3: Добавете нов раздел в Elementor

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

Щракнете върху бутона „+“, за да добавите раздел

След това изберете оформлението, което най-добре отговаря на вашата форма.

изберете оформлението

Стъпка 4: Вмъкнете HTML Widget

След като добавите раздела, намерете приспособлението „HTML“ в панела с приспособления вляво. Плъзнете и пуснете го в секцията, която сте създали. Тази джаджа ви позволява да вмъкнете HTML код директно на страницата.

Стъпка 5: Поставете HTML кода на формуляра

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

създайте формуляр с безплатен Elementor

Стъпка 6: Персонализиране и стилизиране на формуляра

Формата, която сте интегрирали, автоматично ще приеме основния ви стил WordPress тема. Ако обаче искате да го персонализирате допълнително, можете да добавите персонализиран CSS, за да коригирате цветове, полета, шрифтове и др. За целта трябва да имате познания по CSS или да наемете програмист, ако е необходимо.

Стъпка 7: Преглед и публикуване

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

Вижте също: Как да използвате уиджети/шаблони на Elementor като блокове на Гутенберг

Едно важно нещо, което трябва да отбележите: Ако вашият HTML формуляр използва външен CSS, изображения или JavaScript за стилизиране, не забравяйте да качите папките, съдържащи CSS, изображения и JavaScript файлове, в главната директория на вашия уебсайт.

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

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


Създайте безплатен формуляр на Elementor, като използвате формуляр за контакт 7 в 7 стъпки

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

Има много други добавки за формуляри, но ние препоръчваме Форма за контакт 7, защото това е най-популярният плъгин за формуляри за WordPress и е напълно безплатен.

Стъпка 1: Инсталирайте и активирайте Формуляр за контакт 7

За да започнете, трябва да инсталирате и активирате приставката Форма за контакт 7 на вашия WordPress сайт. Достъп до таблото за управление на WordPress, отидете на Разширения> Добавяне, след което потърсете „Формуляр за контакт 7“. След като приставката бъде намерена, щракнете инсталиране на предприятието, след това активирате une fois l'installation endée.

създайте формуляр с безплатен Elementor

Стъпка 2: Създайте нов формуляр

След като приставката е активирана, можете да създадете формуляр. За да направите това, отидете на Контакт > Добавяне на нов във вашето табло за управление на WordPress. Дайте име на вашия формуляр, за да го разпознаете лесно по-късно.

По подразбиране формуляр за контакт 7 ви предлага a Формуляр за връзка Основен, включително полета за име, имейл, тема и съобщение. Можете да използвате този формуляр както е или да персонализирате полетата според вашите нужди.

създайте формуляр с безплатен Elementor

Ако искате да добавите ново поле, поставете показалеца си в областта, където искате да добавите новото поле (можете да го поставите под или над съществуващо поле). Добавете етикет за ново поле на формуляр във формат <label> votre label préféré </label>.

създайте формуляр с безплатен Elementor

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

Попълнете полетата и щракнете върху Поставете маркера (можете да оставите всичко по подразбиране).

създайте формуляр с безплатен Elementor

Формуляр за контакт 7 ще изпрати изпратените чрез вашия формуляр заявки на имейл. Можете да зададете имейл от раздела E-mail.

създайте формуляр с безплатен Elementor

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

създайте формуляр с безплатен Elementor

Кликнете върху бутона Enregistrer след като приключите с редактирането на формуляра.

Стъпка 3: Персонализирайте формуляра

Ако искате да промените или добавите допълнителни полета към вашия формуляр, можете да го направите директно в интерфейса на формуляра за контакт 7. Можете да добавите полета за телефонни номера, квадратчета за отметка или всеки друг тип данни, включително необходимите ви. След като завършите промените си, запазете формуляра.

Прочетете нашето ръководство за: Как да персонализирате формата Форма за обратна връзка 7

Стъпка 4: Вземете краткия код на формуляра

След като създадете и персонализирате вашия формуляр, Contact Form 7 ще ви предостави уникален кратък код. Този кратък код е от съществено значение за интегрирането на формуляра в страница на Elementor. Просто копирайте краткия код под името на формуляра.

Стъпка 5: Вградете формуляра в Elementor

След като вече имате краткия код, отворете страницата, където искате да добавите формуляра, като използвате редактора на Elementor. Добавете нов раздел или изберете съществуващ раздел, където трябва да се появи формулярът.

Намерете приспособлението „Кратък код“ в панела с приспособления Elementor, след което го плъзнете в избраната секция. Поставете краткия код, който сте копирали преди това, в предоставеното поле.

Стъпка 6: Персонализирайте и стилизирайте формуляра

Формулярът за контактна форма 7, интегриран в Elementor, ще приеме вашия стил WordPress тема. Ако желаете допълнително да персонализирате външния вид на формуляра, това може да стане чрез добавяне Персонализиран CSS. Можете да променяте цветове, полета, типография и други, за да приспособите формуляра към цялостния облик на вашия сайт.

Прочетете още: Как да деактивирате изскачащ прозорец на Elementor на смартфони

Стъпка 7: Тествайте и пуснете

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

Така че! Използвайки Contact Form 7 с безплатния Elementor, можете лесно да създавате функционални формуляри, без да харчите нито стотинка. Този метод е идеален за потребители, които искат основна, но ефективна функционалност, като същевременно запазват гъвкавостта да персонализират своята форма.

Формуляр за контакт 7, комбиниран с Elementor, ви дава стабилно решение за улавяне на съществена информация от вашите посетители.

Ако искате по-лесно персонализиране, можете да разгледате тази статия за това как да го направите персонализирайте формуляр за контактна форма 7 с помощта на Essential Addons и Elementor.


ЧЗВ: Как да създадете формуляр с безплатната версия на Elementor

Мога ли да създам формуляр с безплатната версия на Elementor?

Да, можете да създадете формуляр с безплатната версия на Elementor, като използвате HTML или Shortcode widgets. Въпреки че приспособлението Form е запазено за Pro версията, има ефективни безплатни алтернативи.

Какви са методите за създаване на формуляр в безплатния Elementor?

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

Как да добавите HTML формуляр към страница на Elementor?

Използвайте HTML изпълнимия модул в Elementor, за да вмъкнете HTML кода за вашия формуляр. Можете да поставите кода директно в полето за съдържание на джаджа.

Трябва ли да знам HTML, за да създам формуляр с безплатен Elementor?

Въпреки че помага, не се нуждаете от умения за HTML, ако използвате плъгин за формуляр като Contact Form 7, който генерира кратки кодове, които са лесни за вграждане.

Как да стилизирам форма, създадена с безплатен Elementor?

Ако използвате HTML формуляр, ще трябва да използвате CSS, за да го стилизирате. Формулярите, генерирани от плъгини като Contact Form 7, наследяват стила на вашия WordPress тема, но можете също да персонализирате стила с CSS.

Има ли безплатни добавки за създаване на формуляри с Elementor?

Да, добавки като Contact Form 7, WPForms Lite и Ninja Forms са популярни безплатни опции за създаване на формуляри, които можете да вградите в Elementor.

Как да интегрирам формуляр за контактен формуляр 7 в страница на Elementor?

Създайте своя формуляр във формуляр за контакт 7, след което копирайте генерирания кратък код. Използвайте приспособлението Shortcode на Elementor, за да вградите този формуляр на страницата си.

Какви са ограниченията на безплатната версия на Elementor за създаване на формуляри?

Безплатната версия на Elementor не предлага специален уиджет Form. За да създадете формуляри, ще трябва да използвате решения като HTML, кратки кодове или външни добавки.

Как мога да тествам своя формуляр, създаден с Elementor?

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

Възможно ли е да се използват разширени формуляри с безплатната версия на Elementor?

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

Други свързани ресурси

Заключение

Така че! Това е всичко за тази статия, която ви показва как да създадете формуляр с безплатната версия на Elementor. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни в Връзка.

Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...

Тя ПИН на Pinterest