Руководство пользователя Layout & Styles Visual Editor (amoForms)


Update 3.0.0. Что изменилось?


Совсем недавно вышло новое большое и обновление плагина amoForms – version 3.0.0. Оно включает в себя как набор небольших улучшений ранее выпущенного функционала, так и совершенно новые компоненты, которые расширяют возможности плагина в разы!
Для начала, мы расширили список доступных полей и разбили их по категориям для вашего удобства. Теперь правый блок – секция полей выглядит так:


Для вас доступны 4 категории полей:
1) Template Fields: Heading, Text area, Text, Number, Select, Multiselect, Radio, Checkbox;
2) User Information: Name, Company, Phone, Email, URL, Address, City, State, Country, Zip/Post Code;
3) Special Fields: Captcha, Antispam, File, Rating, Line, Date, Instructions;
4) Payment Fields: Tax, Total.


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


В этом обновлении вы можете отключить для поля автозаполнение браузером, добавить лимит ввода, задать значение по-умолчанию. Также в поля Text и Phone была добавлена возможность выставить маску для поля. Причем у вас есть возможность, как выбрать одну из предустановленных, так и задать свою собственную!


Помимо этого, у каждого поля теперь есть специальная настройка – Field Hint. Введите туда подсказку для пользователя, и он увидит значок в правом углу поля.
Самым же главным новшеством amoForms v.3.0.0 является появление встроенного визуального редактора внешнего вида вашей формы – amoForms Layout & Styles.
С этого момента вы можете настроить любую деталь внешнего вида вашей формы в полном соответствии с вашим вкусом или дизайном вашего сайта. Этой части обновления будет посвящен следующий раздел, включающий в себя руководство по работе с визуальным редактором amoForms.

 

1.Layout & Styles Visual Editor User Guide
Основной частью обновления 3.0.0 является добавление визуального редактора внешнего вида формы и полей.
Чтобы начать процесс стилизации вашей формы, зайдите во вкладку плагина amoForms в левом меню панели администратора WordPress и выберите форму для редактирования:


Перед вами откроется страница Edit Fields с выбранной вами формой:


1.1 Form Styling
Для того чтобы приступить к редактированию внешнего вида вашей формы нажмите на кнопку Form Styling в верхнем меню:


Перед вами появится выпадающее меню с двумя вкладками: Form Container, Form Row.


С помощью настроек Form Container вы можете управлять внешним видом оболочки вашей формы, а в Form Row стилизовать все ряды на вашей форме. Более подробно о настройках в каждой вкладке будет рассказано далее.
1.1.1 Form Container
При открытии этой вкладки настроек перед вами появится следующее меню:


В данном меню вам доступны следующие настройки:
1) Background Color – с помощью колорпикера выберите желаемый цвет вашей формы. Также вы можете использовать шестнадцатеричный код или код цвета в RGB;


2) Background Image – загрузите и используйте изображение в качестве фона формы, для этого нажмите на Load Image в открывшемся меню или выберите одно из предустановленных фоновых изображений;


3) Border Width – эта настройка отвечает за толщину границы вашей формы. Задается в пикселях;
4) Border Radius – с помощью этой настройки вы можете задать желаемое скругление углов границы вашей формы. Задается в пикселях;
5) Border Color – отвечает за цвет границы вашей формы. Вы можете использовать колорпикер, а также шестнадцатеричный код или код цвета в RGB;


6) Border Style – вы можете выбрать один из представленных в выпадающем списке стилей для границы формы:


7) Font Family – данная настройка отвечает за шрифт, который будет использоваться в форме. Вы можете выбрать один из представленных в выпадающем списке:


8) Margin – настройка отвечающая за величину отступа от каждого края элемента. Задается в пикселях для каждой границы, по часовой стрелке начиная с top, например 0px 0px 15px 15px.


9) Padding – эта настройка задает расстояние между элементом и его границей. Задается в пикселях для каждой границы, по часовой стрелке начиная с top, например 10px 10px 15px 15px.


Все изменения, которые вы вносите в настройках стиля контейнера вашей формы, отображаются сразу же в момент редактирования:


Для сохранения внесенных изменений нажмите кнопку Save, для отмены – кнопку Cancel.
1.1.2 Form Row
При открытии этой вкладки настроек перед вами появится следующее меню:


В данном меню вам доступны следующие настройки:
1) Background Color – с помощью колорпикера выберите желаемый цвет вашей формы. Также вы можете использовать шестнадцатеричный код или код цвета в RGB;


2) Border Width – эта настройка отвечает за толщину границы вашей формы. Задается в пикселях;
3) Border Radius – с помощью этой настройки вы можете задать желаемое скругление углов границы вашей формы. Задается в пикселях;
4) Border Color – отвечает за цвет границы вашей формы. Вы можете использовать колорпикер, а также шестнадцатеричный код или код цвета в RGB;


5) Border Style – вы можете выбрать один из представленных в выпадающем списке стилей для границы формы:


