Визуальный конструктор html форм

Обновлено: 13.05.2024

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

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

Стоимость: бесплатно

Русский язык: есть

Простые опросы или многоуровневые тесты легко создавать на ПК и мобильных устройствах. Можно менять шаблон по собственному усмотрению, вставлять изображения и видео. Статистика результатов отображается прямо в форме и по желанию оформляется в таблицу. Помимо анкетирования можно собирать e-mail респондентов. Из минусов нужно отметить то, что вставить Google Формы на сайт получится только ссылкой. Но зато количество опросов неограниченно.

Стоимость: от 7 000 рублей за 100 заполненных анкет

Русский язык: есть

Преимущество сервиса в том, что он умеет находить подходящую аудиторию. Респонденты отбираются по указанным вами параметрам (пол, возраст, место проживания), по готовым сегментам аудитории из CRM или по данным Яндекс.Аудиторий. Для оформления опроса есть готовые шаблоны и возможность самостоятельного создания анкеты. Готовую форму можно распространять ссылкой. Результаты отслеживают посредством встроенной статистики или через Яндекс.Метрику. Некоторый минус Яндекс.Взгляд в том, что все опросы проходят модерацию. Но зато вероятные ошибки будут своевременно выявлены. Плюс – сервис предоставляет отчетные документы для ИП и ЮЛ.

Стоимость: бесплатно с ограничениями/от € 36 ежемесячно

Русский язык: есть

Стоимость: бесплатная версия с ограниченным функционалом/premium от € 12,42 ежемесячно

Русский язык: есть

Предусмотрено 100 вариаций шаблонов. В premium-версии количество вопросов не лимитировано, есть настройка доступа по паролю. Настраиваемый дизайн адаптирован для различных устройств. Результаты экспортируют в PDF , DOCx , PPTx. Для распространения анкеты используют ссылку или электронную почту.

Стоимость: пробный период 7 дней/ от 2 770 руб. в месяц

Русский язык: есть

Стоимость: бесплатно с ограничениями/от 250 руб. в месяц

Русский язык: есть

Стоимость: бесплатно с ограничениями/от 890 руб. в месяц

Русский язык: есть

Можно формировать опросы из готовых шаблонов, используя 14 типов вопросов. Анкету можно индивидуализировать через добавление атрибутики бренда. Форматы экспорта данных – .pdf, .word, .excel, .spss. Результаты можно фильтровать по характеристикам ЦА. Платформа адаптирована под любые устройства. Бесплатно доступны 26 шаблонов, 3 опроса по 10 вопросов и 50 респондентов. Ответы собираются через онлайн-панель Анкетолога (более 112 500 чел.). В платных версиях есть СМС-рассылка анкеты и создание именной ссылки-приглашения. На профессиональных тарифах предоставляют помощь специалистов для разработки сложных форм и дополнительных услуг.

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

Мой любимый конструктор форм для сайта:

Я предпочитаю создавать онлайн-формы через Google Forms . Он предоставляет все основные функции, а также позволяет бесплатно создавать онлайн-формы. Все ответы пользователей агрегируются в таблицы Google , и ими не сложно управлять.

Google Forms

Google Forms

Бесплатный инструмент от Google для создания форм. Этот конструктор построен на базе Google Таблицы . Данные, собранные с помощью онлайн-форм автоматически группируются в специальных таблицах. Для создания формы откройте главную страницу Google Forms и нажмите на иконку + . На экране появится новая форма, в которой можно задать различные атрибуты.

Для создания формы выполните следующие шаги:

o Текст;
o Абзац текста;
o Множественный выбор;
o Чекбокс;
o Выбор из списка;
o Диапазон;
o Сетка;
o Дата;
o Время;

  • Нажать « Готово », чтобы создать вопрос;
  • Нажать « Добавить элемент », чтобы задать еще один вопрос.

Конструктор форм позволяет бесплатно добавлять неограниченное количество вопросов. Также можно вставлять изображения или видео в вопросы формы.

