Как легко разместить форму на вашем сайте

1. Создание формы в Survey Monkey
2. Создание формы в Google Forms
3. Создание формы в MailChimp
4. Создание формы в WordPress
5. Создание формы в PHP
6. Внедрение формы на ваш сайт
7. В заключение
8. Карлос Аугусто

Контактные формы. Каждый хочет их на своем сайте. Кажется, это довольно стандартный компонент, о котором каждый должен знать, как тыльная сторона его ладони. Но это не правда.

Снова и снова я сталкиваюсь с людьми, которые тянут свои волосы, пытаясь получить простую контактную форму (или любую форму) на своем сайте, или выполняют ее очень многословно и неэффективно.

Это руководство научит вас, как использовать лучшие инструменты для быстрого создания форм и встраивания их в ваш веб-сайт , будь то простой HTML / PHP-сайт или WordPress-сайт.

Мы начнем с использования сторонних компаний, таких как Survey Monkey и Google Forms, чтобы максимально быстро создать форму. Мы не будем тратить время на настройку цветов или что-то в этом роде. Это как сделать это БЫСТРО руководство. Затем мы покажем, как создать собственную форму в WordPress или в простом коде PHP. Последний раздел о получении этой формы на вашем сайте.

Создание формы в Survey Monkey

Сначала перейдите на surveymonkey.com и войдите в свою учетную запись или зарегистрируйте новую учетную запись. Если будет предложено, заполните начальные вопросы, чтобы перейти к первому экрану в их системе (см. Рисунок ниже). Затем вы можете либо начать с нуля, либо выбрать шаблон. Выберите первый шаблон, как показано на рисунке, чтобы мы могли показать вам, как быстро разместить его на своем сайте 🙂

Далее вам будет предложено множество вариантов распространения вашей формы по всему миру. Давайте, конечно, выберем «вставлять на сайт» (см. Рисунок ниже). Позже вы можете попробовать другие методы распространения.

Далее вам нужно выбрать «Embedded Survey» (см. Рисунок ниже).

Наконец, вы увидите код JavaScript, который активирует вашу новую форму опроса! Нажмите один раз на блок кода, и его текст будет выделен, как показано на рисунке ниже. Когда он выделен, просто нажмите Ctrl + C (или Cmd + C на компьютерах Apple), чтобы скопировать его.

Этот код будет вставлен на ваш сайт в разделе «Внедрение» ниже, и мы расскажем о том, как сделать это на обычном веб-сайте HTML5 и WordPress!

Создание формы в Google Forms

Чтобы получить доступ к Google Forms, вам сначала потребуется бесплатный аккаунт Gmail. Если у вас нет учетной записи Gmail, это ... неудачно. Но даже если вы не хотите иметь адрес Gmail для электронной почты, вы можете создать бесплатную учетную запись только для того, чтобы войти во все бесчисленные сервисы Google. Это обязательное условие для этого раздела. Я предполагаю, что вы можете войти в Google Диск с вашим именем пользователя аккаунта Google, которое, скорее всего, является вашим адресом Gmail.

Сначала перейдите по этому URL: http://drive.google.com , После входа в Google Диск вы увидите следующий экран, показанный ниже. Вы должны нажать «NEW», затем «More», затем «Google Forms» (как показано красным на рисунке ниже).

И вуаля! Вы сразу же перейдете к форме, готовой к настройке, как показано на следующем рисунке ниже. Нет процесса настройки. Никакого «волшебника». Мне действительно нравится эта часть форм Google. Вы сразу же переходите прямо к делу. И вы просто нажимаете на области, которые вы хотите редактировать, и печатаете прямо на экране. Там, где написано «Форма без названия», просто нажмите на нее и дайте имя.

Затем нажмите кнопку «Отправить», выделенную красным цветом на следующем рисунке. Обратите также внимание на названия примеров, которые я дал всем разделам формы, просто щелкнув по ним и напечатав.

Наконец, вы попадете в диалоговое окно «Отправить форму», где, как показано красным цветом, вы сначала захотите нажать кнопку «<>», чтобы получить доступ к HTML-встраиваемому коду, а затем просто нажмите «КОПИЯ». »В правом нижнем углу этого диалога. Это скопирует код встраивания в ваш буфер обмена.

