В тази статия ще разберете как да създадете формуляр с безплатен Elementor.
Въпреки че приспособлението Form е достъпно само на Elementor ProТова не означава, че не можете да добавите формуляр с безплатната версия на Elementor.
Ако искате да включите формуляр в страница, създадена с безплатната версия на Elementor, има два метода, които ще разгледаме в тази статия.
ElementorКакто в професионалната, така и в безплатната си версия, той предлага два уиджета за създаване на формуляри: HTML уиджета и уиджета за къси кодове. HTML уиджетът ви позволява да вградите формуляр с помощта на HTML код, докато уиджетът за къси кодове ви позволява да вградите формуляр от плъгини за формуляри, които използват къси кодове, като например Contact Form 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 кода на формуляра в определеното поле. Формулярът ще се появи на страницата веднага.
Стъпка 6: Персонализиране и стилизиране на формуляра
Формулярът, който сте интегрирали, автоматично ще приеме основния стил на вашата WordPress тема. Ако обаче искате да го персонализирате допълнително, можете да добавите персонализиран CSS, за да коригирате цветове, полета, шрифтове и други. Това изисква известни познания за CSS или помощта на разработчик, ако е необходимо.
Стъпка 7: Преглед и публикуване
След като формулярът ви е интегриран и стилизиран, отделете време да прегледате страницата, за да се уверите, че всичко се показва правилно. Тествайте формуляра, за да се уверите, че функционира както се очаква. Когато сте доволни от резултата, публикувайте страницата.
Вижте също: Как да използвате уиджети/шаблони на Elementor като блокове на Гутенберг
Едно важно нещо, което трябва да отбележите: Ако вашият HTML формуляр използва външен CSS, изображения или JavaScript за стилизиране, не забравяйте да качите папките, съдържащи CSS, изображения и JavaScript файлове, в главната директория на вашия уебсайт.
Използването на HTML уиджет за създаване на формуляр в безплатната версия на Elementor е просто и гъвкаво решение. Въпреки че изисква малко повече работа от уиджета за формуляри, наличен в Pro версията, това е ефективен начин да добавите функционални формуляри към вашия сайт без допълнителни разходи.
Чрез комбиниране на възможностите на Elementor с малко HTML код, можете да създавате формуляри, съобразени с вашите нужди, като същевременно запазвате визуалната последователност на вашия сайт.
Създайте безплатен формуляр на Elementor, като използвате формуляр за контакт 7 в 7 стъпки
Създаването на формуляр с безплатната версия на Elementor може лесно да се осъществи с помощта на популярен плъгин за формуляр за контакт 7. Този плъгин предлага прост и ефективен метод за вграждане на формуляри във вашите страници на Elementor, без да изисква никакви познания по кодиране.
Има много други плъгини за формуляри, но ние препоръчваме Contact Form 7, тъй като е най-популярният плъгин за формуляри за WordPress и е напълно безплатен.
Стъпка 1: Инсталирайте и активирайте Формуляр за контакт 7
За да започнете, трябва да инсталирате и активирате плъгина Contact Form 7 на вашия WordPress сайт. Отидете в таблото за управление на WordPress, отидете на Разширения> ДобавянеСлед това потърсете „Contact Form 7“. След като намерите плъгина, кликнете върху него. инсталиране на предприятието, след това активирате след като инсталацията приключи.
Стъпка 2: Създайте нов формуляр
След като приставката е активирана, можете да създадете формуляр. За да направите това, отидете на Контакт > Добавяне на нов във вашето табло за управление на WordPress. Дайте име на вашия формуляр, за да го разпознаете лесно по-късно.
По подразбиране, Contact Form 7 ви предлага основна форма за контакт с полета за име, имейл, тема и съобщение. Можете да използвате тази форма такава, каквато е, или да персонализирате полетата според вашите нужди.
Ако искате да добавите ново поле, поставете курсора си в областта, където искате да го добавите (можете да го поставите под или над съществуващо поле). Добавете етикет за новото поле на формуляра във формата <label> votre label préféré </label>.
Поставете курсора си точно след етикета на полето, което искате да промените, или след последното съществуващо поле. След това изберете типа поле, което искате да добавите, от раздела. ШампионЗа да подобрите четимостта и организацията на формуляра си, можете да вмъкнете разделител на ред след всяко ново поле, което ще направи формуляра по-ясен и подравнен с останалите съществуващи полета.
Попълнете полетата и щракнете върху Поставете маркера (можете да оставите всичко по подразбиране).
Формуляр за контакт 7 ще изпраща получените чрез вашия формуляр заявки на имейл адрес. Можете да зададете имейл адреса от раздела. E-mail.
Можете да отидете на раздела съобщения Ако желаете да замените съобщенията по подразбиране, можете да персонализирате съобщението, което се появява, след като посетителите ви успешно изпратят формуляра, съобщението за грешка, когато формулярът не е изпратен и т.н.
Кликнете върху бутона Enregistrer след като приключите с редактирането на формуляра.
Стъпка 3: Персонализирайте формуляра
Ако искате да промените или добавите допълнителни полета към формуляра си, можете да го направите директно в интерфейса на Contact Form 7. Можете да добавяте полета за телефонни номера, квадратчета за отметка или всякакъв друг вид данни, от които се нуждаете. След като приключите с промените, запазете формуляра.
Прочетете нашето ръководство за: Как да персонализирате формата Форма за обратна връзка 7
Стъпка 4: Вземете краткия код на формуляра
След като създадете и персонализирате вашия формуляр, Contact Form 7 ще ви предостави уникален кратък код. Този кратък код е от съществено значение за интегрирането на формуляра в страница на Elementor. Просто копирайте краткия код под името на формуляра.
Стъпка 5: Вградете формуляра в Elementor
След като вече имате шорткода, отворете страницата, където искате да добавите формуляра, като използвате редактора на Elementor. Добавете нов раздел или изберете съществуващ, където да се появи формулярът.
Намерете уиджета „Shortcode“ в панела с уиджети на Elementor, след което го плъзнете в желаната секция. Поставете предварително копирания кратък код в определеното поле.
Стъпка 6: Персонализирайте и стилизирайте формуляра
Формулярът Contact Form 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 или да използвате добавки за формуляри с разширени функции в техните безплатни версии.
Други свързани ресурси
- Как да интегрирате ActiveCampaign с Elementor
- Как да интегрирате AWeber с Elementor
- Elementor Как да добавим анимацията на Лоти
- Elementor : Как да създадете вертикално проследяване на напредъкаВземете Elementor Pro сега!!!
Заключение
Това е всичко! С това завършва тази статия, която ви показва как да създадете формуляр с безплатната версия на Elementor. Ако имате някакви проблеми с разбирането, уведомете ни в коментарите. Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...