# How to add a custom button, such as a Cancel button

**URL:** <https://discuss.workflowgen.com/t/how-to-add-a-custom-button-such-as-a-cancel-button/1370>\
**Category:** Form Designer\
**Created:** [April 16, 2019, 4:13pm UTC](https://discuss.workflowgen.com/t/how-to-add-a-custom-button-such-as-a-cancel-button/1370 "2019-04-16T16:13:08Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![qpomarel](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/qpomarel/32/262_2.png) [@qpomarel](https://discuss.workflowgen.com/u/qpomarel)\
**Post date:** [April 16, 2019, 4:13pm UTC](https://discuss.workflowgen.com/t/how-to-add-a-custom-button-such-as-a-cancel-button/1370/1 "2019-04-16T16:13:08Z")

</div>

## Overview

By editing the form HTML source code, you can add another button (such as **Cancel** button), next to the **Submit** and **Save as draft** buttons.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/62171600def7c4701cfd9211a1291668a0a63435.png)

## Update the form HTML

**Important:** Be careful when manually updating the `FORM_HTML` data; you should create a backup before modifying it.

1. Click the `FORM_HTML` data in the **Data** tab.

![display%20data%20form](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/5562e6d901cecb028f50db776046d249558848a2.gif)

1. Click the pencil icon to display the content.

![display%20code](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/346fd2b2e493433c0599bd000fcb20c697e20a11.gif)

1. Add your button code after the `saveAsDraftButton` button. (You can use the following code example below).

2. Save and close, then go back to the **Form** tab and click the **Save** button.

### Button example

```auto
<div class="Button">
    <input id="cancelButton" style="" onclick="cancelButton_Click" type="button" value="Cancel">
</div>

```

## Configure the click event for the new button

Once your button is added, you need to add a function in the .NET code behind. You can use the following example:

```auto
protected void cancelButton_Click(object sender, EventArgs e)
{
    // Your code... 
    // If you modify the form field's value then you have to call the instruction below at the end.
    // this.SaveFormData(this.FormData, true);

    SubmitToWorkflow(true); //Use this code line to submit the form
}

```