Мастер форм для сайта - Документация


Мастер форм для сайта


Table of Contents

  1. Главная
  2. About
  3. Requirements
  4. Fields
  5. Manual
  6. Example

A) About - top

The “Master Form Builder” is a simple tool for creating advanced HTML forms with features such as conditional fields, client and server side validation, sending email, uploading files and adding custom validation callbacks. All features are already embeded and ready to work out of the box - no coding required! Start building your forms with validations and conditions and just copy and paste the generated source code to your server. INCLUDING HTML, CSS, JS and PHP!


B) Requirements - top


C) Files - top

The build needs the following files

The server needs the following files


D) Manual - top

Unzip the downloaded file and double click on the file named "index.html" to get started.

Congratulations! You have successfully installed the “Master Form Builder”. :) What you see on the image above is the front page, here you will build your form. At the top right corner you have buttons to navigate between tabs, "Form" (where we are now), "Preview" and "Source Code".

In the top middle you find a number of field types ranging from "Input field", "Textarea", "Select box", "Checkbox", "Radio", "Likert", "Email" "File", "Div" and finally "Captcha". You probably recongize most of them except for "Email", "Likert", "Div" and "Captcha" which are four special fields, more about these fields further down the manual.

To the left of the field menu you see a ruler. Click on the image to bring up the form main settings.

Most of the settings here should be rather straight forward. We can set the post attribute value of the HTML form tag, set the text of the submit button, change the text for a required field (text showing next to the field label) and decide to have the label on a new line or not.

The right settings are for validation. Here we can supply our own translated validation texts. The "%s" strings will be replaced by either a field name, field value or a preset field value. For example, if we create a required field named "Test" and the user fails to post it, the error message will be "Test is required". If we add a min or max rule it will include the min and max value supplied, therefore we have two "%s" keys in the "Min" and "Max" fields. Finally the "pattern" rule includes the name and also the preset pattern to match.

Notice that there is no save button here, it is not required. Just click on the "x" in the upper right corner of the popup to close it, your settings will be saved automatically.

To start building your form, click on one of the field types available. Let's click on the "Input field".

When clicking on a field input a small window popups. Depending on which type of field we click on the fields in the window might vary. In the image above we can:

As you can see by the image above I have added a label "Firstname" and a name "firstname". I also made the field "Required" and added a "Min" rule of 3. In the "Extra" field one valid HTML attribute has been added, "placeholder" with the value of "Your firstname". Notice that the key and value are seperated with = and each pair should be seperated with new line.

Clicking the button further down in the popup window with the text "Add" adds the field to your form. Notice the label and the star (*) next to it marking it as required. The star is the "Required label" we saw in the form settings, which you can change to whatever you want. Also notice that the input text contains our placeholder. Even though we are not in preview mode you are able to view and update each field in the form in this tab.

To edit or delete the field simple click on the gray links to the right of field. See the red marker.

Moving forward, I have added a second field with the label "Lastname" and in the image above I'm currently adding a third field. We are still working with "Input fields" and notice that in the bottom right corner we are overriding the basic "text" type with a new HTML5 "range" type. With that we are supplying the "step" attribute in the "Extra" field and giving it a "Min", "Max" and "Required" rule.

The range field looks a bit different then the basic "text" input. Here we have a slider having a min value of 0 and max value of 99. When sliding it will increment or decrement with 1 step at a time based on our "Extra", "Min" and "Max" attributes/rules. After adding the "age" field we can select it by clicking anywhere inside the dotted line and drag it up and down to sort the fields.

Continuing our journey we add a new field, this time a "Radio" field. Here we find a new "Options" panel where we can add new radio options. The red marker shows how to add or remove options. The "Text" will be the text you see next to the radio and the "Value" will be the internal value the radio option will hold. To preset anyone/everyone as selected/checked check the checkboxes under "Selected".

The "Option" panel is available not only for the "Radio" field but also for "Select" and "Checkboxes". The "Option" panel works in the exact same way for all 3 different types, just remember:

A easy way to understand how it works is to run the script and create a "Select", "Radio" and "Checkbox" and see how it works.

Now when we have added a "Radio" field we are able to use Conditions. Conditions are very useful when you want to show or hide fields based on other fields values. Conditions can only be used if you have a "Radio", "Checkbox" or "Select" field already added to your form. That's why we didn't see the "Use condition" checkbox when we started our form building.

Here I created a field called "Do you have a beard?". I assume it's mostly guys who has beard so I want this field only to show when the "gender" field has the value "Male", otherwise it should be hidden. In the top right corner you see a "Required" rule and also a "Hide" rule, I want this field to be hidden by default.

Next I click the "Use conditions" checkbox and in the first select box I select my "gender" field and the value "Male". I could, if I wanted to, change the "is" to "is not" and change the value from "Male" to "Female" and get the same result, but for easy read we do it this way. Notice that we can add more condition fields by clicking on the - and +.

To learn more about conditions I added another field which will also be using conditions. This field should only be available if the "Do you have a beard?" field is either "Yes" or "Maybe". Notice how the select box value changed from "all" to "any". In this case we use the same condition field twice, this is not a limit. We can use all "Radio", "Select" and "Checkbox" fields available.

