Создатель CSS Формы

Создайте бесплатные и красивые онлайн формы, и анкеты за 1-2-3, с помощью создатель CSS формы 123ContactForm

Генератор CSS Формы

123ContactForm создатель простой онлайн формы помогает вам создавать прекрасные веб-форм с редактором drag & drop. После того, как формы создаются они могут быть легко настроены, используя наши готовые темы из форм CSS или простой редактор CSS.

При использовании 123ContactForm создатель CSS формы для создания веб-формы на вашем сайте, вы, возможно, захотите подчеркнуть некоторые поля, изменяя их внешний вид. Это легко сделать с помощью CSS кода, чтобы разработать элементы формы. Вы можете настроить все поля вида (все поля ввода, например), или просто одно поле. Веб-формы, созданные с помощью 123ContactForm создателя CSS формы, построены таким образом, что каждый элемент имеет уникальный идентификатор, и, используя его, можете настроить, как выглядят пользователи.

CSS Формы

Реализация полной формы настройки веб-форм, построенных с 123ContactForm создателем CSS формы

Возьмем одну форму для примера (нажмите, чтобы просмотреть). Используя менее 15 строк кода CSS, мы можем настроить элементы формы CSS, как хотим. Ради примера, скажем, вы хотите, чтобы она выглядела так (нажмите, чтобы просмотреть).

Вы должны создать файл CSS, например, mystyle.css, настройте его, как описано ниже, загрузите его на ваш сайт, и установите его на странице Настройки Форм, пользоваться URL. Или вы можете добавить код CSS прямо из интерфейса 123ContactForm.

Образец формы CSS элементы настройки менее чем за 15 строк кода - нажмите кнопку ниже, чтобы увеличить

+ Если вы посмотрите на исходный код формы, вы увидите, что большинство элементов имеют классы и идентификаторы, как показано ниже:

<select id="id123-control4346747" name="control4346747" class="class123-select">
Этот выбор поля (drop-down) принадлежит к классу имени class123- select и имеет идентификационный id123-control4346747. Изменение class123- select класс, используя CSS, будет применять изменения для всех Select полей. Изменение id123-control4346747 ID, используя CSS, изменит только внешний вид этой конкретной поле Select. Давайте добавим красный границы слева для drop-down (select) управления и голубые границы только для этого контроля drop-down:
.class123-select { border-left:3px solid #FF0000; }
#id123-control4346747 { border-bottom:3px solid #0000FF; }

+ Давайте сделаем весь текст на странице голубой:

.class123-label, class123-select { color:#0066CC; }

+ Давайте сделаем все элементы управления и ярлыки в виде использования Verdana 12px как шрифт:

label.descr, p.descr, .class123-radio, .class123-checkbox, .class123-select
{ font-family: Verdana; font-size: 12px; }

+ Давайте добавим зеленую левую границу для всех checkbox:

.class123-checkbox { border-left:3px solid #336633; }

+ Давайте добавим оранжевый фондля всех drop-down (select) вариантов:

.class123-select option { background: #FF6600; }

+ + Давайте изменим внешний вид определенной этикетки, добавив фиолетовые границы слева

#id123-title4290919 { border-left:3px solid #660066; }

+ Давайте настроем внешний вид текстового поля:

#id123-control4290921
{ border: 1px solid red ; border-radius: 10px ; -moz-border-radius: 10px ; -webkit-border-radius: 10px ; }

+ Давайте настроем кнопку отправки:

#id123-button-send { color: yellow; }
border-left:3px solid #FF00FF

+Вы даже можете настроить внешний вид полей загрузки или числа верификации (Captcha):

.swfupload { border-style: dashed; color: #00FF33; }
#id123-captcha
{ background: #FF6600; border-left:3px solid #FF00FF; }

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

Получите больше возможностей и вариантов настройки, используя наш создатель веб-формы drag & drop


Это было все, мы добавили чистый CSS код к элементам формы, генерируемые с 123ContactForm создателя CSS формы. Если вы хотите добавить больше функций в форму и продолжать с нашими возможностями настройки, вы можете использовать наш простой строитель веб-формы, который не требует каких-либо развитых технических способностей. Вот список наиболее часто используемых функций и настроек:
123ContactForm Генератор CSS Формы - Особенности