Note: If you have installed sample data on your site, it often comes with at least a contact page built with JSN UniForm.

Step 1: Create

Install JSN Template sample data or JSN Uniform.

And then, go to Components → JSN Uniform → Form.

Next, click on the New button, here you can see seven options.

We will start with Blank Form.

Next, go to General input the form’s title.

Select a Captcha Integration is ReCaptcha or Securimage.

Note: having a Captcha will prevent your site from getting spam.

Step 2: Add

In Design tab. You can see Form Type by default is Single Page and Form Layout by default is Vertical, you can change them as needed.

On the Page Layout, you need to Add Field.

Add Field

Click on the Add Field button to select a field.

There are 22 fields in total. You can filter or search field name to select.

After that, you need to update properties for the field, there are Title, Size, Required or Hide.

On the Values tab, you can input Predefined Value and number of Limit text optional.

When you have some fields, you can change the position of fields. You can see the image below. Just a few minutes we've created a simple form use some fields: Single Line Text, Email, Phone, Paragraph Text and Checkbox Field.

Note: To compile with GDPR rule, we add a Checkbox ask for user consent at the end of the form. You can configure this option as below:

Style your form

You can change background style, adjust title color, or add your custom CSS by clicking Form Style on the right.

Note: To make the custom CSS work, make sure you have add CSS Class On General Properties of each elements.

Step 3: Show

Now that our form has been designed in the backend, it’s time to display it in the visitor area.

We have three ways to show the form on the frontend, which are:

• Menu
• In Module Position
• Inside Article

Via Menu Item

Click on Via Menu Item to select a menu.

After that, a new menu item will be created.

You must input Menu Title and click the Save & Close. And then, go to the frontend to check the form.

In the Module Position

Like creating any module position in Joomla, you need to fill in Title and setup Module position.

Inside Article

After clicking on the Inside Article, you can see Plugin Syntax Details window.

Here show a line of text, you need to copy this line and paste to your article where you want to show form.

Now, the menu, article, or module is ready, you can see the final result show in the visitor area.

 

Here is the final form on front end:

Create any forms with JSN UniForm

The type of form you can create with UniForm is not limited. You can check out its full demo in which it shows all kinds forms it can build:

• Job Application
• Takeout Order Form
• Customer Feedback
• Multi-Page Product Survey
• Contact Page With Map
• Appointment Request
• Service Quotation Form
• Article Submission
• Hotel Booking
• Paypal Sample Form

See full demo