# Custom Button that opens a HTML form

**URL:** <https://community.hubspot.com/t/custom-button-that-opens-a-html-form/65034>\
**Category:** APIs & Integrations\
**Created:** [September 13, 2022, 11:33pm UTC](https://community.hubspot.com/t/custom-button-that-opens-a-html-form/65034 "2022-09-13T23:33:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stanza](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stanza/32/5125_2.png) [@Stanza](https://community.hubspot.com/u/Stanza)\
**Post date:** [September 13, 2022, 11:33pm UTC](https://community.hubspot.com/t/custom-button-that-opens-a-html-form/65034/1 "2022-09-13T23:33:32Z")

</div>

Hi all,

Is it possible to create a **custom button** on the **company card** that opens a modal dialog that allows user input?

The user enters data and then clicks ok om the form and it should return back to the company card and refresh the page.

Is this at all possible if so then please point me ot the right documentation.

I am happy to achieve his through custom coding, just want to know if it’s possible and whats involved.

Thanks

---

<div class="post-metadata">

**Author:** ![PPaiva](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ppaiva/32/13781_2.png) [@PPaiva](https://community.hubspot.com/u/PPaiva)\
**Post date:** [September 14, 2022, 11:06pm UTC](https://community.hubspot.com/t/custom-button-that-opens-a-html-form/65034/2 "2022-09-14T23:06:33Z")

</div>

Hi @Stanza

It’s possible through the CRM Cards API .

You create an app with a card and add actions to open Iframe modal pages.

Reference docs here:

[https://developers.hubspot.com/docs/api/crm/extensions/custom-cards](https://developers.hubspot.com/docs/api/crm/extensions/custom-cards#tab-3)

Best regards

Paulo paiva

[www.sollogica.com](https://www.sollogica.com)

---

<div class="post-metadata">

**Author:** ![Stanza](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stanza/32/5125_2.png) [@Stanza](https://community.hubspot.com/u/Stanza)\
**Post date:** [September 16, 2022, 3:38am UTC](https://community.hubspot.com/t/custom-button-that-opens-a-html-form/65034/3 "2022-09-16T03:38:37Z")

</div>

Thanks @PPaiva , I’m actually looking at CRM Development Tools inside my sandbox portal.

I have successfully deployed the CRM card for the iframe sample code located at [https://github.com/HubSpot/ui-extensions-examples/tree/main/display-iframe](https://github.com/HubSpot/ui-extensions-examples/tree/main/display-iframe)

and I can open up the modal dialog.

What I want to do is when the user finishes entering data on the HTML page and clicks on ‘Submit’ I want that action to pass the information from the HTML form back into the HubSpot card AND REFRESH the HubSpot card to display the card with the updated values.

From the looks of it I think the HubSpot card DOES gets refreshed when the user closes the model dialog but I just to confirm ?

Can this be done through the onclick action for 'IFRAME ’ type ?

---

<div class="post-metadata">

**Author:** ![PPaiva](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ppaiva/32/13781_2.png) [@PPaiva](https://community.hubspot.com/u/PPaiva)\
**Post date:** [September 16, 2022, 3:57pm UTC](https://community.hubspot.com/t/custom-button-that-opens-a-html-form/65034/4 "2022-09-16T15:57:42Z")

</div>

The form submit is under your control, as the page inside the IFRAME is yours.

From the form postback you send a card Update via [Cards API.](https://developers.hubspot.com/docs/api/crm/extensions/custom-cards)

After the update is made you close the modal through:

`window.parent.postMessage(JSON.stringify({"action": "DONE"}), "*");`

The details to close the modal are also in the Card API, on the webhooks tab.

Best regards

Paulo paiva

[www.sollogica.com](https://www.sollogica.com)

---

<div class="post-metadata">

**Author:** ![Stanza](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stanza/32/5125_2.png) [@Stanza](https://community.hubspot.com/u/Stanza)\
**Post date:** [September 18, 2022, 11:16pm UTC](https://community.hubspot.com/t/custom-button-that-opens-a-html-form/65034/5 "2022-09-18T23:16:20Z")

</div>

Fantastic !. Thanks @PPaiva will check it out.

---

<div class="post-metadata">

**Author:** ![PPaiva](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ppaiva/32/13781_2.png) [@PPaiva](https://community.hubspot.com/u/PPaiva)\
**Post date:** [September 19, 2022, 1:01pm UTC](https://community.hubspot.com/t/custom-button-that-opens-a-html-form/65034/6 "2022-09-19T13:01:57Z")

</div>

Your welcome @Stanza. Don’t forget to mark as solved!
