Create a new Form

Support. Ask Support Questions Here
coquilla18
Posts: 16
Joined: Fri 24 Jan 2014 12:48 pm

Create a new Form

Postby coquilla18 » Fri 24 Jan 2014 3:37 pm

To create a new Form, click on the icon “New”

forms.jpg
forms.jpg (33.08 KiB) Viewed 11188 times


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.

design.jpg
design.jpg (27.02 KiB) Viewed 11188 times


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
textbox.jpg
textbox.jpg (1.77 KiB) Viewed 11188 times


To create Text Area multi line input
textarea.jpg
textarea.jpg (1.99 KiB) Viewed 11188 times


To create Tag Radio input (able to choose only one)
radio.jpg
radio.jpg (1.98 KiB) Viewed 11188 times


To create Tag Select (Dropdown List menu)
list.jpg
list.jpg (1.67 KiB) Viewed 11188 times


To create Tag Check Box
checkbox.jpg
checkbox.jpg (2.18 KiB) Viewed 11188 times


To create Upload File input
file.jpg
file.jpg (1.51 KiB) Viewed 11188 times


To create Button (Submit and Reset)
button.jpg
button.jpg (1.61 KiB) Viewed 11188 times


To insert data, message, picture or HTML Code into a form
htmlelement.jpg
htmlelement.jpg (2.72 KiB) Viewed 11188 times



- Advanced Tag


To create a Tag for selecting date in Form
date.jpg
date.jpg (1.63 KiB) Viewed 11188 times


To create List of data from database
dblist.jpg
dblist.jpg (1.85 KiB) Viewed 11188 times


To create email input
email.jpg
email.jpg (1.53 KiB) Viewed 11188 times


To calculate form values and display
simple_calculator.jpg
simple_calculator.jpg (3.08 KiB) Viewed 11188 times



- Automatic Tag (Invisible in Front End)

Keep form user record from joomla database
juser.jpg
juser.jpg (1.73 KiB) Viewed 11187 times


Keep submitted date data
entrydate.jpg
entrydate.jpg (1.96 KiB) Viewed 11187 times


Keep form user’s IP Address
image.jpg
image.jpg (1.75 KiB) Viewed 11187 times


Random value and save to database when form submitted
random.jpg
random.jpg (2.23 KiB) Viewed 11187 times


Create Tag Hidden
hidden_field.jpg
hidden_field.jpg (3.06 KiB) Viewed 11187 times




- Spam-Control

Create Radom characters Captcha
crecaptcha.jpg
crecaptcha.jpg (2.45 KiB) Viewed 11187 times


Create Image Captcha
secureimage_captcha.jpg
secureimage_captcha.jpg (3.03 KiB) Viewed 11187 times



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

design (1).jpg
design (1).jpg (34.03 KiB) Viewed 11187 times


You will get an Input Box tag. To Change tag label, Go to Element tab. As shown in the picture.

design (2).jpg
design (2).jpg (26.31 KiB) Viewed 11187 times



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.

element_properties.jpg
element_properties.jpg (25.53 KiB) Viewed 11187 times


To Change the message in front of the Tag, Edit Label to the name you want.

element_properties (1).jpg
element_properties (1).jpg (33.34 KiB) Viewed 11187 times



For example, before name input it should have title. Drag a List tag as shown in the picture.
toolbar.jpg
toolbar.jpg (24.65 KiB) Viewed 11187 times



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.
element_properties (2).jpg
element_properties (2).jpg (30.24 KiB) Viewed 11187 times



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.
element_properties (3).jpg
element_properties (3).jpg (29.23 KiB) Viewed 11187 times



Create Tag Text Box to input lastname as shown below.
element_properties.jpg
element_properties.jpg (26.85 KiB) Viewed 11186 times



Create Tag Text Area to input address as shown below
toolbar.jpg
toolbar.jpg (28.51 KiB) Viewed 11186 times



