# フォームスタイル

**URL:** <https://community.hubspot.com/t/topic/40997>\
**Category:** Tips, Tricks & Best Practices\
**Created:** [July 20, 2021, 11:26am UTC](https://community.hubspot.com/t/topic/40997 "2021-07-20T11:26:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anonymous\_6adf0cc00c2d5292e343e142dc4e3a81](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anonymous_6adf0cc00c2d5292e343e142dc4e3a81/32/99730_2.png) [@Anonymous\_6adf0cc00c2d5292e343e142dc4e3a81](https://community.hubspot.com/u/Anonymous_6adf0cc00c2d5292e343e142dc4e3a81)\
**Post date:** [July 20, 2021, 11:26am UTC](https://community.hubspot.com/t/topic/40997/1 "2021-07-20T11:26:14Z")

</div>

リンク先のように、CTAをクリックするとURL遷移せずにフォームが表示されるようにするにはどのように設定したらよろしいでしょうか？

> **[Get a Tour Today and Experience Productivity | Hubstaff Demo](https://hubstaff.com/demo)**
>
> Get a Tour Today and Experience Productivity | Hubstaff Demo

 ![スクリーンショット 2021-07-20 20.23.01.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/8/1825ba985fa65f674b92deec149407a1b6fd6675.jpeg)

---

<div class="post-metadata">

**Author:** ![neemo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/neemo/32/46638_2.png) [@neemo](https://community.hubspot.com/u/neemo)\
**Post date:** [July 21, 2021, 2:00am UTC](https://community.hubspot.com/t/topic/40997/2 "2021-07-21T02:00:12Z")

</div>

[@真之介](https://community.hubspot.com/t5/user/viewprofilepage/user-id/213661) さん、こんにちは。

フォーム作成時、「フォームのタイプを選択」の画面で「ポップアップボックス」をご選択いただくことで再現可能かと存じますが、いかがでしょうか？

こちらも合わせてご確認いただけたらさらに理解が深まるかと思います。  
[ポップアップフォームを作成する](https://knowledge.hubspot.com/jp/pop-up-forms/create-pop-up-forms)

ご参考になりましたら幸いです。

 ![20210721_ポップアップボックス選択_スクリーンショット 2021-07-21 105722.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/4/54d16543caabbe0a089745651e19beb77439187d.png)

---

<div class="post-metadata">

**Author:** ![Anonymous\_6adf0cc00c2d5292e343e142dc4e3a81](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anonymous_6adf0cc00c2d5292e343e142dc4e3a81/32/99730_2.png) [@Anonymous\_6adf0cc00c2d5292e343e142dc4e3a81](https://community.hubspot.com/u/Anonymous_6adf0cc00c2d5292e343e142dc4e3a81)\
**Post date:** [July 26, 2021, 4:33am UTC](https://community.hubspot.com/t/topic/40997/3 "2021-07-26T04:33:42Z")

</div>

ありがとうございます！

どうやら、marykashima さんの回答のように、HubSpot外で制御しているっぽいです。

---

<div class="post-metadata">

**Author:** ![marykashima](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/marykashima/32/13515_2.png) [@marykashima](https://community.hubspot.com/u/marykashima)\
**Post date:** [July 21, 2021, 2:02am UTC](https://community.hubspot.com/t/topic/40997/4 "2021-07-21T02:02:32Z")

</div>

[@真之介](https://community.hubspot.com/t5/user/viewprofilepage/user-id/213661) さんこんにちは。

まず、CTAはイベント発火は出来ません。URLに依存しますので、上記の要求は難しいです。

回避策として以下があります。

1. CTAを優先し、素直に遷移させる。
2. [ポップアップフォーム](https://knowledge.hubspot.com/jp/pop-up-forms/create-pop-up-forms)を使う。ただし、CTAの代わりにコールアウトというポップアップのボタンになる（ビュー数、クリックスルー率、フォームビュー数、フォームコンバージョン率、送信数の計測はできます） 。動き的にはポップアップのコールアウトボタン→ポップアップのフォームです。ただし、フォームの項目数が最大4に限られます。

さて…これだけだとなんなので、参考のHubstuffのサイトを見てみました。こちらもHubSpotを使われていました。  
ではどうやっているか。

- リンクボタンはCTAを用いていません。
- #requestDemo\_dialog というページ内リンクで、隠してあるフォームをjsで表示させていました。

こちらは通常のフロントエンド技法で解決できるかと思います。

参考になれば幸いです。

---

<div class="post-metadata">

**Author:** ![Anonymous\_6adf0cc00c2d5292e343e142dc4e3a81](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anonymous_6adf0cc00c2d5292e343e142dc4e3a81/32/99730_2.png) [@Anonymous\_6adf0cc00c2d5292e343e142dc4e3a81](https://community.hubspot.com/u/Anonymous_6adf0cc00c2d5292e343e142dc4e3a81)\
**Post date:** [July 26, 2021, 4:32am UTC](https://community.hubspot.com/t/topic/40997/5 "2021-07-26T04:32:30Z")

</div>

ありがとうございます！

HubSpot単独機能ではないのですね！どこかに設定項目があるかと思っていました！
