JP Forms

Setting up shop.

first, make sure the component and module are installed. See the installation article for some help.

JPform can be found under extensions > Form Manager

A demo form will be pre-installed to show the functions and capabilities. You are free to change this into your first real form, or start a new one.
If the form is opened you'll see 2 tabs; Edit form, this will take care of the introtext and changing the form status if you want.
More interesting is the tab Form Fields. Below you will find an explanation of all the columns. 

Label

This column will take care of the visual label in the front end. This doesn't have to be unique, but we advise to do so because of the usability.

Name/id (1 word)

The Name/id field has to be unique! This is really important, because otherwise the form doesn't work as good as you're use to. This is the fieldname that's used in the database and in the form as ID. The user won't see this field.

Type

This column is really practical. Here you decide what type of field you want to show in your form. The component will then take care of all the needed settings like validation, type of input and so on.
The different types you can choose from are:

  • Text
  • TextArea
  • Radio buttons
  • Checkboxes
  • Select
  • Phone
  • E-mail
  • Html
  • Split
  • Upload
  • IBAN

 

Required?

This field will trigger the validation and decides where a field is required or not. If required is 'Yes' a * will automatically show up in the frontend to inform the user. 

Placeholder/Html or params('/n' seperated)

The placeholder is the default text that will be used in the frontend. This field is only available for the types Text, TextArea, Phone, E-mail and IBAN. Once a user selects the field the placeholder will disappear.

For the types Radio buttons, Checkboxes, Select and Html this field counts as a parameter where you can fill in your options.

Order

The order will decide the ordering of the field in the frontend and can be manually updated. (protip: you can also drag and drop the fields to change the ordering.)

Tabindex

The tabindex will decide the ordering of the form when you press TAB. This can come in handy if you split a form in 2 columns and want a custom ordering.

Alternative errormessage

The default message is: "Please fill in < labelname > (in lowercase)." Here you can change the message to anything you want (no HTML allowed).

Delete

this deletes the current selected field, not the whole form. You even get a confirmation window for free. (protip: a field will also be deleted if you save it with an empty label).

Type Visual example Params function Automated validation Tips Required

Text

   Placeholder text Check if it is empty, a single character filled in will be enough.    Yes/No
TextArea     Placeholder text Check if it is empty, a single character filled in will be enough.    Yes/No 
Radio buttons   Each option on a separate line. No extra punctuation needed  Check if any selection is made.    Yes/No 
Checkboxes   Each option on a separate line. No extra punctuation needed Check if any selection is made.     Yes/No 
Select   Each option on a separate line. No extra punctuation needed  Check if any but the default value is selected.    Yes/No 
Phone See text    Placeholder text  Check if a number is at least 10 digits long. Any number goes.    Yes/No 
E-mail See text    Placeholder text  Check if it fits something@something.somemoretext    Yes/No 
Html Whatever you want!   Here you can place your HTML n.a.   Use this field to make a custom separator like a header tag. or even a whole embedded video.  n.a.
Split See the demo form  n.a. n.a.   Use the split to save space. We advise the use of 2 column forms. n.a. 
Upload   n.a.  n.a.  Configure the max upload filesize in the options window. n.a. 
IBAN See text Placeholder text  Check if it is empty, a single character filled in will be enough.    Yes/No 

Finishing and showing your form.

If all the fields are in place, you can change the text in the submit button. This can be done directly under the lowest field, next to 'Button label'. You can then save all your effort with the 'save' button on top of the document, just like you're used to. It is also possible to save the form as a copy, or start a new form. Once the form is done you can easily add it to your article, take the following steps.

  1. Save your form, is the status published?
  2. Go to Extensions > Module manager.
  3. Choose 'New' and select 'Jpform Module' (there is already 1 available with a fresh install).
  4. Select your form in the dropdownlist (title).
  5. Form id element will be the unique ID in the frontend.
  6. If jQuery is not loaded on the page where you want to show the form select Yes to include it.
  7. Enter your Thanks page url, can also be an article.
  8. Select the position (on the right) where you want to show the form.
  9. Check the Menu Assigment to select the right pages.
  10. BONUS, fill in the e-mail options tab to send a mail to the user, admin or even multiple BCC adresses (comma separated).
If you run into some problems, check out the FAQ.