To create a new Form, click on the icon “New”
You will see Design page and the tools. The screen is separated into 2 sides. On the left is tools that are used to create a form; On the right is the area where you can drag a specific type of form to be shown. As shown in the picture.
Description of the tools; There are 3 tabs including
Toolbar
Keep the Tags and Tools separated into 4 parts
- Basic is a normal HTML tag that using in Form.
To create single-line input box
To create Text Area multi line input
To create Tag Radio input (able to choose only one)
To create Tag Select (Dropdown List menu)
To create Tag Check Box
To create Upload File input
To create Button (Submit and Reset)
To insert data, message, picture or HTML Code into a form
- Advanced Tag
To create a Tag for selecting date in Form
To create List of data from database
To create email input
To calculate form values and display
- Automatic Tag (Invisible in Front End)
Keep form user record from joomla database
Keep submitted date data
Keep form user’s IP Address
Random value and save to database when form submitted
Create Tag Hidden
- Spam-Control
Create Radom characters Captcha
Create Image Captcha
Form…
Form setting and property
- Form information set general setting of the Form
Title..........define Title of the Form
Published....Set whether the form is published or not
Type:.........Set type of the Form
.................Normal : Unchangeable
.................Profile : Changeable
Start publishing........Specify started publishing date of the Form
Finish Publishing.......Specify the end publishing date of the Form
Maximum records......Set maximum of the records in the database table
Theme..................Set Form theme
Allowed user groups...Set the group of users that have permission to use the form
Active plugins.........Set plugins using with form
- Redirections Forward URL
'Thank You' page link.........specify URL when user submit Form
Form Expired' page link......specify URL when Form is close
'Not authorized' page link....specify URL when unauthorized user use this Form
- Mail
Send notification to Administrators on new entries
Send an email to administrators when user submits the form
Send User a confirmation message
Send User a confirmation message after submitting
Administrators E-Mail
Define administrator emails
Administrator Notification Message Format
Set content in email that will send to administrator
User Confirmation Message
Set content in email that will send to users
Element is a configuration menu for input tags.
After we know all tools, We can start create a form by drag a tool that you want to the right side
You will get an Input Box tag. To Change tag label, Go to Element tab. As shown in the picture.
In Element tab, there will be many settings to set or you can just use default setting.
If you see nothing after you click Element tab, Make sure that you select the tag you want to set.
To Change the message in front of the Tag, Edit Label to the name you want.
For example, before name input it should have title. Drag a List tag as shown in the picture.
After you get a list tag, change Label and Option suitably. Click on the List tag on the right side or Click Element tab to change settings.
Notice that title list is now under name input. To move up, Click on the dots in front of the tag and drag it to the area before name input.
Create Tag Text Box to input lastname as shown below.
Create Tag Text Area to input address as shown below
Create Tag Text Box to input phone number.
For example, use Radio tag for sex input
Define values in Element tab as shown below.
For instance, create Check Box tag for the interest input. Settings in Element are similar to Radio tag.
Use Date tag in Advanced tab for input birthday.
To use DBList tag, drag the tag to the right side of the screen
In this function you need have a data table in database to use. For example, I have Source Table to keep the data of the source that tell user about this website. There are two fields in this table; ID and Source.
ID field is a key field and Source field is a value field.
Now we have to set DBList element to use the data from database. First set the label for this input. Then set the table name in database, Set Key field, Set Value Field, Set Order field and Set Order type whether Ascending or Descending. As shown in the picture. If you set the table name or the field name wrong the data will not be displayed.
Note that Email tag in Advanced tab is still unable to use
Using Simple Calculator to calculate value from forms and display
For example, We want to Calcutae Text1 and Text2 and show the summary in Sum.
To Calculate the value from form you need to know the ID of the forms. When you click on Text1 You will see that’s Text1’s ID is h41de
Now Click on Simple Calculator or Calculator Icon. We will set an equation into a simple calculator box.
As you can see, IDs from Text1, Text2 and Sum are used in the equation. You can use mathematics symbols such as plus(+), minus(-), time(*), divied(/). The following id after = is h43a0, which is Sum will be a place to display the last value after calculation. Please note that you cannot put the sum id in front of the calculation. For example, Sum = A+B is not work in Simple Calculator. You have to use A+B=Sum
The form will be like this
The final procedure to create a form is to create a submit button.
In Element tab change Label and Type (Type of the button has to be Submit).
Now the elements in form are done but it still unable to save the form. You have to set values in Form tab before saving.
In Form Information define Title of the Form and you can just leave other settings as a default value
After that, Click on Redirection part and specify ‘Thank You’ page link. For example, if you want to redirect user to the first page after user submit the form. Type “index.php” for Thank you page. Please note that this link is required.
Click Save&Close button on the top right of the page. Now the form is ready to use
After the Form is finish. You need to create a menu link to the form. To create menu, Click Menus on the top bar, select Main Menu and click Add New Menu item. *As shown below
You will see Menu Manager: New menu item page. On Menu Item Type click Select.
In com_jforms click on Standard Form Layout
After that you will see Required Settings tab on the right. You have to choose a form that you want to link to by Click Select. System will show the form list.
Choose the form you want to use. In this case we’ll click on Register Form that we made.
After you select the Form, Set the Title of menu and Click Save&Close on the top right Toolbar
To preview the site, Click at View Site As shown below.
There will have Register form menu on the left site menu. When you click on it, you will see the form that is ready to use.
Furthermore, you can also add form into an article
Click on MJForms button at the bottom of editor.
Select the form you want to use in this article
You will see MJform’s tag has been added to the article
Once you finish the article you will need to make a menu link to the article.
You can follow the previous menu process that has been linked to the form.
When you go to the article you will see a form that you chose in the article.