6) Margin – настройка отвечающая за величину отступа от каждого края элемента. Задается в пикселях для каждой границы, по часовой стрелке начиная с top, например 0px 0px 15px 15px.


7) Padding – эта настройка задает расстояние между элементом и его границей. Задается в пикселях для каждой границы, по часовой стрелке начиная с top, например 10px 10px 15px 15px.


Все изменения, которые вы вносите в настройках стиля рядов вашей формы, отображаются сразу же в момент изменения:


Для сохранения внесенных изменений нажмите кнопку Save, для отмены – кнопку Cancel.
1.2 Field Styles
В возможности нового визуального редактора amoForms также входит возможность стилизовать поля формы. Для того, чтобы открыть настройки стилей формы, наведите курсор мыши на то поле, которое вы хотите отредактировать и нажмите кнопку Edit справа:


Перед вами появится окно настроек поля. Для перехода в настройки стилей нажмите кнопку Styles в верхней части меню:


Вы попадете в меню настройки стилей компонентов поля:


Большинство полей в плагине состоит из трех частей – Field Wrapper, Field Element, Field Label. Именно эти секции настроек вы видите на верхней картинке.
Однако такие поля, как Radio и Rating имеют больше составных частей и, соответственно, больше секций для редактирования в меню.
Каждая секция состоит из следующего набора настроек:


В данном меню вам доступны следующие настройки:
1) Background Color – с помощью колорпикера выберите желаемый цвет вашей формы. Также вы можете использовать шестнадцатеричный код или код цвета в RGB;


2) Border Color – отвечает за цвет границы вашей формы. Вы можете использовать колорпикер, а также шестнадцатеричный код или код цвета в RGB;
3) Text Color – отвечает за цвет таких элементов поля, как description, input limit, которые располагаются непосредственно в Field Wrapper. Вы можете использовать колорпикер, а также шестнадцатеричный код или код цвета в RGB;
4) Border Radius – с помощью этой настройки вы можете задать желаемое скругление углов границы вашей формы. Задается в пикселях;
5) Border Style – вы можете выбрать один из представленных в выпадающем списке стилей для границы формы:


6) Font Family – данная настройка отвечает за шрифт, который будет использоваться в форме. Вы можете выбрать один из представленных в выпадающем списке:


7) Height/Width – вы можете изменить соответствующие параметры редактируемого элемента. Устанавливается в пикселях.
С правой стороны окна настроек стилей вы можете увидеть специальную панель Box Model:


С ее помощью вы можете редактировать следующие параметры вашего поля:
1) Margin – настройка отвечающая за величину отступа от каждого края элемента. Задается в пикселях для каждой границы, по часовой стрелке начиная с top, например 0px 0px 15px 15px.


2) Height/Width – регулируют соответствующие параметры редактируемого элемента. Задаются в пикселях.
3) Padding – эта настройка задает расстояние между элементом и его границей. Задается в пикселях для каждой границы, по часовой стрелке начиная с top, например 10px 10px 15px 15px.


Все изменения, которые вы вносите в стиль поля, отображаются сразу на вашей форме:


Для сохранения настроек нажмите кнопку Save, а для отмены изменений – кнопку Cancel.
В меню настроек вы можете увидеть пункт «Применить для всех», выбрав его после настройки стилей какого-либо поля, сохраненные настройки применятся для всех полей такого же типа на форме.


Например: на вашей форме расположены два поля Name и вы хотите настроить стили обоих полей сразу.


Для этого наведите курсор мыши на одно из полей и нажмите на появившуюся кнопку Edit:


Откроется меню редактирования поля. Чтобы перейти к настройкам стилей, вам нужно нажать на кнопку Styles в верхней части меню:


После нажатия на кнопку вы попадете в меню редактирования стилей поля:


Выберите один из элементов поля для редактирования, нажав на него:


Теперь внесите желаемые изменения и после этого поставьте галочку «Применить ко всем» для того, чтобы настройки стилей применились к обоим полям Name:


Готово! Теперь нажмите кнопку Save, чтобы изменения применились для вашей формы на странице Form Preview.
1.3 Button Styles
В плагине amoForms доступны для редактирования две кнопки. Первая – Submit на вашей форме, а вторая – кнопка отображения формы в виде модального окна. Она становится доступной после включения опции на странице Form Settings.
Стандартная кнопка Submit на вашей форме:


Включение опции отображения в модальном окне и кнопка отображения формы:
1) Перейдите во вкладку Form Settings плагина amoForms и выберите Modal в качестве режима отображения вашей формы;


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


Для редактирования стилей кнопок нажмите на кнопку Edit:
1) Для редактирования кнопки Submit наведите на нее курсор мыши и нажмите на появившуюся кнопку Edit;


2) Для редактирования кнопки вызова модального окна нажмите на кнопку Edit рядом с кнопкой Open Form во вкладке Form Preview:


1) Кнопка Submit
При нажатии на кнопку Edit перед вами откроется меню редактирования стилей кнопки. Доступные опции для редактирования следующие:


1) Button name – задайте желаемую надпись на кнопке;
2) Background Color – с помощью колорпикера выберите желаемый цвет вашей кнопки. Также вы можете использовать шестнадцатеричный код или код цвета в RGB;


