Creating a Custom Input Field

Introduction

In this article, we will guide you through the process of creating a custom input field using HTML. In Joget, you can create an input field in HTML and save the value directly into the database without configuring the connection. In this demonstration, we will create 3 different input fields:

• Text Field
• Date Field
• Checkbox Field

Do note that we are not limited to only these fields and that there are various other fields you can implement into the form.

How does it work?

1. In Form Builder, add a Custom HTML  form element to a form   
2. Enter the ID as 'name' and the script below into the Custom HTML to create a Text Field. 

   <input type="text" name="name" value=""><br>

3. Click Advanced Option and enable the Auto Populate Saved Value? setting to ensures the field is automatically populated whenever the form is loaded.
4. To create Date Field, repeat step 1, 2 and 3 with ID as 'dob' and Custom HTML as below: 

   <input type="date" id="dob" name="dob" value="">

5. To create Checkbox , repeat step 1, 2 and 3 with ID as 'agreement' and Custom HTML as below: 

   <input type="checkbox" id="agreement" name="agreement" value="agree">
   <label for="agreement">I agree to the terms and conditions</a></label><br><br>

6. Save and Launch to view the fields

Expected Outcome

Once you have implemented the fields, here is what it would look like in runtime:

Download sample app