cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <ul class="language-selector">
  <li id="en">English</li>
  <li id="pt">Português</li>
  <li id="zhtw">繁體中文</li>
<div id="fb-editor"></div>
              body {
  background: #f2f2f2 url('http://formbuilder.readthedocs.io/en/latest/img/noise.png');
  font-family: sans-serif;
  margin: 0;

.language-selector {
  text-align: center;
  margin: 0 0 20px;
  padding: 0;
  li {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    background: white;
    margin: 0;
    line-height: 18px;
              jQuery(document).ready(function($) {
  var language = {
      pt: {
        button: 'Botão',
        text: 'Texto',
        checkbox: 'Caixa de seleção',
        checkboxGroup: 'Grupo da Caixa de seleção',
        dateField: 'Data',
        header: 'Cabeçalho',
        paragraph: 'Parágrafo',
        hidden: 'Campo oculto',
        select: 'Menu suspenso',
        getStarted: 'Arraste um campo do direito a esta área',
        editorTitle: 'Elementos de formulário',
        radioGroup: 'Grupo de rádio',
        textArea: 'Área de texto',
        viewXML: 'Exibir XML'
      zhtw: {
        addOption: '新增選項',
        allFieldsRemoved: '已移除全部的欄位。',
        allowSelect: '允許全選',
        autocomplete: '自動完成',
        button: '按鈕',
        cannotBeEmpty: '此欄位不允許空白的',
        checkboxGroup: '核取方塊群組',
        checkbox: '核取方塊',
        checkboxes: '核取方塊組',
        className: 'CSS 類別',
        clearAllMessage: '你確定要移除所有的項目嗎?',
        clearAll: '清除',
        close: '關閉',
        copy: '複製到剪貼簿',
        dateField: '日期欄位',
        description: '提示文字',
        descriptionField: '描述說明',
        devMode: '開發者模式',
        editNames: '編輯名稱',
        editorTitle: '表單元件',
        editXML: '編輯 XML',
        fieldDeleteWarning: false,
        fieldVars: '欄位變數',
        fieldNonEditable: '此欄位無法修改。',
        fieldRemoveWarning: '你確定要移除此項目嗎?',
        fileUpload: '檔案上傳',
        formUpdated: '表單已上傳',
        getStarted: '請拖拉右邊的元件到此區域。',
        hide: '編輯',
        hidden: '隱藏欄位',
        label: '欄位名稱',
        labelEmpty: '欄位名稱不能是空的',
        limitRole: '限制可讀取的角色:',
        mandatory: 'Mandatory',
        maxlength: '最大長度',
        minOptionMessage: '此欄位至少要兩個選項',
        name: 'ID',
        no: '否',
        off: '關',
        on: '開',
        option: '選項',
        optional: '選項的',
        optionLabelPlaceholder: '選項名稱',
        optionValuePlaceholder: '選項值',
        optionEmpty: '選項直至必需的',
        paragraph: '分段',
        placeholder: '文字段落',
        placeholders: {
          value: '值',
          label: '選項名稱',
          text: '',
          textarea: '',
          email: '請輸入你的電子郵件 Email',
          placeholder: '',
          className: '多個類別時,請用空白隔開。',
          password: '請輸入密碼'
        preview: '檢視預覽',
        radioGroup: '單選群組',
        radio: '單選',
        removeMessage: '移除元件',
        remove: '&#215;',
        required: '必須的',
        richText: '文字編輯框',
        roles: '存取',
        save: '儲存',
        selectOptions: '選項',
        select: '選擇',
        selectColor: '顏色選擇',
        selectionsMessage: '允許多重選擇',
        size: '大小',
        sizes: {
          xs: '最小',
          sm: '小',
          m: '預設',
          lg: '大'
        style: '樣式',
        styles: {
          btn: {
            'default': '預設',
            danger: 'Danger',
            info: 'Info',
            primary: 'Primary',
            success: 'Success',
            warning: 'Warning'
        subtype: '格式',
        subtypes: {
          text: ['text', 'password', 'email', 'color'],
          button: ['button', 'submit']
        text: '文字欄位',
        textArea: '文字區塊',
        toggle: '彈出提示',
        warning: '警告!',
        viewXML: '&lt;/&gt;',
        yes: '是'
    $fbTemplate = $(document.getElementById('fb-editor'));

  $('.language-selector li').click(function() {
    var lang = this.id;

      messages: language[lang] || {}


Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................