Brackets Code - JS Web Form Creator

Introduction

This application is intended to reduce the time needed for creating forms using bootstrap framework.

Installation

Just unzip and enjoy. This application does not have Server Side script, so it will run in any server.

By default, columns will use .col-md-* class. When using horizontal form (.form-horizontal), labels will take 4 columns.

You can change these values in the file bc/js/properties.js.

Compatibility

This application has been tested on Google Chrome, Opera, Firefox and Safari.

If your forms will be used on Internet Explorer, take into consideration that placeholder is not working in version 8.<--revisar

Working Area

First let's talk about the working area and tools you have available to create new forms.

Top

At the top, you have general options that will help you to select, deselect and remove created items, preview before exporting, hide / show guidelines and autoselect created new objects.

Deselect

The selected object will be deselected. Also, you can click the main container to deselect all elements

Remove

The selected object will be removed.

Preview & Export

Preview the form and copy the HTML, CSS and Javascript code.

Current selection

It will show all the elements that are created in the container for it's selection.

Guide lines

Show or hide guidelines for ROW and COLUMN objects.

MAIN Container

Below the top menu, is the main container in which all elements will be added. You are only allowed to add panel and row objects to the main container.

Properties Menu

At the right side of your screen, there will be three icons that will control the menu for the containers, fields and object properties.

Click ON

The properties menu will be hidden.

Drag

The properties menu can be dragged around the working area with this icon.

Containers

Following the guidelines of bootstrap framework, you can:

  • Add PANELS and ROWS to the main container.
  • Add ROWS to panel and column objects.
  • Add COLUMNS to row object.
  • Add FIELDS to columns object.

TIPS:

  1. Click objects to select them. You can select multiple objects by holding LEFT SHIFT.
  2. When adding new objects, you can view it's properties by double clicking it.
  3. When adding new objects, you can enable automatic selection by checking the option Auto select new objects or you can do this by holding LEFT SHIFT.
  4. You can sort elements inside its parent by drag and drop.
  5. You can drag and drop FIELDS between different columns.

Panel

Panel object is compound by the title (.panel-heading) and the content (.panel-body). The content is the place for new elements. Here you can add row objects.

Panel properties

  1. Appearance: Allows you to change the appearance of the children elements. You can change it between Normal, Inline (.form-inline) and Horizontal (.form-horizontal).
    Inline behavior
    Horizontal behavior
  2. Show Heading?: Show / Hide the title part of the panel.
  3. Show as Title?: Add / Remove the title text inside a h3 object.
  4. Title: Allows you to change the text of the title.

Row

Row object has no property. It can be added to the main container, panel and column object. The guidelines will be represented with a border type dashed.

Columns

Column object can be added to row object. The guidelines will be represented with a border type dotted. You can add column of the following sizes: 12, 6, 4 and 3. If you need another size, you can change it in the property panel

Column properties

  1. Appearance: Allows you to change the appearance of the children elements. You can change it between Normal, Inline (.form-inline) and Horizontal (.form-horizontal).
  2. Size: Allows you to change the size of the column (1 to 12).
  3. Offset: Allows you to change the position offset of the column (0 to 11).

By default, columns are created using the class for medium devices .col-md. You can change it in property file properties.js.

Fields

Inside the column objects, you can add fields of different types such as link, list and text.

Label

It's just a label. <label></label>

Label properties

  1. Label: Allows you to change the text of the label.
  2. Offset: Allows you to change the position offset of the object (0 to 11).
  3. Text align: Allows you to change the text align (Left, Center, Right).

Link object. It is a html element of <a></a>

Link properties

  1. Id: Allows you to change the id of the object. Affects the ID attribute.
  2. URL: Allows you to change URL address of the object. Affects the HREF attribute.
  3. Text align: Allows you to change the text align (Left, Center, Right).
  4. Target: Allows you to define if the URL will be open in a new o same window. Affects the TARGET attribute.

Selection List

<select></select>

