Watch for Form Block form elements to be added to the DOM.
- 0.6.1
-
7.1
-
7.0
- Squarespace plan that supports JavaScript.
-
CDN Hosted
Use this option for the quickest way to install this effect (files hosted externally on the jsDelivr, a CDN)
-
Options
-
Page Specific
Use this option if you want to have this effect on only one Page.
-
Add the following code to Page Settings > Advanced > Page Header Code Injection for the Page.
<!-- begin TWC Form Block Form Element Add Watch --> <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > --> <link href="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@ef7e0c70e3f699f4cb9766bbcd7a4a3680b250bb/Block/Form/Form%20Block%20Form%20Element%20Add%20Watch/form%20block%20form%20element%20add%20watch.min.css" rel="stylesheet" type="text/css"> <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@ef7e0c70e3f699f4cb9766bbcd7a4a3680b250bb/Block/Form/Form%20Block%20Form%20Element%20Add%20Watch/form%20block%20form%20element%20add%20watch.min.js" type="module"></script> <!-- end TWC Form Block Form Element Add Watch -->
-
Refer to per-page code injection for details.
-
-
Site-wide
Use this option if you want to have this effect on all Pages.
-
v7.1
-
Add the following code to Website > Pages > Custom Code > Code Injection > FOOTER.
<!-- begin TWC Form Block Form Element Add Watch --> <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > --> <link href="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@ef7e0c70e3f699f4cb9766bbcd7a4a3680b250bb/Block/Form/Form%20Block%20Form%20Element%20Add%20Watch/form%20block%20form%20element%20add%20watch.min.css" rel="stylesheet" type="text/css"> <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@ef7e0c70e3f699f4cb9766bbcd7a4a3680b250bb/Block/Form/Form%20Block%20Form%20Element%20Add%20Watch/form%20block%20form%20element%20add%20watch.min.js" type="module"></script> <!-- end TWC Form Block Form Element Add Watch -->
-
-
v7.0
-
Add the following code to Website > Pages > Website Tools > Custom Code > Code Injection > FOOTER.
<!-- begin TWC Form Block Form Element Add Watch --> <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > --> <link href="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@ef7e0c70e3f699f4cb9766bbcd7a4a3680b250bb/Block/Form/Form%20Block%20Form%20Element%20Add%20Watch/form%20block%20form%20element%20add%20watch.min.css" rel="stylesheet" type="text/css"> <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@ef7e0c70e3f699f4cb9766bbcd7a4a3680b250bb/Block/Form/Form%20Block%20Form%20Element%20Add%20Watch/form%20block%20form%20element%20add%20watch.min.js" type="module"></script> <!-- end TWC Form Block Form Element Add Watch -->
-
-
Refer to Add code to code injection for details.
-
-
-
-
On-site
Use this option to install the full code of this effect (files hosted on your site).
-
Page Specific
Use this option if you want to have this effect on only one Page.
-
Add code from file form block form element add watch.html to Page Settings > Advanced > Page Header Code Injection for the Page.
-
Refer to per-page code injection for details.
-
-
Site-wide
Use this option if you want to have this effect on all Pages.
-
v7.1
- Add code from file form block form element add watch.html to Website > Pages > Custom Code > Code Injection > FOOTER.
-
v7.0
- Add code from file form block form element add watch.html to Website > Pages > Website Tools > Custom Code > Code Injection > FOOTER.
-
Refer to Add code to code injection.
-
-
-
Add or edit a form block.
-
Add a Line field as the first field with a LABEL of fbfeaw and DESCRIPTION of the following...
"callbacks" : { "added" : [ /* the format of each line is the name of a function. following is an example line. copy the example line below and paste after the example line. remove '// ' at the beginning of the pasted line. this has been done once initially */ // "[ optional, enter callback name here between double quotes replacing square brackets ]", "[ optional, enter callback name here between double quotes replacing square brackets ]", ] }
Your callbacks must accept an element as a parameter. Following is a very generalized example of a callback.
<!-- begin TWC FBFEAW Log -->
<script>
( ( ) => {
/*
fbfeaw log
License : < https://tinyurl.com/s872fb68 >
Version : 0.6.1
SS Versions : 7.1, 7.0
Copyright : 2023-2026 Thomas Creedon
Tom's Web Consulting
< http://www.tomsWeb.consulting/ >
*/
// initialize twc module
window.twc = window.twc || { };
// initialize twc fbfeaw sub-module
twc.fbfeaw = twc.fbfeaw || { };
// initialize twc fbfeaw callbacks sub-module
twc.fbfeaw.callbacks =
( ( self ) => {
self [ 'twcFbfeawLog' ] =
( element ) => {
console.log ( 'twcFbfeawLog : ', element );
};
return self;
} )
( twc.fbfeaw.callbacks || { } );
} ) ( );
</script>
<!-- end TWC FBFEAW Log -->-
This code is a base for other effects.
-
Support for removed callbacks has been removed but the old callbacks data structure is still supported. However the removed callbacks won't be called. For your new or updated code you will want to follow the new data structure.
Please consider making a donation.
-
2026-08-19
- reordered code
- fixed bug in find id for form
- bumped version to 0.6.1
-
2026-02-13
- added support for the lightbox design setting
- bumped version to 0.6.0
-
2025-11-09
- removed support for removed callbacks
- fixed issue with code not working when a site visitor views the site
- bumped version to 0.5.0
-
2025-03-01
- restructure how user callbacks are added
- code is active in Preview
- remove jQuery dependency
- bumped version to 0.4.0
-
2024-04-27
- restructured the code
- fix for user callbacks not running
- bumped version to 0.3.0
-
2023-10-09
- remove some guard checks that prevented some nodes being passed to callbacks
- bumped version to 0.2.1
-
2023-07-28
- support calling multiple callbacks
- bumped version to 0.2.0
-
2023-07-14
- initial version