Это оно! Вы вставите его на свой веб-сайт в разделе «Внедрение» ниже, и мы расскажем об этом как на обычном веб-сайте HTML5, так и на веб-сайте WordPress!

Создание формы в MailChimp

Сначала перейдите к MailChimp и войдите или создайте бесплатную учетную запись. MailChimp полностью сосредоточен только на формах сбора электронной почты. Это означает, что мы создадим простую форму, которую посетители вашего сайта будут использовать для подписки на ваш список, после чего вы сможете отправлять им все еженедельные или ежемесячные информационные бюллетени, обновления и т. Д. MailChimp - одна из лучших, самых чистых и простых использовать поставщиков списков рассылки там.

После того, как вы вошли в систему, вы должны нажать «Списки» в верхнем левом меню (см. Экран ниже). Затем нажмите кнопку «Создать список» справа. Вы попадете в простую форму, которую вы должны заполнить, чтобы создать свой список рассылки. Заполните это и нажмите «Далее», чтобы закончить этот шаг.

Теперь вы можете увидеть свой новый список на экране. Прокрутите вниз и нажмите «Создать форму регистрации», чтобы продолжить (см. Экран ниже).

На следующем экране вы захотите нажать кнопку «Выбрать» справа от «Встроенных форм» (см. Скриншот ниже).

Наконец, вы получите экран настройки формы (см. Ниже)! Для целей данного руководства оставим все как есть. Прокрутите вниз и нажмите на код (выделен синим цветом на скриншоте) и скопируйте его в буфер обмена.

Это оно! Вы вставите этот код на свой веб-сайт в разделе «Внедрение» ниже, и мы расскажем об этом как на обычном веб-сайте HTML5, так и на веб-сайте WordPress!

Создание формы в WordPress

Вот краткое руководство по самому быстрому и простому способу создания формы в WordPress. В этом руководстве предполагается, что у вас уже есть настроенный сайт WordPress. Мы начнем с панели инструментов, экрана, который вы видите при входе в вашу админ-панель WordPress. Сначала в левом меню боковой панели нажмите «Плагины» (как выделено красным ниже).

На следующем экране убедитесь, что вы нажали синюю кнопку «Добавить новый» (как выделено красным ниже), чтобы перейти к правильному экрану установки плагина.

Затем введите «WPForms» в поле, выделенном ниже.

Первое поле, которое появится, будет для «WPForms», одного из лучших плагинов для форм WordPress, доступных сегодня. Нажмите кнопку «Установить сейчас», как показано, и она изменится на синюю кнопку «Активировать». Нажмите на это также :).

Вы сразу же попадете на заставку WPForms, как показано ниже. Нажмите большую кнопку «Создать свою первую форму», как показано на рисунке.

Затем дайте форме название. Я выбрал «Скажи привет» для моего. Затем нажмите «Создать простую контактную форму», как выделено.

Вы сразу же попадете на экран с вашей формой, включая имя, фамилию и адрес электронной почты. Оставим все как есть на данный момент. Вы можете пойти и отредактировать вещи позже. На данный момент, нажмите на кнопку «Вставить», как показано ниже, и появится всплывающее окно. Я выделил код для встраивания синим цветом, но вам даже не нужно копировать этот код (вы поймете почему еще через несколько шагов). Просто нажмите «x», чтобы закрыть окно, а затем большую «x» в правом верхнем углу, чтобы выйти из интерфейса WPForms и вернуться в обычную область администрирования WordPress.

Теперь, когда вы вернулись в обычный режим WordPress, нажмите «Страницы», как показано ниже, в меню левой боковой панели. Здесь мы временно активируем форму.

Затем нажмите «Добавить новый» в левом верхнем углу (как показано ниже).

Теперь вы будете на экране редактирования страницы. Вы, вероятно, не увидите большие фиолетовые кнопки «Divi Editor», которые у меня есть, но проигнорируйте это. Вы увидите выделенную кнопку «Добавить форму». Эта кнопка существует, потому что вы установили плагин WPForms (плагины WordPress могут фактически добавлять маленькие меню и кнопки повсюду). Нажмите здесь.