Selection List properties

  1. Name: Allows you to change the name of the object. Affects the NAME attribute.
    You can use the Copy to Id button if they should be the same.
  2. Id: Allows you to change the id of the object. Affects the ID attribute.
    You can use the the Copy to Name button if they should be the same.
  3. Show Label?: Allows you to hide / show the label of the field.
  4. Label: Allows you to change the text of the label. ONLY appears if "Show Label?" is checked.
  5. Required?: Allows you to validate if field has value before submitting the form.
  6. Required Message: Allows you to define the validation message. ONLY appears if "Required?" is checked.
  7. Values: Allows you to define the values (<option>) for the list. You can define the text and value for these options as well as reorder the options.

Text

<input></input> (type can be text and password)

Text properties

  1. Name: Allows you to change the name of the object. Affects the NAME attribute.
    You can use the Copy to Id button if they should be the same.
  2. Id: Allows you to change the id of the object. Affects the ID attribute.
    You can use the the Copy to Name button if they should be the same.
  3. Show Label?: Allows you to hide / show the label of the field.
  4. Label: Allows you to change the text of the label. ONLY appears if "Show Label?" is checked.
  5. Required?: Allows you to validate if field has value before submitting the form.
  6. Required Message: Allows you to define the validation message. ONLY appears if "Required?" is checked.
  7. Value: Allows you to define a value for the object. Affects the VALUE attribute.
  8. Value text align: Allows you to change the text align of the value (Left, Center, Right).
  9. Placeholder: Allows you to change the placeholder of the object. Affects the PLACEHOLDER attribute. By default it as "New element".
  10. Maxlength: Allows you to define the maximun of characters. Affects the MAXLENGTH attribute. By default is 100.
  11. Data type: Allows you to define the type of value of the text field.
    Types of value
    • Text: Normal text.
    • Password: Mask the text to be unreadable. Affects the TYPE attribute to PASSWORD
    • Masked Text: Mask the text according to a defined text. You can use "9" to accept only numbers and "a" to accept only letters.
      Example: 9999-a will accept NumberNumberNumberNumber-Letter
    • Email: When defined as email the text will be validated to be like example@domain.com.
    • URL: When defined as URL the text will be validated to be like http://www.example.com or https://www.example.com.
  12. Mask: Allows you to define the mask for the text. ONLY appears if Data Type is "Masked Text".
  13. Decimals: Allows you to define the quantity of decimals. ONLY appears if Data Type is "Decimal Number".
  14. Date Format: Allows you to define the date format of the text. It can be used to show a picker for date and time, date or time. ONLY appears if Data Type is "Date, Time or Both".

Textarea

<textarea></textarea>

Textarea properties

  1. Name: Allows you to change the name of the object. Affects the NAME attribute.
    You can use the Copy to Id button if they should be the same.
  2. Id: Allows you to change the id of the object. Affects the ID attribute.
    You can use the the Copy to Name button if they should be the same.
  3. Show Label?: Allows you to hide / show the label of the field.
  4. Label: Allows you to change the text of the label. ONLY appears if "Show Label?" is checked.
  5. Required?: Allows you to validate if field has value before submitting the form.
  6. Required Message: Allows you to define the validation message. ONLY appears if "Required?" is checked.
  7. Value: Allows you to define a value for the object. Affects the VALUE attribute.
  8. Placeholder: Allows you to change the placeholder of the object. Affects the PLACEHOLDER attribute. By default it as "New element".
  9. Maxlength: Allows you to define the maximun of characters. Affects the MAXLENGTH attribute. By default is 250.
  10. Rows: Allows you to define the rows to be shown. Affects the ROWS attribute. By default is 3.
  11. Char counter?: Add a character counter to the textarea.

Checkbox

<input type="checkbox"></input>

Checkbox properties

  1. Name: Allows you to change the name of the object. Affects the NAME attribute.
    You can use the Copy to Id button if they should be the same.
    You can use the Add Seq button to add _# at the end of the name. It works when you have more than 1 checkbox. Example: Name=user_interest will be Name=user_interest_1,user_interest_2.
  2. Id: Allows you to change the id of the object. Affects the ID attribute.
    You can use the the Copy to Name button if they should be the same.
    You can use the Add Seq button to add _# at the end of the id. It works when you have more than 1 checkbox. Example: Id=user_interest will be Id=user_interest_1,user_interest_2.
  3. Show Label?: Allows you to hide / show the label of the field.
  4. Label: Allows you to change the text of the label. ONLY appears if "Show Label?" is checked.
  5. Required?: Allows you to validate if field has value before submitting the form.
  6. Required Message: Allows you to define the validation message. ONLY appears if "Required?" is checked.
  7. Values: Allows you to define the checkbox(es) (<input type="checkbox">). You can define the text and value for the/these checkbox(es) as well as reorder them.