When using conditions you can either "Show" or "Hide" a field based on condition rules you setup. This is done in the first select box under the "Use conditions" checkbox. To the right of the first select box you have a second select having the options "all" or "any". If you want the condition to be true if all rules are valid, use "all". If it's okay if only one of the rules are valid, use "any". Simple.

If we click on the "Preview" button our form is displayed. In the left top corner you see two icons, one for changing theme and one for styling. Click on the first icon to open the "Theme" panel.

The script comes with two built in themes, "White" and "Black". Simply toggle between them to activate the theme in the preview mode. If you use a built-in theme the settings you provide in the other "Styles" panel will be disregarded. Individual fields which have their own style css added to them will not be affected though. To inactivate any theme, choose the "None" theme in the drop down menu.

If you want to customize your form without using the built-in themes you can create styles for your labels and input types here. The fields are simple, choose font, style, size and color. For the input fields you can also set padding and width. Below you can set CSS values to Likerts and the Error messages.

Back to our example. You see how the "Do you have a beard?" and "Describe your beard" input fields are hidden? That's because the "Gender" field hasen't been set yet.

Click on the "Male" value of "Gender" the "Do you have a beard?" question is displayed.

Clicking again on either "Yes" or "Maybe" of the "Do you have a beard?" field brings forward the "Describe" field. All according to our conditions.

Now, I'm happy with this form. Click on the "Source code" tab to get access to the HTML, CSS, JS and PHP to get this form up and running on your server. Copy the "Complete" content to get a fully working .php code out of the box.

If a error has been found, click on the "Forms" tab again and change it. Notice that depending on which files you use and if conditions are used the script adapts and only includes the basic required code.

One important notice: If you use the "File" field client side validation is not available.

Copying and pasting the "Complete" panel content to a new file and running it on the server it looks like this. Validation and conditions fully working with a theme attached by default.

Even though we already copy and pasted our generated code to our server, lets continue to explore the other fields available on the Master Form Builder.

I started fresh by pressing the F5 button, the popup warning is just to notify that added fields will be removed. Click "ok" and you are back with a clean form canvas.

Click on the "File" field to add a file input. The "File" field uses internally a validation callback called "ruleFile". This method is found in the Form.php file at the bottom of that page. This callback wants 3 key/value pairs as the image above shows. In the "Data" panel I have added a "extensions", "size" and "folder" key. The value of "extensions" key should be a string and include the file extensions we allow the user to upload. We can add multiple extensions by seperating them with ,. If we want we can continue adding a size limit and a folder which the uploaded files should go into. If no size limit is required, just remove the "size" key and its value.

Next, lets look at the "Likert". This is a nice controller where we are able to add multiple questions having the same answers. Simply add the questions in the "Questions" panel, seperated with new line and the answers in the "Data" panel seperated with new line.

Adding a "Likert" field looks like this. Fancy huh? Making a "Likert" field required makes all the questions in the likert required. The internal values of the radio buttons are decided based on the position and the number of answers available. The first one for each question will always be 0 and counting up.

Our next special field is the "Email" field. This field should be used when you want to send a mail to anyone when the form has been submitted. 3 attributes are required for this to work: "to", "subject" and "message". These three are pretty selfexplained so I go straight to the "message" attribute. Here you can include submitted field values by using the syntax {{FIELD_NAME}}. See the example how the {{firstname}} and {{lastname}} are being used. These will be replaced by the actual submitted field value when the form is validated and ok.

The "Email" field will not be shown in the HTML, it will only be used on the server side. Remember to check your mail settings on your server. You can add multiple email fields to each form.

We used it a bit in the previous steps but how do you add other attributes to a field? Well, you add them in the "Extra" panel and they come in a key=value pair seperated with a new line. Two keys are special the "callback" and "pattern" both are used internally to validate the field itself. The "pattern" key is also being used in HTML5 but works in a similar way as the validation script in the Master Form Builder.

You can add how many key=value attribute pairs as you want. Internally they are transformed into HTML attributes and you will see them in the HTML source code panel. Remember not to include a equal sign (=) in the "value" text.

When we added the "Range" input type we already used the "Override type" panel. Let's look at it again. You will find the "Override type" panel only under the "Input field" field. Here you can override the base "text" type with any other valid HTML input type, remember that even though it is fun to use HTML5 types not all browsers supports them yet. Based on the type you decide to use you can add attributes in the "Extra" panel to work with the type, just as we did with the "step=1" attribute pair when using the "range" type.

The "Min" and "Max" rules works differently depending on which type of field they are executed on.

Another special field is the "Div" field. Here you can either add a single line text string using the "Label" field. Or a multi line string using the "Data" field. The field will be a translated into a standard div tag.

To prevent evil to submit your for a simple Captcha is available. Only one per form is possible and PHP session_start() will be used. Click on the field in the menu will not open the normal popup window, it will add the field automatically not accepting any type of settings.


F) Example - top

Copyright © Сервис "Мастер создания форм для сайта" принадлежит сайту Flesha.Ru 2014 Все права защищены.

Go To Table of Contents