Вы увидите всплывающее окно с нашей формой «Скажи привет», которое отображается в качестве первого варианта в раскрывающемся списке. Просто нажмите синюю кнопку «Добавить форму» в правом нижнем углу этого окна, чтобы двигаться дальше.

Теперь вы увидите текст шорткода, который вам не нужно было копировать ранее, автоматически вставленный в область редактирования :). Теперь просто нажмите синюю кнопку «Опубликовать», как показано ниже.

Как только это будет сделано, в верхней части экрана вы увидите поле с надписью «Страница опубликована. Просмотр страницы". Нажмите на эту ссылку (как показано), чтобы просмотреть вашу новую живую форму!

Да, основная форма. Выглядит хорошо! Если вы заполните его и нажмете «Отправить», оно будет отправлено на адрес электронной почты, указанный в качестве адреса электронной почты администратора WordPress. Давайте вернемся и дважды проверим, что у вас есть то, что вы хотите. Закройте свою живую форму и вернитесь в админку WordPress.

Снова, в левом меню боковой панели, нажмите «Пользователи» (как показано синим цветом ниже). Первый пользователь - это учетная запись администратора, и убедитесь, что адрес электронной почты правильный. Если нет, или если вы не администратор, вы можете вернуться к экрану настроек WPForms, щелкнув «WPForms» в боковом меню слева (всего три над «Users» ;-).

Это оно! Обязательно заполните свою форму и убедитесь, что она идет по указанному вами адресу электронной почты правильно. Вы можете добавить форму на любую страницу или запись в блоге, нажав эту кнопку «Добавить форму» на любой странице или экране редактирования сообщения.

Что хорошего в WPForms, так это то, что с профессиональной версией вы можете получить плагины для MailChimp и множество других маркетинговых инструментов. Я также нахожу, что его интерфейс плагина действительно изящный и хорошо разработанный. Gravity Forms и Ninja Forms - это еще два хорошо известных замечательных плагина для WordPress форм, которые вы также можете попробовать.

Создание формы в PHP

В этом разделе будут описаны основные этапы создания формы на простом PHP для вашего сайта. Это чистый HTML и PHP-код - без WordPress, без встраивания сторонней формы, просто с помощью чистого кода! Это, безусловно, самый сложный метод, и шаги в этом разделе могут породить для вас гораздо больше вопросов, чем шагов! Тем не менее, почти любой хороший создатель контента, маркетолог или владелец основного веб-сайта должен иметь базовые знания этих инструментов и этого метода редактирования веб-сайта.

Мы начнем с основного поиска Google для «php contact form». Google автоматически предложил добавить «с проверкой» в мой поиск, и как веб-разработчик я согласился (см. Изображение ниже) - проверка в основном означает маленькие сообщения это всплывающее окно, когда вы оставляете поле формы пустым, например, которое говорит: «это поле не может быть пустым».

В красном круге, показанном ниже, я показываю результаты поиска на GitHub , огромном сообществе, где обычно великие разработчики делятся своим кодом. Лучшие инженеры в мире, которые получают шестизначную зарплату, демонстрируют свою работу на GitHub. Кроме того, любой проект на GitHub можно загрузить без раздражающих всплывающих окон с подпиской на электронную почту. Давайте проверим это!

Зайдя на GitHub, найдите зеленую кнопку «Клонировать или скачать» в правой части страницы. Нажмите на него, чтобы открыть небольшое всплывающее окно. Нажмите «Скачать ZIP» (выделено ниже). Если вы опытный разработчик, вы можете клонировать проект в свой собственный мерзавец репозиторий (в честь которого назван GitHub), но если бы вы знали, как это сделать, вы, вероятно, не читали бы это руководство ;-).

ZIP-файл уже загружен в вашу папку загрузок, но прежде чем искать его, я должен подчеркнуть, что вы должны прокручивать страницу вниз каждый раз, когда вы находитесь на GitHub, и читать (или, по крайней мере, просматривать) документацию по проекту! Это то, что те вышеупомянутые опытные инженеры назвали бы RTFM, что сокращенно означает «Read The…. хм… Fahrvergnügen… Руководство ”😛