3) Border Radius – с помощью этой настройки вы можете задать желаемое скругление углов границы вашей кнопки. Задается в пикселях;
4) Border Color – отвечает за цвет границы вашей кнопки. Вы можете использовать колорпикер, а также шестнадцатеричный код или код цвета в RGB;
5) Color – отвечает за цвет текста на вашей кнопке. Вы можете использовать колорпикер, а также шестнадцатеричный код или код цвета в RGB;
6) Border Style – вы можете выбрать один из представленных в выпадающем списке стилей для границы кнопки:


7) Font Family – данная настройка отвечает за шрифт, который будет использоваться в кнопке. Вы можете выбрать один из представленных в выпадающем списке:


8) Font Weight – эта настройка регулирует насыщенность, толщину символов в тексте.
С правой стороны окна настроек стилей вы можете увидеть специальную панель Box Model:


С ее помощью вы можете редактировать следующие параметры вашей кнопки:
1) Margin – настройка отвечающая за величину отступа от каждого края элемента. Задается в пикселях для каждой границы, по часовой стрелке начиная с top, например 0px 0px 15px 15px.


2) Height/Width – регулируют соответствующие параметры редактируемого элемента. Задаются в пикселях.
3) Padding – эта настройка задает расстояние между элементом и его границей. Задается в пикселях для каждой границы, по часовой стрелке начиная с top, например 10px 10px 15px 15px.


2) Кнопка Modal
При нажатии на кнопку Edit перед вами появится следующее меню:


Здесь доступны все те же самые настройки, что и для кнопки Submit. Отсутствует панель Box Model, но Padding, Margin и Border доступны для редактирования в ином варианте (аналогично настройкам Form Container).
Все изменения, которые вы вносите в стиль кнопки, сразу же отображаются на вашей форме. Если вы хотите, чтобы они остались на вашей форме, то нажмите кнопку Save, а если хотите отменить внесенные изменения, то нажмите на кнопку Cancel и, кнопка вернется к исходному виду.



1.4 Columns
В обновлении 3.0.0 плагина amoForms появилась уникальная функция – добавление полей в две колонки прямо на странице редактирования вашей формы. Теперь вы с легкостью можете создавать более красивые и удобные формы для вашего сайта всего в одно движение.
Выберите форму, которую хотите изменить в левом меню панели администратора WordPress:


После выбора формы вы попадете на вкладку Edit Fields, где вы сможете отредактировать выбранную форму:


Теперь, чтобы начать перемещать поля, вам достаточно навести курсор на поле, положение которого вы хотите изменить. При наведении курсора вы увидите, что вокруг поля появилась сетка, а с левой стороны появилась иконка перетаскивания.


Для того, чтобы поместить два поля на одной строчке, вам нужно навести курсор на область ввода того поля, которое вы хотите переместить:


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


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


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


Теперь перетаскивайте ячейку с полями, удерживая левую кнопку мыши, и поместите ее на желаемое место:


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


Начните перемещать поле вниз, и для него создастся новая ячейка:


Переместите поле в эту ячейку, и оно снова станет располагаться на одной строчке:


Отпустите левую кнопку мыши и поле примет новое положение:

 

2. Сброс стилей
В плагине предусмотрена возможность сброса настроек стилей. Есть 4 варианта:
1) Общий Reset – вы можете сбросить абсолютно все изменения в стилях формы и полей, которые вы внесли. Для этого нажмите кнопку показанную на скриншоте:


2) Сброс стилей формы – будут сброшены все изменения в разделах Form Container and Form Row. Для этого нажмите кнопку Form Styling в верхней панели, а затем кнопку Reset в появившемся меню:


3) Сброс настроек полей – будут сброшены все изменения настроек стилей полей. Для этого откройте настройки поля с помощью кнопки Edit и затем перейдите в раздел Styles:


Затем нажмите кнопку Reset в нижней части меню Styles:


4) Сброс стилей кнопки Submit – будут сброшены все изменения в настройках стилей кнопки Submit:

 

3. Устранение неполадок
В новом обновлении плагина amoForms v.3.0.0 мы полностью изменили верстку всех создаваемых вами форм! Теперь у поля появилась дополнительная оболочка – amoforms_fields_container, которая нужна для правильной реализации настроек стилей и возможности добавления полей в две колонки:


Это значит, что если вы создавали собственные стили для формы во встроенном редакторе Custom CSS или использовали JS скрипты, то вам нужно проверить соответствие element classes и element id для их корректной работы после обновления версии плагина.
Если у вас возникли какие-либо проблемы или вам нужна помощь с настройкой ваших стилей формы и JS скриптов после обновления плагина, то напишите нам на support@amocrm.com или заполните форму на сайте https://www.amocrm.com/contacts/. Наши специалисты свяжутся с вами и помогут вам решить все возникшие проблемы, а также ответят на все ваши вопросы!

Еще есть вопросы? Отправить запрос
На базе технологии Zendesk