Create Tag Text Box to input phone number.
toolbar_phonenumber.jpg
toolbar_phonenumber.jpg (39.67 KiB) Viewed 11186 times



For example, use Radio tag for sex input
toolbar_radio.jpg
toolbar_radio.jpg (36.2 KiB) Viewed 11186 times



Define values in Element tab as shown below.
element_value.jpg
element_value.jpg (41.32 KiB) Viewed 11186 times



For instance, create Check Box tag for the interest input. Settings in Element are similar to Radio tag.
toolbar_checkbox.jpg
toolbar_checkbox.jpg (44.03 KiB) Viewed 11186 times


Use Date tag in Advanced tab for input birthday.
toolbar_date.jpg
toolbar_date.jpg (35.9 KiB) Viewed 11186 times


To use DBList tag, drag the tag to the right side of the screen
toolbar_dblist.jpg
toolbar_dblist.jpg (31.91 KiB) Viewed 11186 times


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.
database.jpg
database.jpg (78.58 KiB) Viewed 11186 times



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.
DBList.jpg
DBList.jpg (46.09 KiB) Viewed 11186 times


Note that Email tag in Advanced tab is still unable to use
email.jpg
email.jpg (23.34 KiB) Viewed 11186 times


Using Simple Calculator to calculate value from forms and display
simple_calculator.jpg
simple_calculator.jpg (27.21 KiB) Viewed 11186 times


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
calculate.jpg
calculate.jpg (40.99 KiB) Viewed 11186 times


Now Click on Simple Calculator or Calculator Icon. We will set an equation into a simple calculator box.
calculator.jpg
calculator.jpg (29.53 KiB) Viewed 11186 times


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

calforms.jpg
calforms.jpg (9.03 KiB) Viewed 11186 times



The final procedure to create a form is to create a submit button.

button.jpg
button.jpg (35.34 KiB) Viewed 11186 times


In Element tab change Label and Type (Type of the button has to be Submit).

label.jpg
label.jpg (39.87 KiB) Viewed 11186 times



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.

form.jpg
form.jpg (25.79 KiB) Viewed 11186 times


Click Save&Close button on the top right of the page. Now the form is ready to use
forms.jpg
forms.jpg (36.42 KiB) Viewed 11186 times



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
menu.jpg
menu.jpg (63.86 KiB) Viewed 11186 times


You will see Menu Manager: New menu item page. On Menu Item Type click Select.
menu_manager.jpg
menu_manager.jpg (41.85 KiB) Viewed 11186 times


In com_jforms click on Standard Form Layout
select_menu.jpg
select_menu.jpg (58.85 KiB) Viewed 11186 times



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.
required_setting.jpg
required_setting.jpg (43.3 KiB) Viewed 11186 times


Choose the form you want to use. In this case we’ll click on Register Form that we made.
form_choose.jpg
form_choose.jpg (33.47 KiB) Viewed 11186 times


After you select the Form, Set the Title of menu and Click Save&Close on the top right Toolbar
new_menu.jpg
new_menu.jpg (38.26 KiB) Viewed 11186 times


To preview the site, Click at View Site As shown below.
view_site.jpg
view_site.jpg (59.68 KiB) Viewed 11186 times


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.
register_form.jpg
register_form.jpg (36.16 KiB) Viewed 11186 times


Furthermore, you can also add form into an article
add_new_article.jpg
add_new_article.jpg (30.94 KiB) Viewed 11186 times


Click on MJForms button at the bottom of editor.
MJForms.jpg
MJForms.jpg (28.75 KiB) Viewed 11186 times


Select the form you want to use in this article
Calform.jpg
Calform.jpg (13.3 KiB) Viewed 11186 times


You will see MJform’s tag has been added to the article
mjform_article.jpg
mjform_article.jpg (19.47 KiB) Viewed 11186 times


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.

calculator_form.jpg
calculator_form.jpg (45.05 KiB) Viewed 11186 times