В выделенном разделе ниже вы видите, что вы должны отредактировать файл с именем «config.php» и указать, какими будут ваши адреса электронной почты и адреса электронной почты, чтобы контактная форма могла правильно отправлять электронные письма. Если бы вы просто бросились прямо к ZIP-файлу, вы бы потеряли и разочаровались в течение сотен часов, пока вы не бросили свой компьютер на скалу, рядом с которой вы оказались, работая над этой формой контакта.

На следующем экране ниже я показываю ZIP-файл, который был загружен в мою папку «Загрузки» в OS X, которую я использую на своем MacBook Pro. Если бы у меня была машина с Windows, это, конечно, могло бы быть в другом месте.

Обратите внимание, что внутри внешней папки есть группа файлов и папка с именем «contact-form» в верхней части списка. Как правило, этот внешний список файлов очень полезен для разработчиков, и вам не нужно об этом беспокоиться. Например, файл с именем «README.md» в действительности представляет собой ту же самую информацию в инструкциях к любому проекту Github, которую я прочитал на предыдущем шаге. Таким образом, основной шаблон заключается в том, что вы берете папку проекта (в данном случае «контакт-форма») и просто перетаскиваете ее в свою программу FTP, чтобы загрузить ее на свой веб-сайт.

Опять же, этот шаг может сильно отличаться для Mac, Windows, Linux и любого используемого вами FTP-клиента. Я использую Mac OS X с последней версией передавать (версия 5), возможно, лучший из когда-либо созданных FTP-клиентов! Я уже установил соединение с моим сайтом в настройках Transmit (вам нужно знать, как это сделать с вашим FTP-клиентом). Но как только вы войдете, вы увидите что-то вроде экрана ниже, где перечислены все файлы моего сайта. Обратите внимание, что в красном круге ниже я просто перетащил папку «контактная форма» в окно FTP, и она была загружена на мой веб-сайт. (Я также переименовал его в «_contact-form» с подчеркиванием в начале имени файла, чтобы он шел первым в списке по алфавиту.)

Также обратите внимание, что я нахожусь в папке «contact-form», которая содержит папку «config», и внутри нее находится наш специальный файл «config.php». Это тот, который вы знаете, вы должны отредактировать, если вы читали инструкции GitHub выше! Одна очень крутая вещь в Transmit - это то, что я могу настроить его так, чтобы открывать любые текстовые файлы, которые я дважды щелкаю прямо в моем текстовом редакторе, Возвышенный текст 3 (который является одним из лучших редакторов кода на планете)! Это позволяет мне пропустить весь процесс загрузки файла, открытия загруженного файла и его повторной загрузки после редактирования. Вместо этого он просто открывается прямо в Sublime Text (с цветным кодом для загрузки), и когда я нажимаю Cmd + S (чтобы сохранить файл), он автоматически перезагружается на мой сайт!

Ниже вы увидите, как выглядит мой текстовый редактор. Я выделил часть, которую нам нужно отредактировать, желтым цветом. Обратите внимание, что я заполнил соответствующие разделы своими адресами электронной почты. Я поместил свой личный адрес электронной почты в раздел « to », а раздел « from » - из адреса «webform», что нормально; это всего лишь простой тест контактной формы. Реальная установка могла бы использовать «info @» или «no-reply @».

ХОРОШО! После редактирования этого файла наша контактная форма готова! Мы можем перейти прямо к живому URL: http://plu.sx/_contact-form/index.php , Обратите внимание, что форма выглядит довольно красиво, и проверка формы работает, если вы попытаетесь нажать «Отправить», не заполнив все.

Как только вы правильно заполните форму, после нажатия кнопки «Отправить» вы попадете на последний экран. В сообщении формы отображается сообщение «Сообщение успешно отправлено». Отлично!

