Как добавить формы на свой сайт бесплатно
Если вы ищете простой и бесплатный способ добавить формы на свой сайт, у нас для вас хорошие новости! Разработчики предлагают решение в один клик, чтобы сократить ручную работу с HTML-кодом. Вы можете создавать формы для любого случая без кодирования. Создание многошаговых форм, интеграция с Zapier или Google Sites, условная логическая функция — все эти опции можно попробовать онлайн бесплатно. В этой статье объясняется, как это сделать.
Добавление форм на ваш сайт за считанные минуты
- Создайте бесплатную учетную запись в Elfsight.
- Перейдите в онлайн-конструктор виджетов Elfsight.
- Выберите нужный шаблон.
- Настройте виджет и нажмите «Сохранить».
- Скопируйте код установки формы.
- Вставьте HTML-код на свой сайт.
Вуаля! Вы легко встраиваете формы на свой сайт.
Плюсы и минусы конструктора форм Elfsight
Здесь вы можете увидеть реальную картину, которая может помочь вам решить, соответствует ли решение по добавлению форм, предлагаемое Elfsight, вашим потребностям.
Прежде всего, вот список преимуществ, которые вы можете получить с помощью конструктора:
- Формы поддерживаются большинством конструкторов веб-сайтов и не требуют никаких знаний кодирования для интеграции;
- Вы можете создать виджет формы бесплатно, используя бесплатный план, или подписаться на один из платных планов, чтобы получить больше функциональности;
- Если вы не полностью удовлетворены конструктором, вы можете запросить возврат средств в течение 14 дней с даты онлайн-подписки;
- Если у вас возникли какие-либо проблемы, вы можете обратиться в службу поддержки клиентов, которая всегда поможет вам встроить форму в онлайн;
- Имеются функции отчетности и сбора данных, которые помогут вам проанализировать эффективность конструктора на веб-сайте;
- Благодаря разнообразным шаблонам форм вы можете собирать отзывы клиентов на своем веб-сайте и использовать их для ремаркетинга.
Хотя есть много преимуществ, следует упомянуть и некоторые недостатки:
- Нет возможности ежегодной подписки и функции пожизненной подписки;
- Когда вы начинаете работу с конструктором, рейтинг производительности сайта может упасть примерно на 3%;
- Это простое решение, которое вряд ли может конкурировать с функциональностью встроенных плагинов;
- На сайте меньше возможностей для взаимодействия.
Учет всех моментов поможет вам принять взвешенное решение о том, стоит ли его пробовать.
Список функций виджета форм
В этой таблице вы можете увидеть полную функциональность готового к использованию решения для встраивания онлайн-форм с помощью Elfsight.
| Любые типы форм | С помощью конструктора форм Elfsight вы можете создать любую форму для встраивания на свой веб-сайт. Это универсальный инструмент, который позволяет вам создавать контактную форму, опрос или любую другую форму, которая вам нужна онлайн, в одном месте. |
| Гибкая компоновка | Генератор предлагает вам гибкие возможности настройки макета в режиме онлайн в соответствии с потребностями вашего веб-сайта, такие как: возможность разбивать поля на столбцы для создания уникального вида; возможность редактировать метки по мере необходимости — вы можете скрыть их, если требуется, или создать общую метку для каждой группы полей; возможность создания полностью горизонтальной формы; возможность редактирования ширины формы; возможность структурировать форму с помощью различных элементов меток, заголовков и абзацев. |
| Многостраничные формы | Если вам нужно разделить форму на несколько страниц, просто задайте количество страниц и распределите поля на них. Затем вы можете продолжить настраивать страницы своего веб-сайта в Интернете, добавив заголовок и описание к каждой странице. |
| 20 элементов формы | Благодаря 20 различным элементам онлайн-формы виджет можно использовать для создания любой формы, которую вы хотите. К ним относятся: длинные и короткие тексты; различные онлайн-шкалы (большие пальцы, смайлы, звезды и цифры); адаптивные параметры даты и времени; и многое другое. Кроме того, все поля можно изменять по мере необходимости. Например, в онлайн-редакторе Elfsight вы можете настроить обязательные поля вашей адаптивной формы, форматы даты и времени, файлы, доступные для загрузки и т. д. |
| Стилизация формы | Вы можете создать уникальный дизайн для своей формы без какого-либо кодирования: выберите светлый или темный режим, добавьте свой собственный фирменный цвет, установите определенный дизайн для полей формы или измените шрифт. А если вам нужен уникальный вид для вашей адаптивной формы, вы можете легко добиться этого, индивидуально изменив каждый из ее компонентов через онлайн-редактор. |
| Заголовок формы | Вы можете назначить заголовок форме и дать ей название и описание. Также есть возможность добавить изображение обложки веб-сайта и логотип вашего бренда. Заголовок позволяет улучшить внешний вид вашей адаптивной формы, что особенно актуально, если вы используете формы за пределами веб-сайта по ссылке. |
| Плавающие формы | Вы можете выбрать, как форма будет встроена в веб-сайт: либо она будет вставлена непосредственно в область контента (встроенная форма), либо будет плавающая кнопка, которая при нажатии на нее будет открывать панель с вашей формой (плавающая форма). |
| Интеграции | Адаптивные формы Elfsight можно интегрировать с такими онлайн-сервисами, как Mailchimp и Google Sheets, чтобы обеспечить эффективный сбор статистики пользователей. Таким образом, все данные из ваших форм будут отправляться напрямую в один из этих сервисов, если вы добавите эту функцию в онлайн-редактор. Еще один доступный сервис для добавления — Zapier, который позволяет интегрировать информацию из форм вашего веб-сайта с более чем 5000 сервисов и решать практически любые задачи интеграции. |
| Защита от спама | Чтобы обеспечить наилучший опыт работы с виджетом, формы поддерживают Google reCAPTCHA. Google reCAPTCHA — это бесплатное, но мощное решение для защиты ваших форм от спама. Оно невидимо, поэтому клиентам не нужно проходить через флажок на веб-сайте, так как все происходит автоматически. Однако спам-ботам определенно придется нелегко. |
| Уведомления по электронной почте | В онлайн-редакторе вы можете настроить различные уведомления по электронной почте при заполнении формы. Например, отправить себе письмо со всей информацией из формы. Или отправить письмо клиенту после того, как он заполнит форму онлайн на вашем веб-сайте (функция автоответчика). Для каждого уведомления вы можете настроить все адаптивные параметры доставки и настроить шаблон электронной почты. |
| Действия после отправки | Вы сами решаете, какое действие произойдет после отправки формы: будет ли отображаться сообщение об успешном завершении, произойдет перенаправление на другую страницу веб-сайта или форма просто исчезнет. Каждое действие можно дополнительно настроить без кода в онлайн-редакторе форм. |
| Предварительное заполнение форм с параметрами URL | Для более глубокой интеграции форм вы можете настроить предварительное заполнение определенных полей по умолчанию с помощью параметров URL. Например, если вы знаете, что ваш клиент заинтересован в определенном продукте или услуге, вы можете предоставить ему ссылку на веб-сайт с уже указанным параметром. Таким образом, соответствующее поле в форме будет автоматически предварительно заполнено, опять же без каких-либо усилий по кодированию. Вы также можете добавлять адаптивную аналитическую информацию с помощью скрытых полей и предварительно заполнять их с помощью параметров URL. |
| Многоязычные формы | Все поля вашей настроенной формы могут быть переведены на любой язык, вот лишь некоторые из них: испанский, французский, итальянский, португальский, сербский и многие, многие другие. |
Подробные руководства по встраиванию форм в различные конструкторы веб-сайтов
Вот простое руководство по встраиванию формы, созданной и настроенной вами онлайн, на любой веб-сайт. Все, что вам нужно, это вставить код виджета формы в поле HTML на вашем веб-сайте. Готово, внимание, марш!
- Никаких затрат: оба варианта создания формы и тестирования ее функциональности бесплатны;
- Если вы хотите внести изменения в существующую форму, вы можете сделать это онлайн в панели администратора Elfsight. Поэтому нет необходимости редактировать код платформы, чтобы изменить форму.
- Все ваши обновления адаптивных форм автоматизированы, поэтому с вашей стороны не требуется никакой ручной работы.
С этими пошаговыми инструкциями вы увидите, что встраивание форм на любой сайт настолько просто, что это могут сделать даже непрофессионалы в программировании. Вы можете посмотреть видео, чтобы убедиться:
Вот краткий отрывок из видео, который вы также можете посмотреть:
- Зарегистрируйтесь бесплатно в Elfsight и перейдите в панель администратора;
- Создайте адаптивную форму в конструкторе виджетов;
- Сохраните конструктор форм после завершения всех настроек;
- Скопируйте код установки формы из popup;
- Перейдите на свой сайт и вставьте код формы в поле HTML.
Теперь посмотрите, как это фантастически просто! После того, как вы закончите, перейдите на свой сайт и проверьте производительность вашего адаптивного конструктора форм. А если у вас возникнут какие-либо трудности, команда поддержки Elfsight всегда доступна онлайн!
Как встроить формы в WordPress
Здесь вы узнаете, как добавить конструктор HTML-форм на свой сайт WordPress. Существует две отдельные инструкции, поскольку некоторые пользователи платформы Elementor предпочитают использовать стандартный редактор сайтов WordPress вместо стандартного редактора сайтов WordPress. Посмотрите их:
Вариант 1: для тех, кто использует онлайн-редактор WordPress
Итак, вы создали адаптивную форму и настроили ее в панели управления Elfsight. Теперь, после внесения всех изменений, откройте свой веб-сайт WordPress и перейдите в панель администратора. Затем вам нужно вставить код виджета формы Elfsight в поле HTML-кода. Следуйте инструкциям:
- Создайте форму в онлайн-конструкторе Elfsight.
- Скопируйте код установки формы.
- Войдите на свой сайт WordPress.
- Перейдите в раздел «Страницы».
- Выберите страницу для размещения формы.
- Добавьте пользовательский блок кода HTML в нужное место.
- Вставьте код формы из бесплатного конструктора виджетов.
- Нажмите «Обновить» и сохраните изменения.
После того, как виджет будет встроен на ваш сайт, все изменения можно будет вносить бесплатно прямо из панели администратора Elfsight. Они автоматически появятся в вашем конструкторе форм. Поэтому вам не придется редактировать созданные вами формы на сайте WordPress.
Вариант 2: Для тех, кто использует Elementor
Если вы выберете Elementor, вот краткое руководство для вас:
- Создайте свою собственную форму в Elfsight.
- Скопируйте код установки формы.
- Перейдите в панель администратора на сайте WordPress.
- Выберите нужную страницу, чтобы добавить форму.
- Перейдите в менеджер страниц или список страниц.
- Выберите опцию «Изменить с помощью Elementor».
- Перетащите элемент «HTML», чтобы добавить форму на страницу.
- Нажмите «Обновить», чтобы сохранить изменения.
Следуйте руководству, чтобы добавить код виджета формы на каждую страницу WordPress, созданную с помощью Elementor. Следуйте инструкциям на каждой странице по отдельности, и ваш адаптивный конструктор форм появится на вашем сайте за считанные секунды.
Встраивание форм на HTML-сайт Wix
Чтобы добавить конструктор форм на свой сайт Wix, сначала откройте панель инструментов Wix. Затем найдите опцию встраивания пользовательского HTML-кода на свой сайт и выполните следующие действия:
- Перейдите в панель администратора Elfsight.
- Создайте форму и нажмите «Сохранить».
- Скопируйте код виджета формы, отображаемый во всплывающем окне.
- Войдите в панель администратора сайта Wix.
- Перейдите в раздел «Настройки».
- Выберите опцию «Пользовательский код».
- Появится поле «Добавить пользовательский код».
- Здесь вам нужно вставить код формы.
Готово! Вы можете зайти на Wix и посмотреть, как работает ваш бесплатный и адаптивный конструктор. И когда вы вносите изменения в свои формы, они автоматически появляются на сайте Wix. В этой статье описывается, как легко добавить форму на сайты Wix.
One way to add forms to Squarespace
Вот краткое руководство по добавлению конструктора HTML-форм в Squarespace:
- Войдите в панель управления Elfsight.
- Создайте форму в конструкторе виджетов.
- Скопируйте код, чтобы установить форму.
- Войдите в панель администратора Squarespace.
- Перейдите в редактор сайта Squarespace.
- Нажмите «Блок кода», чтобы вставить код формы.
- Нажмите клавишу, чтобы сохранить изменения.
- Проверьте виджет на сайте Squarespace.
После сохранения изменений вы можете сразу же опубликовать свою форму на сайте Squarespace. Вам не нужно работать с HTML-кодом на платформе. После внесения изменений в панель администратора Elfsight они автоматически появятся на вашем сайте.
Как добавить формы на HTML-сайт в Shopify
Ниже вы увидите руководство, которое поможет вам встроить адаптивный виджет Elfsight на ваш сайт Shopify:
- Войдите в панель администратора Elfsight.
- Создайте форму с помощью онлайн-конструктора.
- Нажмите кнопку, чтобы сохранить прогресс.
- Скопируйте код формы из всплывающего окна.
- Перейдите в панель администратора сайта Shopify.
- Выберите «Интернет-магазин» — «Настроить».
- Выберите «Добавить раздел» в меню.
- Перейдите в «Пользовательский контент», нажмите «Добавить».
- Удалите части по умолчанию на сайте.
- Перейдите в меню «Добавить содержимое».
- Вставьте код формы в поле «Пользовательский HTML».
- Сохраните и проверьте работоспособность виджета на сайте.
Если вам необходимо изменить внешний вид или функциональность адаптивного виджета, вы можете сделать это бесплатно в панели администратора Elfsight. Все изменения будут автоматически отражены на вашем сайте, то есть вам не нужно будет редактировать какой-либо код платформы.
Встраивание форм на HTML-сайт в Webflow
Следуйте краткому руководству по интеграции форм на ваш сайт Webflow:
- Запустите бесплатную демоверсию Elfsight, чтобы начать создавать форму.
- Выберите подходящий дизайн и функции виджета.
- Нажмите, чтобы сохранить, затем скопируйте код встраивания формы.
- Вставьте код виджета формы на домашнюю страницу Webflow.
- Сохраните изменения и проверьте функциональность адаптивного виджета.
Не стесняйтесь обращаться в службу поддержки, если у вас возникли проблемы со встраиванием кода веб-сайта. Они всегда готовы вам помочь.
Добавление форм на HTML-сайт в Google Sites
Должно быть два разных руководства, поскольку есть новая и старая версии Google Sites. Вот как добавить формы в одну из используемых вами версий.
Вариант 1. Новый веб-сайт Google Sites
- Создайте, настройте и сохраните свой виджет на elfsight.com.
- Скопируйте код настройки формы из всплывающего окна.
- Перейдите в редактор Google Sites и нажмите «Встроить».
- Выберите параметр «Код вставки», вставьте код вставки формы и нажмите «Далее».
- Отрегулируйте нужную ширину и высоту вашего адаптивного виджета.
Готово! Вы успешно встроили формы на свой сайт Google Sites.
Вариант 2. Классический (старый) сайт Google Sites
Этот вариант немного сложнее первого, но не волнуйтесь! С помощью этого руководства это не так страшно, как может показаться.
- Создайте адаптивный виджет в панели администратора Elfsight.
- Настройте все элементы в онлайн-конструкторе и нажмите «Сохранить».
- Получите код настройки формы из всплывающего окна.
Поскольку платформа не поддерживает код JS, вам нужно будет преобразовать ваш адаптивный виджет в iframe. Это необходимо сделать до того, как вы приступите к его встраиванию на сайт Google Sites. Нажмите на ссылку , чтобы получить инструкции, которые можно использовать для этого.
После установки виджета в iframe следуйте краткому руководству по встраиванию:
- Откройте редактор Google Sites и нажмите «Изменить».
- Нажмите «Изменить исходный код HTML», чтобы добавить новый элемент кода.
- Вставьте созданный iframe и нажмите «Обновить».
- Измените настройки и размер виджета с помощью «Свойства».
- Проверьте функциональность виджета на сайте Google Sites.
Разве это не было легко? Теперь ваш адаптивный виджет отлично работает на вашем сайте Google Sites! Если это не сработает, не стесняйтесь обращаться в службу поддержки Elfsight. Они всегда готовы вам помочь.
Как добавить формы на HTML-сайт в Blogger
Чтобы встроить формы на сайт в Blogger, выполните следующие действия:
- В панели администратора Elfsight создайте форму.
- Установите тему и нажмите «Сохранить изменения».
- Скопируйте HTML-код из всплывающего окна.
- Перейдите на домашнюю страницу Blogger и нажмите «Тема».
- Нажмите «Изменить HTML» и откройте страницу редактирования кода.
- Найдите тег «body», вставьте код после «div class».
- Нажмите «Сохранить» и наслаждайтесь мощью адаптивных виджетов.
Поздравляем! Вы встроили форму на свой сайт Blogger.
Что вам следует знать об использовании форм на своем сайте
Согласно статистике BuiltWith Trends, 40% из 1000 лучших веб-сайтов используют формы для сбора данных о пользователях. Неудивительно, что это так — были исследования, которые показывают, что формы ценятся клиентами и увеличивают конверсию. Вот несколько советов и фактов из этих исследований, которые вам обязательно стоит учесть перед установкой форм.
1. Может ли использование форм на сайте привести к увеличению продаж?
Конечно! Были исследования, которые показали, что использование форм может увеличить продажи. Например, согласно Venture Harbour многошаговые формы могут привести к увеличению конверсий на 300%.
«Одним из лучших открытий в моей карьере стало понимание того, насколько хорошо многошаговые формы конвертируют… В 2014 году я только что запустил онлайн-калькулятор для измерения «зон комфорта» людей… из-за природы инструмента традиционные веб-формы были для нас бесполезны. Нам нужно было собирать подробную информацию о пользователях, но длинные формы разрушали наши показатели конверсии. После множества исследований и тестирований мы наткнулись на концепцию многошаговые формы и разработали одну для нас… Многошаговая форма превратила 53% посетителей веб-сайта в лиды, несмотря на то, что им задавали много вопросов (включая адрес электронной почты, имя, номер телефона и зарплату)».
Маркус Тейлор
2. Когда собирать личную информацию пользователя?
Согласно исследованию, 65% посетителей веб-сайта заявили, что не будут отправлять форму, если потребуется «слишком много личной информации». И на это есть причина. Клиенты не хотят делиться такими данными, как свои номера телефонов или адреса электронной почты, с теми, кого они не знают. Поэтому такие поля вопросов в ваших формах могут вызвать подозрение у тех, кто впервые посещает ваш сайт.
«Соберите важную информацию, например номер телефона, как только вы завоюете доверие и ваш потенциальный клиент будет готов сделать следующий шаг вместе с вами.» (Huff Industrial Marketing, KoMarketing & BuyerZone)
3. Сколько полей должна содержать моя форма?
Были проведены различные исследования, в которых проверялось сокращение или расширение вопросов по содержанию формы. Еще раз спасибо Venture Harbour, мы можем увидеть, как длина формы влияет на ее эффективность. Результаты противоречивы и зависят от таких факторов, как:
- Тип конверсии: для регистрации по электронной почте и создания учетной записи требуются совершенно разные формы.
- Ожидания пользователей: если пользователи видят ценность в заполнении поля, они будут рады это сделать.
- Стимул: можете ли вы создать стимулы для уменьшения трения?
- Сколько информации вам требуется: иногда добавление трения — это цена, которую вы платите за качество лидов, а не за количество.
- Форматирование: многошаговые формы могут вмещать гораздо более длинные формы, отформатированные в дизайне, уменьшающем трение.
- Рекомендации: это рекомендации, а не правила. Принятые тенденции дизайна не всегда работают.
Если у вас есть вопросы без ответов
Теперь вы знаете, как легко добавлять формы в любой конструктор сайтов и почему они эффективны. Вы также знаете, что с помощью адаптивного виджета Elfsight вы можете создать любую нужную вам форму. Однако, если у вас все еще есть вопросы, которые не были освещены в статье, ознакомьтесь со следующими вариантами:
- Посетите Список пожеланий, чтобы предложить функции, которые вам нужны, но которых еще нет в конструкторе форм.
- Перейдите в Справочный центр, чтобы найти больше статей и руководства по Form Builder.
- Изучите существующие шаблоны виджета, из которых вы можете выбрать пользовательский инструмент.
- Общайтесь с единомышленниками и делитесь своими мыслями в сообществе Elfsight.
Мы надеемся, что эта статья была полезной. Пожалуйста, возвращайтесь, и спасибо за ваше внимание!
Помните, у нас есть и другие замечательные руководства. Например, вы можете узнать, как встроить Google Business Reviews на свой веб-сайт!
