Как сделать кнопку web builder


Содержание

Введение
Основные шаги
Настройки WYSIWYG Web Builder
Интерфейс
Интерфейс WYSIWYG Web Builder 9 и 10
Язык интерфейса
Строка меню
Лента
Панель быстрого доступа
Менеджер сайта
Инспектор свойств
Менеджер резервирования
Издатель файлов
Мастер веб-формы
Master Page
Master Frames
Master Objects
Менеджер расширений
Менеджер активов
Менеджер объектов
Менеджер темы
Менеджер градиента
Менеджер стиля
Редактор стилей ссылок
Линейка, сетка, направляющие линии
Сайт

Шаблоны сайта
Свойства сайта
Обзор сайта
Карта сайта
Сайты для разных экранов


Страницы
Свойства страницы

Общие свойства
Стиль оформления
Мета- данные
Переадрессация
События
Оптимизация поискового сервера
Вес страницы
Особенности Internet Explorer
Название страницы

Импорт веб-страниц
Эффекты при прокрутке страницы
Объекты

Работа с объектами
Список объектов
Текст
Шрифты
Заполняющий текст
Спецсимволы
Списки
RollOver Text
Обтекание текста
Горизонтальная линия
Изображения
Rollover Image
Бегущая строка 
Карта ссылок
Баннер
ClipArt
Слайды
Фотоколлаж
Фотогалерея
Таблицы
Ссылки
Закладки (якоря)
Рамка (Inline Frame)
Мультипликация Flash
Мультипликация GIF
Мультипликация CSS 3
Объекты рисунка
Панели навигации
HTML5
YouTube  
Блог
Статья
Карусель
Держатель места
Рассылка новостей
Лента новостей
Поиск на сайте
Таймер
Верхний колонтитул
Нижний колонтитул
Java Scripts
Java апплеты
Примечания
Информационные бюллетени
Объекты jQuery
ThemeRoller
Вставка кода
Веб-формы
Объекты страниц коммерции
Значок (Favorites Icon)
И другие объекты


Расширения
События
Слои (уровни)
Создание мультипликации
Поиск ошибок
Администрирование
CMS
Предварительный просмотр
Публикация
Новое в последних версиях
Сотрудничество

Веб-формы


Введение
Форма предназначена, чтобы собрать информацию от посетителй Вашего сайта. При этом результаты опроса могут быть посланы по электронной почте. Если у Вашего веб-сервера есть необходимое обеспечение, Вы можете сохранить результаты формы в базе данных.
Для создания формы используйте:
  • Меню Insert - Form
  • Панель вставок - раздел Form Controls
  • Лента - вкладка Insert - Form
  • Контекстное меню - Insert - Form Controls
Для WYSIWYG Web Builder 9 и 10 - При вставке формы (Form Area) на ленте будет показан весь набор инструментов для работы с формами

Примечание: для версии WYSIWYG Web Builder 11 есть ряд изменений и дополнений при создании форм:
- новые опции при создании Editbox, TextArea
- при создании Combobox - добавление дополнения (padding)
- добавление выбора группы, чтобы сгруппировать связанные варианты в раскрывающемся списке.

Порядок создания формы в WYSIWYG Web Builder
1. Form Area -  контейнер для объектов формы (текстовых областей, флажков, радио-кнопок, списков и пр.). Все объекты формы должны быть установлены в область Form Area.Тяните объект Формы к странице и ничьи коробка, чтобы указать положение формы.
2. Проектируйте свою форму, добавляя средства управления, такие как Button, Image Button, Advanced Button, Checkbox, Radio button, Editbox, Text Area или Combobox. Вы заметите, что все объекты становятся частью формы, и при перемещении области формы все элементы формы также перемещаются.


