Functional HTML Forms | Validation API | Validation Plugin | Ticket Management

Custom Forms using WebLegit

Creating a form

We can use any WYSIWYG editor to create an HTML form. WebLegit allows us the flexibility to add the input fields as per our business requirements and even change them in the future when needed. For example, let's create a simple CONTACT US form where we are capturing user email, phone, and feedback message. The HTML code for the form would be:


	<form>
		<h2> Contact Us </h2>
		Email:        
		<input type="text" name="email"/>
		Phone Number: 
		<input type="text" name="phone"/>
		Feedback:     
		<textarea name="feedback"></textarea>
	</form>

Integrating it with WebLegit

OK, we have done the hard part already. Let us power this form. Register with WebLegit to create an account if it does not exist already. Select the Form Manager from the left navigation panel.

Click on the Add New Form button.
(Required) Enter a name for the form, e.g., say contact_us as in the above case.
(Optional) Enter a description for the form to help remember the specifics if we need to look at it again in the future.
Choose an integration method.

Integration Methods

A Simple form

It is the simplest method to save the data from your forms. There are four configurable fields which can be used for integration:

Success Message: Configure a message shown to the user upon successful form submission. If no message is provided, the default message is displayed.
Success Page: Configure a URL where the user will be redirected after successful form submission. If no URL is provided, the user is redirected to the same page after submission with a default message.
Failure Page: Configure the URL where the user will be redirected after a failure.
Website: This is a required field where we add our website address where we are integrating the form. This ensures that no one abuses our form submissions.

After creating a form in WebLegit, return to the forms dashboard where we can see the form record that we just created. Copy the generated Path for our form.

Now, let's go back to our simple HTML contact form that we created at the beginning. We need to modify the form tag to complete our integration:


	<form method="POST" action="https://app.weblegit.com/form/{FORM_KEY}">

IMPORTANT: The FORM_KEY is unique for every form, so make sure you replace it with the correct form key, which is part of the Path property that we copied from the form dashboard.

That's it! Our form is now ready for submissions.

B Integrate using WebLegit Plugin

The plugin integration is much more secure and prevents someone from abusing the form. To begin, go to Website integration to generate a plugin (if not done already). This requires adding our domain name (Website) where we will use the form. Using WebLegit Plugin for the forms has additional advantages like total control over form submission and displaying the form submission message on the same page.

Add the JQuery library if we do not have it already on our HTML page. It is required for the WebLegit plugin to work.
```
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
				
```

Copy the WebLegit plugin library and add it to the page where we have our HTML form:


	<script src="https://verify.weblegit.com/js/{YOUR_PLUGIN_KEY}/weblegit-loader.js"></script>

Complete creating the form with WebLegit plugin as the integration method.
Success Message: Configure a message shown to the user upon successful form submission. If no message is provided, the default message is displayed.
(Optional) Success Page: Configure a URL where the user will be redirected after successful form submission. If no URL is provided, the user stays on the same page.
(Optional) Failure Page: Configure the URL where the user will be redirected after a failure.
After creating a form in WebLegit, return to the forms dashboard where we can see the form record that we just created. Copy the key portion of the Path field for our form. The Path looks like https://app.weblegit.com/form/{FORM_KEY}. Ensure we just copy the FORM_KEY portion of it.

We add a couple of properties to the form tag, after which the code looks like this:


	<form method="POST" class="weblegit-form" data-weblegit-formid="{FORM_KEY}">

IMPORTANT: The FORM_KEY is unique for every form, so make sure you replace it with the correct form key, which is part of the Path property that we copied from the form dashboard.

That's it! Our form is now ready for submissions.

Advanced Settings

We have additional options available for the forms under the advanced settings.

a Email Validation

If we have any field on the form which stores email addresses, we have the option to validate the email address before the form is saved. This not only allows us to avoid storing invalid email addresses but also gives an option to correct any typo mistakes in their email addresses.

b Send Notification

This provides the capability to send notifications to any given email address whenever a submission happens for the given form.

c Create Ticket

The forms provide an option to create a support ticket upon form submission. The ticket can be assigned to a particular category and individual team member available as a dropdown. This is an important feature that enables using the form as an input for the help desk ticket.