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

Custom Forms using Weblegit

Creating a form

We can use any WYGSIG editor to create a HTMl form. Weblegit allows us the flexibility to add the input fields as per our business requirements and even change it in future when we need to. For example lets 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>

Integerating 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 exists already. Select the Form Manager from the left navigation panel.

Click on the Add n New Form button
(Required) Enter a name for the form , eg. say contact_us as in the above case
(Optional) We can enter some descirption for the form to help us remember the specifics if we have to look at it again in future
Choose an integration method

Integeration 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: This allows us to configure a message that will be shown to the user upon successfull form submission. If no message is provided then the default message is displayed
Success Page: This allows us to configure a url where the user will be redirected after successfull form submission. If no url is provided then user is redirected to the same page after the successfull submission default message
Failure Page: Configure the user to be redirected after a failure
Website: This is a required field where we add our website address where we are integrating the form. This would ensure that no one abuses our form submissions.
After creating a form in Weblegit we need to return back to forms dashboard where we can see the form record that we just created. Copy the generated Path for our form.
Now lets go back to our simple HTML contact form that we created in the begining. We need to modify the form tag to compelete our integration

We add a property for method and action for the form tag. After that the code looks like

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

IMPORTANT: the FORM_KEY is unque for every form so make sure you replace with the correct form key which is part of the Path property that we copied from the form dashbaord.

Thats it !!! Our form is now ready for submissions.

B Integrate using Weblegit Plugin

The plugin integration is much more secure and prevents some one from abusing the form. To begin we first need to go to Website integration to generate a plugin for us (if we have not done so already). This would require us to add our domain name (Website) where we would be using the form. Using Weblegit Plugin for the forms have some additional advantages like total control on the form submission, displaying the form submission message on the same page as opposed to user begin redirected to a success 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: This allows us to configure a message that will be shown to the user upon successfull form submission. If no message is provided then the default message is displayed
(Optional)Success Page: This allows us to configure a url where the user will be redirected after successfull form submission. If no url is provided then user stays on the same page
(Optional)Failure Page: Configure the user to be redirected after a failure.
After creating a form in Weblegit we need to return back to forms dashboard where we can see the form record that we just created. Copy key portion the Path field for our form. The Path looks like https://app.weblegit.com/form/{FORM_KEY}. Make sure we just copy the FORM_KEY portion of it

We add couple properties for the form tag after which the code looks like

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

IMPORTANT: the FORM_KEY is unque for every form so make sure you replace with the correct form key which is part of the Path property that we copied from the form dashbaord.

Thats 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 then we have an option to validate the email address before the form is saved. This not only allows us to avoid storing invalid email addresses, it also gives an option to correct any typo mistake with their email address.

b Send Notification

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

b Create Ticket

The forms provide us an option to create a support ticket upon the form submission. The ticket can be assigned to a particular category and individual team member which are available as a drop down. This is an important feature which enables to use the form as an input for the help desk ticket.