Элементы формы
Объекты или элементы формы по-разному могут отражаться в разных браузерах, поэтому проверьте свою форму на всех браузерах и платформах.
Checkbox - Выключатель вкл\выкл
Combobox - Позволяет сделать выбор из нескольких вариантов
Editbox  - Область единственной строки, которая может использоваться, чтобы добавить области  name/e-mail.
File Upload  - Этот объект предоставляет средство пользователям, чтобы приложить файл к содержанию формы. Элемент предоставлен как текстовая область и связанная кнопка, хотя в некоторых браузерах это может появиться по-разному.
Image Button  - Вставляет объект Кнопки- изображения на форме.
Push Button  - Кнопка будет обычно использоваться как кнопка сброса на форме. Если кнопка не часть формы, она ничего не делает по умолчанию.
Radio button - Радио-кнопки похожа на checkboxes, за исключением того, что можно сделать только один выбор из нескольких вариантов.
TextArea  - многострочная область формы, где пользователь может ввести большое количество текста.
ActiveX
Вы используете средства управления ActiveX, чтобы включить заявление в Веб-страницу. Средства управления за ActiveX могут добавить свои способности, такие как проигрыватели аудио/кино, календари, свои кнопки или другие особенности к Вашим страницам. Некоторые средства управления ActiveX не поддерживают HTML как язык программирования и будут вести себя неожиданные, так что нужно убедиться в их правильной работе.
CAPTCHA
CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) - элемент формы, предназначенный для защиты от спама. Объект CAPTCHA  работает в комбинации с (PHP) формы, поэтому используется  на веб-сервере  с поддержкой PHP!
Подробнее о CAPTCHA - см. авторскую справку программы.


