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>
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.
It is the simplest method to save the data from your forms. There are four configurable fields which can be used for integration:
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.
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.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://verify.weblegit.com/js/{YOUR_PLUGIN_KEY}/weblegit-loader.js"></script>
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.
We have additional options available for the forms under the advanced settings.
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.
This provides the capability to send notifications to any given email address whenever a submission happens for the given form.
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.