Также можно поделиться ссылкой на форму с помощью различных социальных платформ: Facebook , Twitter и Google+ . А также копировать ссылку, чтобы поделиться нею напрямую; добавить соавторов, которые смогут изменять параметры формы или просматривать ответы в электронной таблице. К таблице с ответами можно получить доступ через Таблицы Google .

JotForm

JotForm

Это многофункциональный конструктор обратных форм HTML . Для настройки форм предоставляется целый ряд инструментов и параметров. Можно создавать онлайн-формы без регистрации. JotForm позволяет добавлять различные поля:

  • Простые инструменты: эти инструменты позволяют задать следующие поля:

o Заголовок;
o Полное имя;
o Адрес электронной почты;
o Адрес;
o Телефон;
o Дата;
o Капча.

  • Инструменты формы: эти инструменты включают в себя следующие поля:

o Текстовое окно;
o Текстовая область;
o Выпадающий список;
o Радио-кнопка;
o Чекбокс;
o Текст;
o Изображение.

  • Инструменты опросов: их можно добавлять для определения рейтинга или популярности приведенных данных:

o Рейтинг;
o Матрица;
o Спиннер;

  • Платежные инструменты: использование различных сервисов для получения платежей или пожертвований;
  • Виджеты:

o Контрольный список;
o Слайдер изображений;
o YouTube.

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

Дополнительные функции включают в себя:

  • Отправку по электронной почте подтверждений и уведомлений о заполнении формы;
  • Перенаправление пользователей на другой сайт после заполнения формы;
  • Добавление формы на сайт;
  • Определение условий, необходимых, чтобы пользователь мог заполнить форму.

Через этот конструктор можно бесплатно публиковать неограниченное количество форм, но пользователями могут быть совершены только 100 записей. Чтобы расширить этот лимит, необходимо зарегистрироваться и обновить инструмент. После создания формы нажмите « Опубликовать » и введите адрес электронной почты, на который нужно отсылать ответы. Скопируйте URL-адрес формы, чтобы вставить ее на сайт или поделиться.

Typeform

Typeform

Этот конструктор позволяет бесплатно создавать неограниченное количество форм, но только с базовыми функциями. Этот конструктор немного отличается от других подобных сервисов. Typeform позволяет задать один вопрос на отдельной странице. Можно создавать форму с нуля или использовать шаблон. Интерфейс Typeform делится на три части:

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

После создания формы можно изменить цвет, шрифт и фоновое изображение, установить видимость (« Публичная » или « Частная »), добавить бренд, мета информацию ( только для версии PRO ).

Cognito Forms

Cognito Forms

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

После создания формы нажмите кнопку « Опубликовать », чтобы получить код для публикации. Скопируйте код, если нужно встроить форму на сайт, или скопируйте URL-адрес , чтобы поделиться им напрямую. Также доступны опции для социальных сетей: Facebook , Twitter и Google+ .

Чтобы просмотреть все предоставленные данные, перейдите в раздел « Записи ». Существует ограничение на количество просматриваемых записей. Бесплатно можно просматривать только последние 500 записей.

Зарегистрируйтесь и установите обновления, чтобы пользоваться инструментом без ограничений. Платная версия также поддерживает онлайн-виджеты оплаты. Условия использования просты - вы платите лишь 1% от каждого поступления средств.

PlanSo

PlanSo

Этот бесплатный конструктор форм работает как плагин для WordPress . Также можно создавать формы с помощью автономного инструмента, который интегрируется с сайтом. Инструменты для создания форм разделены на семь категорий:

После того, как вы добавили необходимые поля, сохраните форму. Для форм в этом HTML конструкторе предоставляется прямой URL-адрес и код для встраивания. Все собранные с помощью форм ответы представляются на том же субдомене. Их можно отсортировать, экспортировать отчеты в Excel или HTML .

EmailMeForm

EmailMeForm

На EmailMeForm можно создавать неограниченное количество форм. Это веб-приложение позволяет добавлять в форму до 50 полей. Поля разделяются на три категории:

  • Основные : однострочный текст, число, чекбокс, выпадающий список и множественный выбор;
  • Дополнительные : имя, адрес электронной почты, адрес, телефон, изображения, URL-адрес , подпись и т.д. Также доступно добавление разрыва страницы и разрыва раздела;
  • Опрос : сетки чекбоксов, диапазон рейтинга, список чисел, сетка чисел, текстовый список и т.д.