3. Удостоверьтесь, что Ваша форма содержит кнопку Submit (Button). Без этой кнопки пользователь будет не в состоянии представить введенные данные.
4. Как только Вы создали свою форму, Вы должны установить некоторые свойства. Выделите форму и выберите меню  Edit -> Properties (или дважды щелкните по форме для определения свойств формы, двойной щелчок по элементу формы открывает окно свойств элемента).
Самая важная вещь, которую Вы должны сделать, это определить действие формы. Например, чтобы послать введенные данныена Ваш адрес электронной почты, когда пользователь нажимает  кнопку Submit.
Примечание: Намного больше информации о формах доступно на сайте WYSIWYG Web Builder - в FAO (Frequently Asked Questions - Часто задаваемых вопросах, в обучающих программах онлайн и на форуме:
http://www.wysiwygwebbuilder.com/support.html
Form name  - Введите название для формы
Action (Действие) - Необходимый признак, определяя URL подлинника CGI, который обрабатывает форму и отсылает обратную связь назад. Есть два метода, чтобы послать данные формы в сервер -  GET и POST. Последний метод означает, что Вы можете послать большее количество данных.
Пример:  mailto:
Результаты заполнения формы будут посланы по электронной почте, используя клиента электронной почты посетителей по умолчанию.

Примечание: Мы не рекомендуем использовать метод ‘mailto’ HTML. Это очень ненадежно. Когда возможно, используйте встроенный обработчик формы PHP или создайте Ваш собственный обработчик.
Если Ваш веб-сервер поддерживает PHP, тогда, Вы можете использовать built-in PHP form processor - встроенный процессор формы PHP, который является вероятно самым легким способом осуществить обработку формы.


Вы можете также создать простую форму, используя PHP, как объяснено в этой обучающей программе: http://www.wysiwygwebbuilder.com/forms_php.html
Если Ваш сервер не поддерживает PHP, то Вы должны связаться со своим хостом и спросить у них детали относительно обработки форм.
Accept Charset - Применяемая кодировка. Большинством браузеров поддерживаются ISO-8859-1 или UTF-8.
Encoding type - Тип кодирования
По умолчанию "application/x-www-form-urlencoded" наиболее широко поддержан. Альтернатива - text/plain
Use Built-in PHP form processor to send data to an email address -Используйте Встроенный процессор формы PHP, чтобы послать данные по адресу электронной почты. После того, как пользователь ввел информацию в форму, Вы вероятно хотите обработать это так или иначе. WYSIWYG Web Builder имеет встроенный процессор формы. Он производит все основные действия - посылку электронной почты, сохранение к файлу на сервере или даже хранение в базе данных MySQL.
Вы будете в состоянии выбрать страницу благодарности (thank you), которая будет показана после того, как пользователь представил данные.
Email address - Адрес электронной почты, куда будут посылать данные
Subject - Предмет сообщения электронной почты.
Message -Сообщение. По умолчанию, сообщение пошлют как простой текст, но также возможно отформатировать текст. Щелкните кнопкой 'Edit', чтобы изменить формат сообщения. Выберите 'Rich text', чтобы использовать встроенного редактора, чтобы отформатировать текст (щелкните кнопкой 'Edit', чтобы открыть редактора), или выберите 'HTML', чтобы вставить Ваш собственный код HTML для сообщения (для передовых пользователей!).
Success page (required) - Страница успеха (требуется), Появляется, когда пользователь правильно заполнил форму.
Error page (required) - Ошибочная страница (требуется). Появляется, когда пользователь неправильно заполнил форму.
Write form data to a .csv file -Этот выбор сохранит представленные данные формы к отделенной картотеке данных  на веб-сервере. Вы сможете открыть этот файл в Microsoft Excel, редакторе текста или импортируете в базу данных.
Отметьте, что картотека данных должна существовать на сервере, и это должно быть перезаписываемо!
WYSIWYG Web Builder автоматически создает этот файл для Вас и установит соответствующие разрешения. Просто щелкните кнопкой 'Create' рядом с областью имени файла и следуйте за  инструкциями.

Шаг 1 Вводит имя картотеки данных. Например 'formdata.csv'
Шаг 2 Выбирает  местоположение, где файл будет создан. WYSIWYG Web Builder перечислит все профили, которые Вы создали в менеджере публикации.
Шаг 3 WYSIWYG Web Builder соединится с выбранным местоположением и покажет структуру папок на веб-сервере. Выберите отдаленную папку и щелкните ''Finish', чтобы создать картотеку данных.

 
Upload files to a folder on the server - Загрузите файлы к папке на сервере.
При этом выборе встроенный процессор формы загрузит файлы к папке на сервере вместо того, чтобы послать их как приложение через электронную почту.
Файлы будут сохранены с уникальным именем файла. Местоположение загруженного файла (ов) будет включено в сообщение электронной почты.
Мастер веб-формы - Form Wizard
Создание формы на пустом месте может быть довольно трудным, поэтому рекомендуется использовать Мастера Формы, чтобы сделать эту задачу немного легче.

Примечание: В версии WYSIWYG Web Builder 11 имеется улучшенный: Form Wizard (создает объекты лейбла вместо стандартного текста).


Шаг 1: Как Вы хотите создать новую форму?
У Мастера форм (Form Wizard)  есть 3 метода, чтобы создать форму:

1. Create a new form based on a template - Этот выбор позволяет Вам выбирать шаблон формы, который Вы можете использовать как основание для собственной формы.
2. Create a new form from scratch using the wizard - Создайте новую форму на пустом месте, используя мастера форм 
3. Create a blank form so you can add controls later - Создайте пустой бланк формы, Вы можете добавить средства управления позже. В основном этот метод - то же самое как ручная вставка пустой области формы.


Шаг 2: Выберите форму шаблона

Мы включили несколько готовых к использованию форм, чтобы Вы могли начать.  Для некоторых форм Вы должны будете изменить данные, такие как  адрес электронной почты или URL вебсайта.
Есть 2 шаблона процессора формы, где используются внешние вебсайты, чтобы обработать данные формы. Прежде, чем Вы сможете использовать услуги этих вебсайтов, Вы должны сначала зарегистрироваться!
http://www.formbuddy.com/
http://www.mailmyform.com/
Эти примеры могут быть полезными, если Ваш вебсайт не поддерживает PHP или любой другой тип обработки формы.


Шаг 3: Добавьте контроль к форме
В этом шаге Вы можете вставить средства управления к форме. У каждого контроля может быть ярлык, который будет показан перед контролем.
Щелкните Add (Добавить) и выберите один из пунктов от раскрывающегося меню, чтобы вставить новый контроль. В большинстве случаев мастер попросит, чтобы Вы ввели имя ярлыка.
Чтобы изменить свойства средств управления, выделите его в списке и щелкните Edit (Редактировать), чтобы показать свойства контроля.
Вы можете перестроить пункты, используя кнопки Move Up и Move Down.
Примечание: Удостоверьтесь, что Ваша форма содержит кнопку Submit (Отправить). Без этой кнопки пользователь не будет в состоянии представить введенные данные!


Шаг 4: Куда нужно послать данные ?
Когда пользователь нажимает кнопку Submit, браузер посылает данные формы в сервер сети, таким образом мы должны определить, куда данные нужно послать.
'Submit the data to an email address' - Одна из возможностей - представить данные по адресу электронной почты.
Хотя это - очень распространенная методика, но она не работает надежно на всех посетителей Вашего сайта - все зависит от почтового клиента, установленного на их компьютере. Мы не рекомендуем использовать этот метод!
Submit data to a script on an external server  - Вместо того, чтобы использовать представление данных по эл. почте  ("mailto"), попытайтесь использовать  сценарий CGI, с использованием PHP, ASP.
В этом случае данные хранятся на сервере, при этом предоставляется платный или бесплатный хостинг.  Примеры - http://www.formbuddy.com или http://www.mailmyform.com.
Сценарий CGI переводит Вашу форму на сообщение электронной почты и пересылает ее к адресу, который Вы указываете.
Submit data to a page within your website - Альтернативно Вы можете создать свой собственный процессор формы.
В учебной секции нашего вебсайта Вы можете найти пример, как осуществить это использование PHP: http://www.wysiwygwebbuilder.com/forms_php.html

Примечание:
Некоторые шаблоны формы используют свой собственный сценарий обработчика формы (обычно добавленный как отдельный объект HTML). В этом случае не изменяйте установленные значения, если Вы не знаете то, что Вы делаете!
Шаблоны, которые используют процессор формы, включают:
Dictionary lookup - Поиск словаря
Form processor - Процессор формы:  ASP
Form processor -  Процессор формы: Godaddy
Form processor -  Процессор формы: Tell a friend
Form processor: www.formbuddy.com
Form processor: www.mailmyform.com
All PayPal templates - Все шаблоны PayPal
All search templates - Все шаблоны поиска
Некоторый шаблон формы использует скрытые области адреса электронной почты или вебсайта. Удостоверьтесь, что Вы заменяете эти значения своей собственной информацией!


Use Built-in PHP form processor to send data to an email address - Используйте встроенный процессор формы PHP, чтобы послать данные в адрес электронной почты.
Encoding type - Тип кодирования
Необходимый тип кодирования зависит от процессора формы. В случае, если Вы выбрали предопределенную форму, будет выбран правильный тип кодирования.
База данных (для передовых пользователей только)
Вы можете использовать этот выбор в комбинации со встроенным процессором формы, чтобы хранить данные формы в базе данных MySQL на сервере. Произведенный сценарийк PHP попытается автоматически составить таблицу и области, основанные на параметрах настройки, которые Вы указали, таким образом Вы не должны волноваться о создании этого непосредственно.
Области базы данных будут в том же самом порядке и использовать то же самое название, как в Вашем проекте формы.

Примечание: Чтобы рассмотреть или обработать представленные данные формы, Вы будете нуждаться в отдельном инструменте, как standard MySQL admin tool (инструменте администрирования). Пожалуйста, проконсультируйтесь с документацией своего хоста для большего количества подробностей.


Write form data in a MySQL database -  Определяет, написать ли данные формы в базе данных MySQL.
Database / Table  - Определяет название базы данных MySQL и название таблицы.
Username / Password  - Определяет имя пользователя MySQL и пароль.
Server - Определяет сервер базы данных MySQL.
Auto responder
Мы добавили немного основных авто- функциональных возможностей респондента к процессору формы. Это позволяет Вам посылать (спасибо или подтверждение) сообщение пользователю.
From - Определяет раздел  'from - от' адреса электронной почты.
Subject - Определяет предмет для сообщения электронной почты.
Message - Определяет основной текст для сообщения электронной почты.
Miscellaneous (Разное)
Include IP address in form data - Включают IP адрес в данные формы, чтобы включать IP адрес компьютерной формы, где форма была представлена в сообщении.
Process variables in Success Page -  позволяет включать результаты формы в страницу успешного сообщения.
Пример: на успехе страница добавляют текстовый объект с этим текстом:
Следующие данные были представлены форме онлайн:
Name: $name
Email: $email
Website: $website
Где name (название), email (электронная почта) и website (вебсайт) является названиями областей формы, плюс знак доллара. Так, если имя поля - 'name', тогда, имя переменной будет '$name'.
Добавление собственного кода к процессору формы (для передовых пользователей только!)
Возможно добавить дополнительный код к процессору формы, это может быть полезно для того, чтобы вставить заголовки CC/BCC или послать другую электронную почту, сохранение к базе данных и т.д.
Шаг 1
Удостоверьтесь, что выбор ''Use Built-in PHP form processor to send data to an email address" позволен.
Шаг 2
Правой кнопкой щелкают по форме и выбирают 'HTML' от контекстного меню.
Шаг 3
Один из вариантов - "Custom Form Processing" (Свой обработчик формы). Здесь Вы можете напечатать свой собственный код. Код будет вставлен перед функцией PHP mail():
$body .= '--'.$boundary.'--'.$eol;
// your code will be inserted here!
mail($mailto, $subject, $body, $header); header('Location: '.$success_url);
exit;
Подробнее о вставке своего кода - см. Авторскую справку программы.
Или: онлайн-обучение http://www.wysiwygwebbuilder.com/forms.html
Hidden Fields
Вы можете добавить скрытые области, которые используются, чтобы хранить информацию между обменами клиент-сервер.
Events
См. События
Web Storage
Web Storage (веб-память) - новая особенность HTML5. Это позволяет хранить области между сеансами или/и страницами. Это может быть полезно, если Вы хотите передать значения от одной формы до другой.

Local storage - Местная память хранит данные без срока.
Session storage - Память сеанса хранит данные для одного сеанса.


Мобильный jQuery
Use AJAX  - Использование  AJAX  - мобильный jQuery будет автоматически обращаться с подчинением формы через AJAX, когда возможно. Или обычный HTTP будет использоваться.
Transition  - Определяет переход страницы к странице успеха. Переходы страницы работают, если AJAX позволяют.
Set Tab Order in Forms  - Установленный порядок счета в формах
Вот то, как это работает:
1) Сначала выберите форму.
2) Затем выберите ''Set Tab Order'  в меню (также доступно через контекстное меню формы).
3) Web Builder  теперь покажет текущий индекс каждого элемента формы, который поддерживает признак индекса счета. Если индекс счета еще не установлен, он показывает ''Not Set''.
4) Теперь щелкните каждым объектом в желательном заказе. Новый индекс будет автоматически отображен.
Advanced Button
Эта кнопка дает Вам намного больше контроля над появлением и поведением кнопки. Вы можете изменить фоновый цвет, использовать различные шрифты для текста или даже активизировать JavaScript.
В настройках конпки указывается Name (Название), Value (начальное значение),
Button Type - тип кнопки

