# Click Code Block - Open Form Popup

**URL:** <https://community.elfsight.com/t/click-code-block-open-form-popup/91164>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [December 24, 2024, 8:42am UTC](https://community.elfsight.com/t/click-code-block-open-form-popup/91164 "2024-12-24T08:42:45Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [December 24, 2024, 8:42am UTC](https://community.elfsight.com/t/click-code-block-open-form-popup/91164/1 "2024-12-24T08:42:45Z")

</div>

Description: Click Code Block - Open Form Popup in Squarespace.

Suppose you have a Code Block like this. This code will create a Button.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/e/4e4ca90d582f13a088524757cfed5863a91336d9.png)

Note: This code will create button link.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/2/a20d4b2771d3b694f65cc86732ff7b9016e27edf.png)

Result

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/d/4def0d27bdd4b12bac1f452b16555d6fa0f8e84f.png)

We can follow these steps to make Form Popup appears when users click this Code Block Button.

**#1.** First, click a Blank Page in Not Linked

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/f/ff3c64a7312bab728cca11de5a7a6dcae2b1b8d1.jpeg)

You can place name/url: **Form Popup – /form-popup**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/e/0e0e4807c447e858d626114380a76426b7ff2690.png)

**#2.** Add a Form Block to this page

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/8/08eecc70c4968e1d060ab8eb0c3124310a9b9a31.png)

**#3.** Find ID of Form Block  
In my example, it is: **#block-yui\_3\_17\_2\_1\_1732935090827\_2496**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/1/81f54c30b0977a0791c8a055d69d0ee1dc1721ab.png)

**#4.** In Code Block, find

```auto
target="_blank"

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/3/83ef381e8cd28e16760810b5fbe045779f8fabea.png)

and change it to

```auto
target="_self"

```

If you don’t see the target attribute, you can skip this step.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/8/48636624619f3b7addf1cf55f8bf9a4fa7f8acf7.png)

**#5.** Install **[this plugin](https://www.will-myers.com/products/p/modal-popups-in-squarespace?peachs_apc=tuan-phan)**  
You can use code: TUAN to get 10% discount.  
Plugin will give you some code to Code Injection Header/Footer

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/e/7e856b09ee1edae3322d17905cb96bbaa972b447.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/0/80aaf2872abc328f8b762bb691e73cbcaf279e25.png)

**#6.** Edit Code Block \> Edit this link

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/8/087d60cb73c05b12db1d007e084858668e9437db.png)

to this link

```auto
#wm-popup=/form-popup#block-yui_3_17_2_1_1732935090827_2496

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/b/1b159eb565a290ae49127b7b8caeee91df9764d0.png)

**#7.** Result  
When you click button \> Form Popup will appear.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/f/6fa2e908c265061bd97cd403ab773d0bc54c0a1d.png)

**#8.** If you have 2 Code Blocks on Same Page. Just add 2 Form Blocks to /form-popup page

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/e/9e8dd8a59a6854d604b61e8a322a26cab09e6f18.png)

Next, find ID of both.  
In my example, it is: **#block-yui\_3\_17\_2\_1\_1732936061586\_2136** & **#block-yui\_3\_17\_2\_1\_1732935090827\_2496**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/7/c766325c32cec3b0f85d2196246df74066cd0b01.jpeg)

and use this format to link in Code Block 2

```auto
#wm-popup=/form-popup#block-yui_3_17_2_1_1732936061586_2136

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/e/7e72126ec8148f0e2f6f0d76e95e190328272c0b.png)

Format

```auto
#wm-popup=/page-url#form-block-ID

```