Можно определять атрибуты для различных полей формы. Сохранив форму, можно предварительно просмотреть ее и выбрать тему.
В этом конструкторе HTML писем доступно создание отчетов для элементов формы. Пользовательские отчеты можно создавать в виде графиков и списков. Для бесплатной учетной записи доступно создание только трех отчетов в месяц. Также существует ограничение на общее количество заполненных форм - до 100 в месяц.

Smart Survey

Smart Survey

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

Survey Monkey

Survey Monkey

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

SurveyMoz

SurveyMoz

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

RationalSurvey

RationalSurvey

Редактирование уже готовых примеров вопросов выполняется на вкладке « Настройка ». Также можно добавить новый вопрос. После создания формы перейдите на вкладку « Распространение » для просмотра URL-адреса и кода для встраивания. Скопируйте URL-адрес и отправьте его заинтересованным пользователям или воспользуйтесь « Групповой рассылкой ». Также можно поделиться ссылкой через Facebook и Twitter . На вкладке « Анализ » отображаются полученные ответы. Можно экспортировать ответы в формате CSV , DOC , PD или SPSS .

PollDaddy

PollDaddy

Позволяет создавать опросы, исследования, викторины и рейтинги, добавлять заголовки страницы, а также различные поля вопросов. В том числе: произвольный текст, множественный выбор, матрица, рейтинг, имя, адрес, телефон, адрес и т.д. Можно настроить атрибуты, сделать поле обязательным для заполнения или включить примечание.

SurveyNuts

SurveyNuts

Поделитесь формой через URL-адрес , добавьте на сайт код для встраивания. Также доступны опции распространения через Facebook и загрузки печатной версии опроса. На странице результатов можно просматривать ответы в отсортированном виде. Бесплатный аккаунт позволяют добавлять только 10 вопросов и получать не более 100 откликов на форму.

Webform

Webform

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

Перейдите к свойствам и задайте параметры вопросов в соответствии со своими требованиями. Перейдите на вкладку « Результаты », чтобы просмотреть полученные ответы и аналитику или экспортировать данные в Excel . Также можно экспортировать данные непосредственно в Google Drive .

Awesome Forms

Awesome Forms

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

Inqwise

Inqwise

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

Сохраните форму и нажмите кнопку « Распространить », чтобы получить прямой URL , ссылку и код для встраивания. Inqwise также позволяет поделиться формой через электронную почту, Facebook , Twitter или Reddit . Загрузите QR-код , чтобы предоставлять ссылку на печатную версию формы. На вкладке « Ответы » отображаются все результаты заполнения форм.

SurveyStatz

SurveyStatz

Зарегистрируйтесь в конструкторе и приступайте к созданию своей первой формы. Введите ее название и добавьте необходимые поля. Можно добавить в форму вопрос, текст или изображение. Доступные типы полей: выпадающий список, матрица, текстовая область, загрузка изображения и т.д.

После создания формы перейдите на вкладку « Внешний вид », чтобы просмотреть, как она выглядит. Также можно изменить внешний вид формы. Нажмите на кнопку « Запустить опрос », чтобы получить прямой URL-адрес , а также код для встраивания.

Infiniforms

Infiniforms

Zoho Survey

Zoho Survey

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

Визуализация кода уже давно не является приоритетной задачей для разработчиков. В этой статье приводится список из 9 WYSIWYG редакторов , которые используются для этих целей. Рекомендуем ознакомиться с ним на тот случай, если при реализации вашего проекта возникнет подобная задача.

Какой же лучший редактор 2016 года?

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

Выбор редакции: Atom.io

Какой же лучший редактор 2016 года?

Если бы мы могли порекомендовать вам только один инструмент, мы бы выбрали этот.

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

Если вам нужен лучший редактор HTML WYSIWYG , который в 10 раз сократит время, затрачиваемое на составление кода или его редактирование, то это Atom . Попробуйте его, и вы будете мне благодарны. Atom.io является бесплатным, и он создан командой Github .