Normal: нет никакого поведения по умолчанию.
Submit: Когда активизировано, представленная кнопка представляет форму.
Reset: Когда активизировано, кнопка сброса перезагружает все средства управления к их начальным значениям.
OnClick: С этим выбором Вы можете связать  кнопку с дополнительным сценарием.


Действие OnClick
Здесь Вы можете определить какое действие связано со случаем кнопки OnClick:
  • Перейти к указанному URL;
  • Откройте новое окно и загрузите указанный URL 
  • Обновите текущую страницу (то же самое как "Refresh" в Интернет-браузере).
  • Перейдите к предыдущей странице (то же самое как Back - Назад в Интернет-браузере.
  • Перейдите к следующей странице  (то же самое как Forward - Вперед в Интернет-браузере.
и другое.
Проверка правильности веб-форм
Для проверки правильности формы используется Form Validation
У WYSIWYG Web Builder есть некоторые очень сильные инструментальные средства проверки правильности, чтобы проверить правильность пользовательского ввода для  EditBox, Combobox, Radio Button, Checkbox, CAPTCHA и TextArea.
Помимо проверки правильности JavaScript, есть также встроенная поддержка проверки правильности HTML5!
Подробнее о проверке правильности форм - См. авторскую справку программы.
Процедура, применяемая в WYSIWYG Web Builder, может оказаться для многих пользователей довольно сложной. Намного проще использовать специализированные программы для создания веб-форм - см.  Веб-формы
Лейбл (Label)
Элемент лейбла введен в WYSIWYG Web Builder 11.
Лейбл HTML (<label>) представляет заголовок для элемента веб-формы (editbox, textarea, combobox, checkbox, radio button, file upload).
Для вставки лейбла используйте Панель вставок - раздел Form Controls - Label.
При двойном щелчке по лейблу открываются его свойства.
Форма и расчеты
В WYSIWYG Web Builder 12 введеы функции "Показать / Скрыть /включить/ Выключить" (Show/hide/enable/disable) объекты в зависимости от значения/выбора поля ввода формы. Также введена функция вычисления значений на основе значений/выбора других полей.
Например, вы можете отключить кнопку отправки формы до тех пор, пока пользователь заполняет форму. Несколько условий могут быть добавлены к объекту.
Также можно сделать расчеты в полях формы. Расчеты могут быть использованы для вычисления значения на основе значений или выбора других полей ввода (например, чтобы рассчитать полную стоимость товара в интернет-магазине на основе выбранных параметров).
Подробнее о новом при создании веб-форм (англ. язык)
Добавлена поддержка переменных в теме сообщения электронной почты (PHP почтовой программы или форматированного текста должна быть включена).
Добавлена возможность установить свойство ID для скрытых полей.
Добавлена возможность включать название страницы/referrer в данные формs.
Добавлена опция для настройки автоответчикf поля ввода электронной почты.
Добавлена возможность отправки данных формы на адрес электронной почты в зависимости от выбора в combobox. Пользователи могут выбрать "отдел" из выпадающего меню, и письмо отправляется только по адресу департамента по электронной почте.
В WYSIWYG Web Builder 12 можно настроить стиль и размер кнопок Checkbox/Radio Button. Это также делает эти кнопки отзывчивыми при создании сайта для разных экранов, поэтому что Checkbox/Radio Button  могут иметь разный размер (и цвет) в контрольных точках.
Этот новый режим может быть отключен с использованием стилей браузера по умолчанию' (это возможно для старых проектов для обратной совместимости).
См. также:
Создание веб-форм (видео)
Создание формы с отправкой файлов на Web Builder (видео)
Формы обратной связи и страницы  (видео)
Полная настройка формы подписки 

Последнее обновление: апрель 2017 г.



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Урок 13 -Кнопка обратной связи WYSIWYG Web Builder, Видео, Смотреть онлайн Как сделать много игр в стим

Как сделать кнопку web builder Как сделать кнопку web builder Как сделать кнопку web builder Как сделать кнопку web builder Как сделать кнопку web builder Как сделать кнопку web builder Как сделать кнопку web builder