Но будьте осторожны! Тот факт, что контактная форма считает, что сообщение отправлено вам, не означает, что вы получите электронное письмо. Опять же, этот шаг может сильно отличаться, поскольку существуют тысячи настроек серверов, компаний, предоставляющих услуги веб-хостинга, и конфигурации PHP, которые могут вызвать любое количество проблем. Если вы на самом деле не получаете письмо, вам придется устранить неполадки на вашем сервере (или позвонить в вашу хостинговую компанию) и спросить их, что пошло не так. Взглянув на файл «SimpleMail.class.php», скрытый в папке «contact-form», я вижу, что он использует функцию PHP «sendmail ()» для обработки доставки электронной почты. К счастью для меня, это работало нормально без каких-либо дополнительных головных болей, и контактная форма работала нормально в этот момент.

Это оно! Как вы можете видеть, версия этого руководства на PHP очень сложна, сопряжена с потенциальными неудачами, ее трудно устранить, и она чревата ужасом! Теперь вы можете видеть, почему такие компании, как MailChimp, так успешны. Они обрабатывают все настройки сервера и код на своих концах и просто дают вам простой код для встраивания. Уровень сложности уменьшается до 99%, а простота использования увеличивается наоборот.

Но если вы настроены на использование решения PHP, тогда вы должны быть опытными в выполнении всех этих шагов, и, в конце концов, вы получите полный контроль над тем, как настроить форму и как она работает. Практически нет ограничений на то, что вы можете программировать с помощью HTML, PHP и Javascript. Например, вы можете отправить свою контактную форму по электронной почте, сохранить имя посетителя в отдельной базе данных и даже подключиться к MailChimp или любой другой службе, к которой мы обращались, и все это одним нажатием кнопки «Отправить».

Внедрение формы на ваш сайт

В этом разделе мы рассмотрим встраивание формы на ваш сайт, как в WordPress, так и в простом HTML.

Сначала выберите, какой код для вставки (который мы сгенерировали в одном из разделов выше) вы хотите использовать:

Вот наш код для встраивания MailChimp

Вот наш код для вставки SurveyMonkey

Вот наш код для вставки в Google Forms

Интересно, что каждый из этих сервисов использует свой подход встраивания. MailChimp просто дает вам простой блок HTML. SurveyMonkey предоставляет вам блок JavaScript, который создает форму HTML для вас. А формы Google дают вам iFrame, который похож на маленькое окошко прямо на их сайт. Каждый из этих методов требует, чтобы вы вставляли код где-то между тегами <body> </ body> на одной из ваших веб-страниц для простой HTML-страницы или в соответствующую область WordPress, если вы используете это. Давайте рассмотрим каждый:

Встраивание вашей формы в простой веб-сайт HTML

Вам понадобится FTP-клиент для доступа к файлам на вашем сайте и вставки кода внутри. В итоге вы получите страницу, похожую на эту демонстрационную страницу я подготовил на моем сайте ,

Здесь вы увидите контактные формы, которые мы создали выше, и если вы выберете Cmd + Opt + U в Google Chrome, вы откроете страницу «Просмотр источника», в которой будет отображен HTML-код этой страницы. Если вы прочитаете этот код, вы увидите, как различные приведенные выше коды были просто вставлены под верхний тег <body> страницы. Я добавил немного CSS для центрирования каждой формы в красивой рамке и вытащил их из серого фона, чтобы вам было легче их видеть.

Встраивание вашей формы в WordPress

Во-первых, вам нужно будет войти в свою панель управления WordPress. Опять же, это предполагает, что вы уже настроили WordPress. Поэтому в этом случае войдите в свою админ-панель WordPress, и мы начнем, щелкнув меню «Плагины» (обведено красным ниже). Затем нажмите кнопку «Добавить новый» в левом верхнем углу страницы плагинов, показанной ниже.

Примечание: мы собираемся найти и установить плагин XYZ Snippets, который поможет идеально сохранить HTML. Если вы попытаетесь вставить HTML или Javascript непосредственно в пост или страницу WordPress без какой-либо помощи от такого плагина, как этот, вы можете получить неожиданные эффекты, потому что WordPress любит автоматически добавлять кучу форматирующих материалов.

