# Creating the HTML form file

> This part of the tutorial shows how to design a custom HTML form file, using the UiPath APIs.

This part of the tutorial shows how to design a custom HTML form file, using the UiPath APIs.

1. Create an HTML file, and give the form a title, using the `<title>` tag.

   For example, `<title>My HTML Form</title>`
2. Apply some styling to the form, based on your use case.

   For this example, CSS styling is applied, using the `<style type="text/css">` tag.
3. After you apply styling, add the UiPath APIs as JavaScript inside your HTML file, as follows:
   ```
   <script type="text/javascript">
               var uiPathApi = {
                   getValue: function (elementId) {
                       // this is a callback, being called from the workflow
                       // enter your own code to get element values
                       var el = document.getElementById(elementId);
                       if (el.value == undefined) {
                           return el.innerHTML;
                       } else {
                           if (el.checked == undefined) {
                               return el.value;
                           } else {
                               return el.checked;
                           }
                       }
                   },
           
                   setValue: function (elementId, value) {
                       // this is a callback, being called from the workflow
                       // enter your own code to set element values
                       var el = document.getElementById(elementId);
                       if (el.value == undefined) {
                           el.innerHTML = value;
                       } else {
                           if (el.checked == undefined) {
                               el.value = value;
                           } else {
                               el.checked = value;
                           }
                       }
                   },
           
                   // Call this to trigger a "Form Message" event
                   // This function is set by the forms engine after the page loads,
                   // but declaring it here as empty helps with code autocompletion
                   sendMessage: function (id, value) { },
               };
       </script>
   ```
4. Create a form event for each button, using `uipathAPI.sendMessage`, inside a `<script>` tag.

   For this example, create an event for when the **OK** button is clicked:

   ```
   function okClicked() {
               uiPathApi.sendMessage("ok clicked");
           }
   ```

   And then create an event for when the **Cancel** button is clicked:

   ```
   function cancelClicked() {
               uiPathApi.sendMessage("cancel clicked");
           }
   ```
5. Start building the form by adding components.
6. Add the title of the form inside a `` tag.

   For this example, use the following title:

   ```
   Welcome to UiPath! Click OK to continue or Cancel to close this automation.
   ```
7. Add the **Button** components and define the events that they trigger, similarly to how you would configure a **Button** component inside the **Form Builder**.

   For this example, add the following buttons and the corresponding events:

   ```
   
           <button class="confirm" onclick="okClicked()">OK</button>
           <button class="cancel" onclick="cancelClicked()">Cancel</button>
       
   ```
8. Add the live date and time at the bottom of the form, using an argument named as `time`.
   ```
   Current date/time is N/A
   ```

After you finish designing your HTML file, start building your project in Studio using this file.