Radio Button

<input type="radio"></input>

Radio button properties

  1. Name: Allows you to change the name of the object. Affects the NAME attribute.
    You can use the Copy to Id button if they should be the same.
  2. Id: Allows you to change the id of the object. Affects the ID attribute.
    You can use the the Copy to Name button if they should be the same.
    You can use the Add Seq button to add _# at the end of the id. It works when you have more than 1 radio. Example: Id=user_interest will be Id=user_interest_1,user_interest_2.
  3. Show Label?: Allows you to hide / show the label of the field.
  4. Label: Allows you to change the text of the label. ONLY appears if "Show Label?" is checked.
  5. Required?: Allows you to validate if field has value before submitting the form.
  6. Required Message: Allows you to define the validation message. ONLY appears if "Required?" is checked.
  7. Values: Allows you to define the radio(es) (<input type="radio">). You can define the text and value for the/these radio(es) as well as reorder them.

Button

<button></button>

Button properties

  1. Name: Allows you to change the name of the object. Affects the NAME attribute.
    You can use the Copy to Id button if they should be the same.
  2. Id: Allows you to change the id of the object. Affects the ID attribute.
    You can use the the Copy to Name button if they should be the same.
  3. Show Label?: Allows you to hide / show the label of the field.
  4. Label: Allows you to change the text of the label. ONLY appears if "Show Label?" is checked.
  5. Text: Allows you to change the text of the button.
  6. Type: Allows you to change the type of the button between Submit, Reset and Button. "Reset" works only if content is inside a form <form></form>.

File

<input type="file"></input>

File properties

  1. Name: Allows you to change the name of the object. Affects the NAME attribute.
    You can use the Copy to Id button if they should be the same.
  2. Id: Allows you to change the id of the object. Affects the ID attribute.
    You can use the the Copy to Name button if they should be the same.
  3. Show Label?: Allows you to hide / show the label of the field.
  4. Label: Allows you to change the text of the label. ONLY appears if "Show Label?" is checked.
  5. Required?: Allows you to validate if field has value before submitting the form.
  6. Required Message: Allows you to define the validation message. ONLY appears if "Required?" is checked.

Export

After you finished creating your new form, you can preview, check and export the code (HTML, CSS and jQuery/Javascript).

Preview

Here you can preview and check field types, mask, validation, etc

Code

... And here you will find warnings and messages that you should take into consideration before copying / pasting the HTML, jQuery/Javascript and CSS code.

CONSIDERATIONS:

  1. ALWAYS include the file bc/js/result.js in your page.
  2. You can invoke the function validate_requireds(object), to validate all child items of object that are required before submitting a form. It returns TRUE if the form can be submitted or FALSE if it cannot be submitted.
  3. If you used text type "Masked Text", you have to download in your server the "Masked Input" plugin (view Plugins section)
  4. If you used text type "Integer" or "Decimal", you have to download in your server the "jQuery Number" plugin (view Plugins section)
  5. If you used text type "Date, Time or Both", you have to download in your server the "Eonasdan Bootstrap DateTime Picker" plugin (view Plugins section)

Template

You can use the folder "export" as a template to paste the code from the web form creator. Just replace the text [PUT YOUR CODE HERE] with your code, in the file export/index.html.

License

This application is not free. If you want to buy it, please go to codecanyon.

Plugins

Like many applications on the net, I used great plugins.

Special thanks to the creators of these plugins:

  1. Font Awesome by Dave Gandy - http://fontawesome.io
  2. Eonasdan Bootstrap DateTime Picker - http://eonasdan.github.io/bootstrap-datetimepicker
  3. Moment - http://momentjs.com
  4. Masked Input - http://digitalbush.com/projects/masked-input-plugin
  5. JS Beautify Input - http://jsbeautifier.org
  6. jQuery Number - https://github.com/customd/jquery-number

Support

If you are having problem with the application, please use the contact form available in codecanyon and I will help you as soon as posible.