Еще один инструмент, заслуживающий похвалы - это Coda , очень крутой редактор для пользователей Mac . У него совершенный и красивый интерфейс, но он стоит $ 99. В данный момент я отдаю предпочтение Atom !

Теперь обзор остальных редакторов.

1. NicEdit

NicEdit

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

2. TinyMCE

TinyMCE

TinyMCE - это WYSIWYG HTML редактор с открытым исходным кодом, написанный на JavaScript . Он легко интегрируется и легко настраивается с помощью тем и плагинов. TinyMCE является одним из наиболее " полных " редакторов, предлагающих функционал, похожий на MSWord .

3. CKEditor

CKEditor

4. YUI Rich Text Editor

YUI Rich Text Editor

WYSIWYG редактор для сайта YUI Rich является элементом управления интерфейса от Yahoo , он превращает простую текстовую панель в полнофункциональный WYSIWYG-редактор . Инструмент поставляется в нескольких версиях различного уровня сложности и с различными функциями, но в каждой из них авторам удается добиться отличной эргономики ( без нагромождения кнопок, засоряющих интерфейс ).

5. MarkItUp!

MarkItUp!

Markitup – JQuery-плагин , который позволяет превратить текстовые области в редакторы разметки по вашему усмотрению. Синтаксис HTML , Wiki и BBcode - это всего лишь некоторые из поддерживаемых опций. Markitup не является WYSIWYG-редактором , но это не значит, что он не предлагает все необходимые функции. Также он компактный и простой в работе.

6. FreeTextBox

FreeTextBox

7. MooEditable

MooEditable

MooEditable предоставляет простой, но эффективный функционал, который реализован на основе хорошо написанной JavaScript -библиотеки. Если вы поклонник Mootools , то не будете иметь с этим никаких проблем.

8. OpenWysiwyg

OpenWYSIWYG - это кроссбраузерный простой WYSIWYG редактор со всеми необходимыми функциями. Он имеет красивый пользовательский интерфейс, включающий в себя всплывающие элементы и кнопки. Одной из его отличительных особенностей является качественно реализованная работа с таблицами. В то же время, в Google Chrome OpenWYSIWYG до сих пор не поддерживается.

9. jHtmlArea

jHtmlArea

jHtmlArea - это еще один WYSIWYG-редактор , разработанный как плагин для популярной библиотеки JQuery . Он прост в использовании, и содержит только самые необходимые опции. Это позволяет очень легко настраивать все его компоненты: от внешнего вида до языка.

Хотите обсудить это?

Если вы уже использовали один из перечисленных в этой статье инструментов или знаете лучший WYSIWYG редактор , напишите об этом в комментариях. Мы хотели бы узнать ваше мнение по этому поводу!

Вам нужна форма регистрации на сайте? Мы составили список, состоящий из 60 бесплатных форм авторизации, которые вы можете использовать на своем WordPress-сайте, в блоге, на форуме и т.д. Каждая форма тщательно протестирована, чтобы можно было гарантировать ее работоспособность и доступность исходного кода.

WordPress Login Customizer

WordPress Login Customizer

Формы из этого списка созданы с помощью HTML / CSS. Но в данном случае речь идет о лучшем плагине для настройки пользовательского интерфейса WordPress. Он поставляется с несколькими шаблонами, которые можно дополнительно настроить в соответствии с дизайном сайта. С помощью этого плагина вы сможете избавиться от скучной страницы входа в WordPress.

Creative Login Form

Creative Login Form

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

Мы поискали в интернете действительно крутые формы авторизации, но найти такие оказалось непросто. Поэтому решили представить вам собственные. Вот 20 форм входа, разработанных нашей командой.

Форма авторизации №1

Форма авторизации №1

Простая, креативная и яркая форма входа с градиентным фоном. Вы можете использовать ее для любых целей, таких как авторизация в веб-сервисе, мобильном или десктопном приложении.

Форма авторизации №2

Форма авторизации №2

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

Форма авторизации №3

Форма авторизации №3

Форма авторизации №4

Форма авторизации №4

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

Форма авторизации №5