Теперь введите «вставить фрагмент HTML» в поле поиска плагина, и вы увидите экран ниже. Нажмите «Установить сейчас» (обведено красным ниже), затем сразу после нажмите «Активировать».

Как только вы это сделаете, у вас появится меню «XYZ Snippets» в левом боковом меню в WordPress. (См. Обведенное ниже.) Нажмите на него, чтобы перейти на страницу плагина, затем нажмите синюю кнопку «Добавить новый HTML-фрагмент» вверху страницы.

Теперь на следующем экране ниже давайте просто назовем фрагмент «Google Forms» и просто вставим HTML-код Google Forms, который мы показали выше, в форму. Наконец, просто нажмите «Создать».

Теперь вы увидите экран ниже, с коротким кодом фрагмента HTML, выделенным синим цветом ниже. Вы можете выбрать его здесь и скопировать, но вам не придется. Давайте просто двигаться дальше.

Нажмите на левую часть меню «Страницы», как показано ниже, затем либо нажмите «Добавить новый» в верхней части экрана, либо отредактируйте существующую страницу. Сейчас я отредактирую страницу «тестовой формы», которую мы создали в разделе выше.

Теперь проверьте область, обведенную красным, внизу. Опять же, плагины WordPress могут создавать новые кнопки во всей системе. Помните, что когда мы добавили плагин WPForms выше, мы получили новую кнопку «Добавить форму», и теперь у нас есть эта новая кнопка «Вставить фрагмент HTML». В меню вы увидите созданный нами фрагмент «Форма Google». Нажмите на него, и шорткод, который вам не нужно было копировать ранее, автоматически добавится в окно редактирования ниже! Я решил переместить шорткод Google Form в верхнюю часть окна для этой демонстрации (над шорткодом WPForms, который мы создали ранее). Наконец, нажмите синюю кнопку «Обновить», также обведенную красным ниже.

Наконец, нажмите «Просмотр страницы» (обведено красным ниже)!

Это приведет вас к вашей живой странице WordPress с, вуаля! Ваша форма Google хорошо вписана в. Вот живой URL: http://carlosaugusto.net/test-form ,

В заключение

Существует тысяча способов создания всевозможных форм с различными поставщиками, а также множество способов интеграции этих форм в ваш веб-сайт. Ясно, что мы увидели, что для неопытного (или не) разработчика создание собственной формы в чистом HTML и PHP может быть чрезвычайно трудным. Вот почему проектирование форм с использованием сторонних инструментов и сервисов так привлекательно.

Кроме того, у каждого провайдера форм есть свои уникальные особенности. MailChimp в основном сосредоточен на создании списков рассылки, что является важным маркетинговым инструментом. Google Forms больше ориентирован на создание красивой формы как можно быстрее и сбор данных опроса или любых других данных, которые вы можете себе представить. Наконец, SurveyMonkey сфокусирован на… как вы уже догадались. Обезьяны. (Шучу: опросы!)

Мой любимый метод в этом руководстве - создать форму в Google Forms и интегрировать ее в мою CMS, WordPress. Я очень рекомендую этот тип подхода по сравнению с веб-компонентами ручной работы, такими как формы, самостоятельно. Если вам нужна личная консультация по любой из этих тем или у вас есть предложения по улучшению этого руководства, не стесняйтесь обращаться ко мне (см. Мой профиль автора ниже).

Какой бы способ вы ни выбрали, чтобы получить формы на своем веб-сайте, я надеюсь, что это руководство дало вам хороший обзор того, как это делается быстро, а также множество действительно полезных инструментов.

Карлос Аугусто

я Карлос Аугусто Пионер-разработчик, который 15 лет разрабатывал Web 2.0 для таких компаний, как MySpace, Napster и DIRECTV. Так чем я могу вам помочь? Ну, сегодня я эксперт по цифровому маркетингу, SEO, копирайтингу и криптовалюте. После бесплатная 30 минутная консультация Я гарантирую, что мы немедленно найдем действенные способы улучшить ваш бизнес или вернуть ваши деньги . Серьезные запросы только, пожалуйста.

Последние сообщения от Carlos Augusto ( увидеть все )

Похожие

Комментарии