Форма авторизации №5

Прекрасная и современная форма с опциями входа через Facebook или Google. Ее кнопки имеют красивые эффекты наведения, что позволяет предоставить пользователям прекрасный опыт взаимодействия.

Форма авторизации №6

Форма авторизации №6

Если веб-страница аккуратная и красивая, форма входа не должна отличаться от ее дизайна. Вот форма, которая точно оправдает ваши ожидания.

Форма авторизации №7

Форма авторизации №7

Форма с тремя вариантами входа в учетную запись: Facebook, Twitter или адрес электронной почты. А если у пользователя еще нет учетной записи, можно связать форму со страницей регистрации.

Форма авторизации №8

Форма авторизации №8

Еще одна современная, модная и красивая форма входа в систему. Она особенно хорошо смотрится на мобильных устройствах.

Форма авторизации №9

Форма авторизации №9

Если хотите уйти от чисто белого или одноцветного дизайна, вам стоит обратить внимание на эту форму. Она поддерживает добавления фонового изображения или наложения градиента. Также есть опция входа через Facebook или Google.

Форма авторизации №10

Форма авторизации №10

Это полная противоположность предыдущему варианту. Она выглядит минималистично, но в то же время очень аккуратно.

Форма авторизации №11

Форма авторизации №11

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

Форма авторизации №12

Форма авторизации №12

Фоновое изображение с наложением синей тени, имя с аватаром и поля ввода - это форма авторизации №12. Для кнопки входа в систему добавлен эффект наведения.

Форма авторизации №13

Форма авторизации №13

Шаблон с разделением экрана, в котором одна половина предназначена для изображения, а другая - для формы.

Форма авторизации №14

Форма авторизации №14

В этой подборке есть и простые, и более сложные формы входа. А шаблон №14 - из числа минималистичных.

Форма авторизации №15

Форма авторизации №15

Довольно минималистичная форма, но в ее верхней части можно добавить баннер. Благодаря этой небольшой опции можно сделать форму более привлекательной.

Форма авторизации №16

Форма авторизации №16

Это форма входа с полноэкранным изображением, поверх которого размещаются поля для ввода логина и пароля, а также кнопка с эффектом наведения.

Форма авторизации №17

Форма авторизации №17

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

Форма авторизации №18

Форма авторизации №18

Если хотите выделиться и сохранить оригинальность, используйте форму входа №18. Кому-то нравятся простые страницы входа, в то время как другие хотят иметь дополнительные преимущества.

Форма авторизации №19

Форма авторизации №19

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

Форма авторизации №20

Форма авторизации №20

Градиентный фон, черная кнопка с эффектом наведения, поля для ввода логина и пароля, а также раздел «Забыли пароль?» Все это есть в форме авторизации №20.

Выпадающая форма авторизации

Выпадающая форма авторизации

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

Floating Sign Up Form

Floating Sign Up Form

Разработано для форм подписки с использованием вкладок и меток.

Простая форма авторизации

Простая форма авторизации

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

Flat Login – Sign Up Form

Flat Login – Sign Up Form

Когда вы нажмете кнопку “Click me”, расположенную в правом верхнем углу, с помощью анимации форма входа будет преобразована в форму регистрации.

Login With Self-Contained SCSS Form

Login With Self-Contained SCSS Form

Это форма, созданная с использованием SCSS. Расширение CSS, которое добавляет базовому языку новые возможности и элегантность. Оно позволяет использовать переменные, вложенные правила, встроенный импорт и многое другое.

Animated Login Form

Animated Login Form

Это анимированная форма входа, а верхняя часть “Hey you, Login already” преобразуется в форму при нажатии кнопки.

Login Form Using CSS3 And HTML5

Login Form Using CSS3 And HTML5

Пример того, как создать простую форму входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и :before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных.

Login With Shake Effect

Login With Shake Effect

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

Boxy Login Form

Boxy Login Form

Блочная форма авторизации - это небольшой сюрприз.Попробуйте ввести имя пользователя “admin” и пароль “1234”, чтобы увидеть ее в действии.

Animated Login Form

Animated Login Form

Аккуратная небольшая форма входа.Когда вы нажмете кнопку “LOGIN”, расположенную слева, будет отображена форма авторизации.



Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.

Вступление

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

TinyMCE

Один из самых распространенных визуальных редакторов, обладает недюжинным функционалом. Есть множество дополнений, по умолчанию установлено множество плагинов.
(Браузеры: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome)
[Официальный сайт | Демо]

CKeditor



Полный аналог TinyMCE.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]

CLEditor



Незамысловатый визуальный редактор, особенных функционалом не балует. Но сделан вполне добротно, качественно реализованы все функции.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]

NicEdit

Редактор очень похож на CLEditor. Обладает стандартным функционалом.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт]

elRTE



Очень качественный визуальный редактор. Обладает широким функционалом. Сделан очень качественно.
(Браузеры: Firefox 3.5+, Opera 10+, Safari 3.0+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо]

Очень средний визуальный редактор. Обладает стандартным функционалом.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт | Демо]

Xinha



Неплохой визуальный редактор, отличительная особенность — множество встроенных action'ов. Т.е. настроить его под свои нужды не составит трудностей.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт | Демо]

Imperavi (Платный)



Достаточно милый редактор, функционал не большой, но его вполне хватает. Существует ряд ошибок связанных с переходом от html к визуальному редактору и обратно. (убираются align'ы) Важно заметить, что Imperavi работает как плагин к JQuery.
Имеется неплохая документация.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 4+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо]

Markitup



Markitup больше похож на удобный редактор html, который больше подойдет профессионалу, нежели рядовому пользователю. Но если вы знаете html, то он может оказаться вполне удобным.
(Браузеры: Firefox 3+, Opera 9+, Safari 3+, Internet Explorer 6+, Google Chrome)
[Официальный сайт | Демо]

Aloha Editor



Неплохой редактор, очень удобен. Однако существует огромный минус, который затмевает почти все плюсы — это отказ от поддержки старых и не очень браузеров (доступны только последние версии браузеров).
(Браузеры: Требуется поддержка HTML5, Opera не поддерживается)
[Официальный сайт | Демо]

Mercury editor



Mercury представляет собой цельную веб-страницу, и может быть использован для редактирования целой страницы или отдельных определенных областей. Он поддерживает функцию предварительного просмотра отредактированного содержимого, а также размещение ссылок, изображений, видео и таблиц. Загрузка файлов может быть осуществлена посредством интерфейса drag'n'drop.
Редактор также поддерживает совместную работу нескольких человек. Mercury может быть установлен в качестве отдельного Rails, либо за счет внедрения в код страницы. (Требуется JQuery)
И минус в том, что поддерживаются только следующие браузеры: Chrome 10+, Safari 5+, Firefox 4+.
[Официальный сайт | Демо на главной странице]

YUI Rich Text Editor



Визуальный редактор от Yahoo. Как справедливо заметил sdevalex, один из лучших визуальных редакторов. Обладает исчерпывающим функционалом, поддерживает подавляющим большинством браузеров.
[Демо]

MooEditable



Набор функций сильно ограничен, однако порой больше и не требуется.
[Демо]

OpenWysiwyg

Кросс-браузерный полноценный редактор со всеми требуемыми функциями. Он даже включает в себя привлекательные выпадающие меню и кнопки. К сожалению, Chrome не будет поддерживать его.
(IE 5.5+, Firefox 1.0+, Mozilla 1.3+ and Netscape 7+)
[Официальный сайт | Демо]

html-5-wysiwyg

jWysiwyg



Леговесный плагин для jquery.
[Официальный сайт | Демо]

Реформатор



Визуальный редактор от студии Артемия Лебедева.
[Официальный сайт | Демо]

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

UPD 0: поправил название
UPD 1: дополнил описание YUI Rich Text Editor (спасибо sdevalex).
UPD 2: добавил jWysiwyg (спасибо mr47).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 3: добавил Реформатор (спасибо kuber).
UPD 4: исправлено: Imperavi стал платным

P.S: 1. если какой не назвал, пишите, исправлю. 2. Если топик не актуален, напишите, уберу.

Читайте также: