- use html embed to call webhook instead of webstudio's built in webhook form

This commit is contained in:
oonyeje 2025-11-23 09:16:53 -05:00
parent 364b7abe01
commit 56db658d81
7 changed files with 500 additions and 435 deletions

View File

@ -1,10 +1,10 @@
{
"build": {
"id": "13d8dcf9-319e-47d3-82d1-0a06f2bfb26d",
"id": "e9c81588-e714-4267-926a-2c31ca888645",
"projectId": "363652e3-9846-4534-acdf-9b2b3c66eec0",
"version": 1256,
"createdAt": "2025-11-23T06:42:16.542+00:00",
"updatedAt": "2025-11-23T06:42:16.542+00:00",
"version": 1380,
"createdAt": "2025-11-23T14:14:47.33+00:00",
"updatedAt": "2025-11-23T14:14:47.33+00:00",
"pages": {
"meta": {
"siteName": "Inasa Healthcare",
@ -16253,78 +16253,6 @@
"value": "space-between"
}
}
],
[
"ZrdSbwHVuyzXRmNS_xPyp:5zaWVFAeAfWgFjJNQ0GET:display:",
{
"breakpointId": "5zaWVFAeAfWgFjJNQ0GET",
"styleSourceId": "ZrdSbwHVuyzXRmNS_xPyp",
"property": "display",
"value": {
"type": "keyword",
"value": "block"
}
}
],
[
"YsGnNcybjzFveW5y_-e6_:5zaWVFAeAfWgFjJNQ0GET:display:",
{
"breakpointId": "5zaWVFAeAfWgFjJNQ0GET",
"styleSourceId": "YsGnNcybjzFveW5y_-e6_",
"property": "display",
"value": {
"type": "keyword",
"value": "block"
}
}
],
[
"6l4ZCxUSebPyvoHNEz8yY:5zaWVFAeAfWgFjJNQ0GET:display:",
{
"breakpointId": "5zaWVFAeAfWgFjJNQ0GET",
"styleSourceId": "6l4ZCxUSebPyvoHNEz8yY",
"property": "display",
"value": {
"type": "keyword",
"value": "block"
}
}
],
[
"S8fFnRCz-tEWAWux-jtlY:5zaWVFAeAfWgFjJNQ0GET:display:",
{
"breakpointId": "5zaWVFAeAfWgFjJNQ0GET",
"styleSourceId": "S8fFnRCz-tEWAWux-jtlY",
"property": "display",
"value": {
"type": "keyword",
"value": "block"
}
}
],
[
"IOOkPVARTbkVGWX63xW2v:5zaWVFAeAfWgFjJNQ0GET:display:",
{
"breakpointId": "5zaWVFAeAfWgFjJNQ0GET",
"styleSourceId": "IOOkPVARTbkVGWX63xW2v",
"property": "display",
"value": {
"type": "keyword",
"value": "block"
}
}
],
[
"lr-RIXHV8cambOOQAwdko:5zaWVFAeAfWgFjJNQ0GET:display:",
{
"breakpointId": "5zaWVFAeAfWgFjJNQ0GET",
"styleSourceId": "lr-RIXHV8cambOOQAwdko",
"property": "display",
"value": {
"type": "keyword",
"value": "block"
}
}
]
],
"styleSources": [
@ -17139,48 +17067,6 @@
"type": "local",
"id": "UJTpjUHtMgi8NFW_ip_Da"
}
],
[
"ZrdSbwHVuyzXRmNS_xPyp",
{
"type": "local",
"id": "ZrdSbwHVuyzXRmNS_xPyp"
}
],
[
"YsGnNcybjzFveW5y_-e6_",
{
"type": "local",
"id": "YsGnNcybjzFveW5y_-e6_"
}
],
[
"6l4ZCxUSebPyvoHNEz8yY",
{
"type": "local",
"id": "6l4ZCxUSebPyvoHNEz8yY"
}
],
[
"S8fFnRCz-tEWAWux-jtlY",
{
"type": "local",
"id": "S8fFnRCz-tEWAWux-jtlY"
}
],
[
"IOOkPVARTbkVGWX63xW2v",
{
"type": "local",
"id": "IOOkPVARTbkVGWX63xW2v"
}
],
[
"lr-RIXHV8cambOOQAwdko",
{
"type": "local",
"id": "lr-RIXHV8cambOOQAwdko"
}
]
],
"styleSourceSelections": [
@ -18227,60 +18113,6 @@
"UJTpjUHtMgi8NFW_ip_Da"
]
}
],
[
"nCWB4aT4tCOe1SLIg0EJQ",
{
"instanceId": "nCWB4aT4tCOe1SLIg0EJQ",
"values": [
"ZrdSbwHVuyzXRmNS_xPyp"
]
}
],
[
"qUNrtgBO4ZC7hDXH6CmiF",
{
"instanceId": "qUNrtgBO4ZC7hDXH6CmiF",
"values": [
"YsGnNcybjzFveW5y_-e6_"
]
}
],
[
"diZ2s_RIk9uueAe3SA1o4",
{
"instanceId": "diZ2s_RIk9uueAe3SA1o4",
"values": [
"6l4ZCxUSebPyvoHNEz8yY"
]
}
],
[
"pOx5BDVrSoqMT_Dc_ssur",
{
"instanceId": "pOx5BDVrSoqMT_Dc_ssur",
"values": [
"S8fFnRCz-tEWAWux-jtlY"
]
}
],
[
"DkJml0aWi-KlpwjUPUHAa",
{
"instanceId": "DkJml0aWi-KlpwjUPUHAa",
"values": [
"IOOkPVARTbkVGWX63xW2v"
]
}
],
[
"mhGs_MveDG8K7LdEluI-y",
{
"instanceId": "mhGs_MveDG8K7LdEluI-y",
"values": [
"lr-RIXHV8cambOOQAwdko"
]
}
]
],
"props": [
@ -19005,161 +18837,288 @@
}
],
[
"XWNV-dNF4d_2Z9Nyz06uC",
"cw60Z5OIddkmhYrAGLuXS",
{
"id": "XWNV-dNF4d_2Z9Nyz06uC",
"instanceId": "3xkp_GjkPWD2mIitMLQq7",
"name": "state",
"type": "expression",
"value": "$ws$dataSource$JTW8KPVOeyag3bfBJft1b"
"id": "cw60Z5OIddkmhYrAGLuXS",
"instanceId": "uSjaW2mbY3uU8GvRWvgZk",
"name": "executeScriptOnCanvas",
"type": "boolean",
"value": true
}
],
[
"slgHuO_Tr7QGTRluTlBQn",
"invnFN8o-LKo5xUeNsOCu",
{
"id": "slgHuO_Tr7QGTRluTlBQn",
"instanceId": "3xkp_GjkPWD2mIitMLQq7",
"name": "onStateChange",
"type": "action",
"value": [
{
"type": "execute",
"args": [
"state"
],
"code": "$ws$dataSource$JTW8KPVOeyag3bfBJft1b = state"
}
]
"id": "invnFN8o-LKo5xUeNsOCu",
"instanceId": "uSjaW2mbY3uU8GvRWvgZk",
"name": "code",
"type": "string",
"value": "<script>\n document.getElementById('contact.form').addEventListener('submit', function(event) {\n event.preventDefault(); // Prevent default form submission\n\n const webhookUrl = 'https://n8n-ai.bsidesolutions.net/webhook-test/9974ca96-98ba-4e56-bb48-debfdad8cf59'; // use Webhook studio Global data var\n \n const name = document.getElementById('contact.name').value;\n const subject = document.getElementById('contact.subject').value;\n const sender = document.getElementById('contact.email').value;\n const message = document.getElementById('contact.message').value;\n const recipient = 'no-reply@inasahealthcare.com'; // use Webhook studio Global data var\n\n const formData = {\n name,\n subject,\n sender,\n message,\n recipient\n };\n\n fetch(webhookUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json' // Or 'application/x-www-form-urlencoded' if your webhook expects that\n },\n body: JSON.stringify(formData) // Send data as JSON\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json(); // Or response.text() if your webhook doesn't return JSON\n })\n .then(data => {\n document.getElementById('contact.responseMessage').innerText = 'Message sent successfully!';\n console.log('Success:', data);\n document.getElementById('contact.form').reset(); // Clear the form\n })\n .catch(error => {\n document.getElementById('contact.responseMessage').innerText = 'Error sending message.';\n console.error('Error:', error);\n });\n});\n</script>\n"
}
],
[
"s46mirPdK-Z02y62pTwv6",
"c7ZFH-NdaT_K_CbWS7ZfX",
{
"id": "s46mirPdK-Z02y62pTwv6",
"instanceId": "btP42z-QHPD_XrAuB6Dnf",
"id": "c7ZFH-NdaT_K_CbWS7ZfX",
"instanceId": "uSjaW2mbY3uU8GvRWvgZk",
"name": "data-ws-show",
"type": "expression",
"value": "$ws$dataSource$JTW8KPVOeyag3bfBJft1b === 'initial' || $ws$dataSource$JTW8KPVOeyag3bfBJft1b === 'error'"
"type": "boolean",
"value": true
}
],
[
"twVQJEeNrfzgJjNJEXeLE",
"ccITyZzB79B6v3ZUQR0XR",
{
"id": "twVQJEeNrfzgJjNJEXeLE",
"instanceId": "qUNrtgBO4ZC7hDXH6CmiF",
"id": "ccITyZzB79B6v3ZUQR0XR",
"instanceId": "lCpf84n4fhCxkyPGN9sTF",
"name": "id",
"type": "string",
"value": "contact.form"
}
],
[
"FC2P4jDyJpeqa9j6hL_on",
{
"id": "FC2P4jDyJpeqa9j6hL_on",
"instanceId": "fWYNjgxye3_NUlPvK-DhF",
"name": "for",
"type": "string",
"value": "contact.name"
}
],
[
"gVtC_1Gf686vUvUCHDJNB",
{
"id": "gVtC_1Gf686vUvUCHDJNB",
"instanceId": "9W5T4TiWQISfEzg-f77aD",
"name": "type",
"type": "string",
"value": "text"
}
],
[
"X4VPu1gMuz9nnZ4x1frjq",
{
"id": "X4VPu1gMuz9nnZ4x1frjq",
"instanceId": "9W5T4TiWQISfEzg-f77aD",
"name": "id",
"type": "string",
"value": "contact.name"
}
],
[
"jJhsmNDaoqn5pwSXdN5YF",
{
"id": "jJhsmNDaoqn5pwSXdN5YF",
"instanceId": "9W5T4TiWQISfEzg-f77aD",
"name": "name",
"type": "string",
"value": "name"
"value": "contact.name"
}
],
[
"_mJ1QQzuVIeavkT1kWc2F",
"0Oko6buWxDd09OmSErW7P",
{
"id": "_mJ1QQzuVIeavkT1kWc2F",
"instanceId": "pOx5BDVrSoqMT_Dc_ssur",
"name": "name",
"id": "0Oko6buWxDd09OmSErW7P",
"instanceId": "9W5T4TiWQISfEzg-f77aD",
"name": "required",
"type": "boolean",
"value": true
}
],
[
"gtcUVooq0DDzmE_0UP6Hs",
{
"id": "gtcUVooq0DDzmE_0UP6Hs",
"instanceId": "lwZfqB6CPtpC860OmNZ_L",
"name": "for",
"type": "string",
"value": "contact.email"
}
],
[
"Ce-JKKJ_E4IBi7zWeuM26",
{
"id": "Ce-JKKJ_E4IBi7zWeuM26",
"instanceId": "CguZcCVQ3pcWF8uRl8j8r",
"name": "type",
"type": "string",
"value": "email"
}
],
[
"RqUSz0SJJzXRbHKtbDNMQ",
"WwTjfloe_jSjvtmbxnlYa",
{
"id": "RqUSz0SJJzXRbHKtbDNMQ",
"instanceId": "q-eBNMcGDEjMFZaJKr6ah",
"name": "data-ws-show",
"type": "expression",
"value": "$ws$dataSource$JTW8KPVOeyag3bfBJft1b === 'success'"
"id": "WwTjfloe_jSjvtmbxnlYa",
"instanceId": "CguZcCVQ3pcWF8uRl8j8r",
"name": "id",
"type": "string",
"value": "contact.email"
}
],
[
"JbazOW9rZrfa2wY3jBXJK",
"v8RgkQweoy51wE6RhJ58j",
{
"id": "JbazOW9rZrfa2wY3jBXJK",
"instanceId": "o55WOfVqRA2apY5by50Vl",
"name": "data-ws-show",
"type": "expression",
"value": "$ws$dataSource$JTW8KPVOeyag3bfBJft1b === 'error'"
}
],
[
"YRTx6UyPuIDSu5_bwEA5a",
{
"id": "YRTx6UyPuIDSu5_bwEA5a",
"instanceId": "mhGs_MveDG8K7LdEluI-y",
"id": "v8RgkQweoy51wE6RhJ58j",
"instanceId": "CguZcCVQ3pcWF8uRl8j8r",
"name": "name",
"type": "string",
"value": "message"
"value": "contact.email"
}
],
[
"bmcFRFeqBp0KNFhT0FlyE",
"rXVs5XLuMHDwnzDDpOdqY",
{
"id": "bmcFRFeqBp0KNFhT0FlyE",
"instanceId": "3xkp_GjkPWD2mIitMLQq7",
"id": "rXVs5XLuMHDwnzDDpOdqY",
"instanceId": "CguZcCVQ3pcWF8uRl8j8r",
"name": "required",
"type": "boolean",
"value": true
}
],
[
"ASlqL1iKnkZyeSiMtl4Te",
{
"id": "ASlqL1iKnkZyeSiMtl4Te",
"instanceId": "CAdBrhRXv65zARmL8jB9Q",
"name": "for",
"type": "string",
"value": "contact.message"
}
],
[
"bC_t9TiV51dIgw6bFc6Yb",
{
"id": "bC_t9TiV51dIgw6bFc6Yb",
"instanceId": "TUuuk-Yi2VsZXxnqeNLsa",
"name": "id",
"type": "string",
"value": "contact.message"
}
],
[
"huoHVUxbwx655siwVcgQF",
{
"id": "huoHVUxbwx655siwVcgQF",
"instanceId": "TUuuk-Yi2VsZXxnqeNLsa",
"name": "name",
"type": "string",
"value": "contact.message"
}
],
[
"xpVCRxftRUPeBj2Af6giN",
{
"id": "xpVCRxftRUPeBj2Af6giN",
"instanceId": "TUuuk-Yi2VsZXxnqeNLsa",
"name": "rows",
"type": "number",
"value": 5
}
],
[
"y_2ZrEWXi8bsYhTR4-P6J",
{
"id": "y_2ZrEWXi8bsYhTR4-P6J",
"instanceId": "TUuuk-Yi2VsZXxnqeNLsa",
"name": "required",
"type": "boolean",
"value": true
}
],
[
"1o4XtSd4pi5ouRRsIEEIB",
{
"id": "1o4XtSd4pi5ouRRsIEEIB",
"instanceId": "3YauHcKkC44lBDdJyLSt3",
"name": "type",
"type": "string",
"value": "submit"
}
],
[
"PO7Si0Wt9-KM_-HjTBsCy",
{
"id": "PO7Si0Wt9-KM_-HjTBsCy",
"instanceId": "cfjXEl8vwo1iv5FwtbBrF",
"name": "id",
"type": "string",
"value": "contact.responseMessage"
}
],
[
"t-hwIi7NGItkhyeV24xZU",
{
"id": "t-hwIi7NGItkhyeV24xZU",
"instanceId": "lCpf84n4fhCxkyPGN9sTF",
"name": "method",
"type": "string",
"value": "post"
}
],
[
"wJb90F7-wivXFBHYdSnY7",
"GxvWoFXeJ_vWsukz65trx",
{
"id": "wJb90F7-wivXFBHYdSnY7",
"instanceId": "3xkp_GjkPWD2mIitMLQq7",
"name": "action",
"type": "resource",
"value": "NhQbZJJnIffEq961LsTta"
}
],
[
"9Hu0AjQtsHdih1tjQpYcC",
{
"id": "9Hu0AjQtsHdih1tjQpYcC",
"instanceId": "3xkp_GjkPWD2mIitMLQq7",
"id": "GxvWoFXeJ_vWsukz65trx",
"instanceId": "lCpf84n4fhCxkyPGN9sTF",
"name": "enctype",
"type": "string",
"value": "application/x-www-form-urlencoded"
}
]
],
"dataSources": [
[
"JTW8KPVOeyag3bfBJft1b",
"I_qSwOAzm7wT8ny2dtGJW",
{
"type": "variable",
"id": "JTW8KPVOeyag3bfBJft1b",
"scopeInstanceId": "3xkp_GjkPWD2mIitMLQq7",
"name": "formState",
"value": {
"id": "I_qSwOAzm7wT8ny2dtGJW",
"instanceId": "eIOPAWSJjs9vjdOCe-hPV",
"name": "for",
"type": "string",
"value": "initial"
"value": "contact.subject"
}
}
]
],
"resources": [
[
"NhQbZJJnIffEq961LsTta",
"i8eQwbPqH-WJ9YKrE8UjF",
{
"id": "NhQbZJJnIffEq961LsTta",
"name": "action",
"method": "post",
"url": "\"https://n8n-ai.bsidesolutions.net/webhook/9974ca96-98ba-4e56-bb48-debfdad8cf59\"",
"searchParams": [],
"headers": [
{
"name": "Content-Type",
"value": "\"application/json\""
},
{
"name": "Authentication",
"value": "\"testing\""
"id": "i8eQwbPqH-WJ9YKrE8UjF",
"instanceId": "wJqqJQGofN4bEH0ySy0NR",
"name": "type",
"type": "string",
"value": "text"
}
]
],
[
"YtMAMMcM_s1f2ozyf66NV",
{
"id": "YtMAMMcM_s1f2ozyf66NV",
"instanceId": "wJqqJQGofN4bEH0ySy0NR",
"name": "id",
"type": "string",
"value": "contact.subject"
}
],
[
"XdGuX0qrzpoqtmZcv_-Ua",
{
"id": "XdGuX0qrzpoqtmZcv_-Ua",
"instanceId": "wJqqJQGofN4bEH0ySy0NR",
"name": "name",
"type": "string",
"value": "contact.subject"
}
],
[
"cRznM23eq4MLhhqzCQmG4",
{
"id": "cRznM23eq4MLhhqzCQmG4",
"instanceId": "wJqqJQGofN4bEH0ySy0NR",
"name": "required",
"type": "boolean",
"value": true
}
]
],
"dataSources": [],
"resources": [],
"instances": [
[
"YFUYnRGP1JILoCqbMMrCD",
@ -22087,7 +22046,15 @@
},
{
"type": "id",
"value": "3xkp_GjkPWD2mIitMLQq7"
"value": "uSjaW2mbY3uU8GvRWvgZk"
},
{
"type": "id",
"value": "lCpf84n4fhCxkyPGN9sTF"
},
{
"type": "id",
"value": "cfjXEl8vwo1iv5FwtbBrF"
}
]
}
@ -22108,192 +22075,295 @@
}
],
[
"3xkp_GjkPWD2mIitMLQq7",
"uSjaW2mbY3uU8GvRWvgZk",
{
"type": "instance",
"id": "3xkp_GjkPWD2mIitMLQq7",
"component": "Form",
"label": "Contact Webhook Form",
"children": [
{
"type": "id",
"value": "btP42z-QHPD_XrAuB6Dnf"
},
{
"type": "id",
"value": "q-eBNMcGDEjMFZaJKr6ah"
},
{
"type": "id",
"value": "o55WOfVqRA2apY5by50Vl"
}
]
"id": "uSjaW2mbY3uU8GvRWvgZk",
"component": "HtmlEmbed",
"children": []
}
],
[
"btP42z-QHPD_XrAuB6Dnf",
"lCpf84n4fhCxkyPGN9sTF",
{
"type": "instance",
"id": "btP42z-QHPD_XrAuB6Dnf",
"id": "lCpf84n4fhCxkyPGN9sTF",
"component": "ws:element",
"tag": "div",
"label": "Form Content",
"tag": "form",
"children": [
{
"type": "id",
"value": "nCWB4aT4tCOe1SLIg0EJQ"
"value": "fWYNjgxye3_NUlPvK-DhF"
},
{
"type": "id",
"value": "qUNrtgBO4ZC7hDXH6CmiF"
"value": "9W5T4TiWQISfEzg-f77aD"
},
{
"type": "id",
"value": "diZ2s_RIk9uueAe3SA1o4"
"value": "CQholTorhqZvIkMz0CAY8"
},
{
"type": "id",
"value": "pOx5BDVrSoqMT_Dc_ssur"
"value": "GMt8ZgN4KogrfZpCbd8m8"
},
{
"type": "id",
"value": "DkJml0aWi-KlpwjUPUHAa"
"value": "eIOPAWSJjs9vjdOCe-hPV"
},
{
"type": "id",
"value": "mhGs_MveDG8K7LdEluI-y"
"value": "wJqqJQGofN4bEH0ySy0NR"
},
{
"type": "id",
"value": "3-zCHHQaXr2Z-KAyAfHHX"
"value": "lKf9t0XY_JMw9ZYlzHoLn"
},
{
"type": "id",
"value": "xej252tjDatklRVyQ4BqL"
},
{
"type": "id",
"value": "lwZfqB6CPtpC860OmNZ_L"
},
{
"type": "id",
"value": "CguZcCVQ3pcWF8uRl8j8r"
},
{
"type": "id",
"value": "nTAiTYMMk4FVGelmTciIF"
},
{
"type": "id",
"value": "ieZukE2rhVeumgJQoUj2-"
},
{
"type": "id",
"value": "CAdBrhRXv65zARmL8jB9Q"
},
{
"type": "id",
"value": "TUuuk-Yi2VsZXxnqeNLsa"
},
{
"type": "id",
"value": "MWBkp4dAqpXBvBnuo0N_d"
},
{
"type": "id",
"value": "lCQ5gNR8wpF1FQD0YdmGU"
},
{
"type": "id",
"value": "3YauHcKkC44lBDdJyLSt3"
}
]
}
],
[
"nCWB4aT4tCOe1SLIg0EJQ",
"fWYNjgxye3_NUlPvK-DhF",
{
"type": "instance",
"id": "nCWB4aT4tCOe1SLIg0EJQ",
"id": "fWYNjgxye3_NUlPvK-DhF",
"component": "ws:element",
"tag": "label",
"children": [
{
"type": "text",
"value": "Name",
"placeholder": true
"value": "Name:"
}
]
}
],
[
"qUNrtgBO4ZC7hDXH6CmiF",
"9W5T4TiWQISfEzg-f77aD",
{
"type": "instance",
"id": "qUNrtgBO4ZC7hDXH6CmiF",
"id": "9W5T4TiWQISfEzg-f77aD",
"component": "ws:element",
"tag": "input",
"children": []
}
],
[
"diZ2s_RIk9uueAe3SA1o4",
"CQholTorhqZvIkMz0CAY8",
{
"type": "instance",
"id": "diZ2s_RIk9uueAe3SA1o4",
"id": "CQholTorhqZvIkMz0CAY8",
"component": "ws:element",
"tag": "br",
"children": []
}
],
[
"xej252tjDatklRVyQ4BqL",
{
"type": "instance",
"id": "xej252tjDatklRVyQ4BqL",
"component": "ws:element",
"tag": "br",
"children": []
}
],
[
"lwZfqB6CPtpC860OmNZ_L",
{
"type": "instance",
"id": "lwZfqB6CPtpC860OmNZ_L",
"component": "ws:element",
"tag": "label",
"children": [
{
"type": "text",
"value": "Email",
"placeholder": true
"value": "Email:"
}
]
}
],
[
"pOx5BDVrSoqMT_Dc_ssur",
"CguZcCVQ3pcWF8uRl8j8r",
{
"type": "instance",
"id": "pOx5BDVrSoqMT_Dc_ssur",
"id": "CguZcCVQ3pcWF8uRl8j8r",
"component": "ws:element",
"tag": "input",
"children": []
}
],
[
"3-zCHHQaXr2Z-KAyAfHHX",
"nTAiTYMMk4FVGelmTciIF",
{
"type": "instance",
"id": "3-zCHHQaXr2Z-KAyAfHHX",
"id": "nTAiTYMMk4FVGelmTciIF",
"component": "ws:element",
"tag": "br",
"children": []
}
],
[
"ieZukE2rhVeumgJQoUj2-",
{
"type": "instance",
"id": "ieZukE2rhVeumgJQoUj2-",
"component": "ws:element",
"tag": "br",
"children": []
}
],
[
"CAdBrhRXv65zARmL8jB9Q",
{
"type": "instance",
"id": "CAdBrhRXv65zARmL8jB9Q",
"component": "ws:element",
"tag": "label",
"children": [
{
"type": "text",
"value": "Message:"
}
]
}
],
[
"TUuuk-Yi2VsZXxnqeNLsa",
{
"type": "instance",
"id": "TUuuk-Yi2VsZXxnqeNLsa",
"component": "ws:element",
"tag": "textarea",
"children": []
}
],
[
"MWBkp4dAqpXBvBnuo0N_d",
{
"type": "instance",
"id": "MWBkp4dAqpXBvBnuo0N_d",
"component": "ws:element",
"tag": "br",
"children": []
}
],
[
"lCQ5gNR8wpF1FQD0YdmGU",
{
"type": "instance",
"id": "lCQ5gNR8wpF1FQD0YdmGU",
"component": "ws:element",
"tag": "br",
"children": []
}
],
[
"3YauHcKkC44lBDdJyLSt3",
{
"type": "instance",
"id": "3YauHcKkC44lBDdJyLSt3",
"component": "ws:element",
"tag": "button",
"children": [
{
"type": "text",
"value": "Submit",
"placeholder": true
"value": "Send Message"
}
]
}
],
[
"q-eBNMcGDEjMFZaJKr6ah",
"cfjXEl8vwo1iv5FwtbBrF",
{
"type": "instance",
"id": "q-eBNMcGDEjMFZaJKr6ah",
"id": "cfjXEl8vwo1iv5FwtbBrF",
"component": "ws:element",
"tag": "div",
"label": "Success Message",
"children": [
{
"type": "text",
"value": "Thank you for getting in touch!",
"placeholder": true
}
]
"children": []
}
],
[
"o55WOfVqRA2apY5by50Vl",
"eIOPAWSJjs9vjdOCe-hPV",
{
"type": "instance",
"id": "o55WOfVqRA2apY5by50Vl",
"component": "ws:element",
"tag": "div",
"label": "Error Message",
"children": [
{
"type": "text",
"value": "Sorry, something went wrong.",
"placeholder": true
}
]
}
],
[
"DkJml0aWi-KlpwjUPUHAa",
{
"type": "instance",
"id": "DkJml0aWi-KlpwjUPUHAa",
"id": "eIOPAWSJjs9vjdOCe-hPV",
"component": "ws:element",
"tag": "label",
"children": [
{
"type": "text",
"value": "Message"
"value": "Subject:"
}
]
}
],
[
"mhGs_MveDG8K7LdEluI-y",
"GMt8ZgN4KogrfZpCbd8m8",
{
"type": "instance",
"id": "mhGs_MveDG8K7LdEluI-y",
"id": "GMt8ZgN4KogrfZpCbd8m8",
"component": "ws:element",
"tag": "textarea",
"tag": "br",
"children": []
}
],
[
"lKf9t0XY_JMw9ZYlzHoLn",
{
"type": "instance",
"id": "lKf9t0XY_JMw9ZYlzHoLn",
"component": "ws:element",
"tag": "br",
"children": []
}
],
[
"wJqqJQGofN4bEH0ySy0NR",
{
"type": "instance",
"id": "wJqqJQGofN4bEH0ySy0NR",
"component": "ws:element",
"tag": "input",
"children": []
}
]

View File

@ -10,7 +10,7 @@ import { HtmlEmbed as HtmlEmbed, Fragment as Fragment_1, Image as Image, Slot as
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-11-23T06:42:16.542Z";
export const lastPublished = "2025-11-23T14:14:47.330Z";
export const siteName = "Inasa Healthcare";

View File

@ -5,21 +5,9 @@
import type { PageMeta } from "@webstudio-is/sdk";
import type { System, ResourceRequest } from "@webstudio-is/sdk";
export const getResources = (_props: { system: System }) => {
const action: ResourceRequest = {
name: "action",
url: "https://n8n-ai.bsidesolutions.net/webhook/9974ca96-98ba-4e56-bb48-debfdad8cf59",
searchParams: [
],
method: "post",
headers: [
{ name: "Content-Type", value: "application/json" },
{ name: "Authentication", value: "testing" },
],
}
const _data = new Map<string, ResourceRequest>([
])
const _action = new Map<string, ResourceRequest>([
["action", action],
])
return { data: _data, action: _action }
}

View File

@ -5,12 +5,12 @@
import { Fragment, useState } from "react";
import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
import { Fragment as Fragment_1, Image as Image, HtmlEmbed as HtmlEmbed, Slot as Slot, Input as Input, Textarea as Textarea } from "@webstudio-is/sdk-components-react";
import { Link as Link, Body as Body, Form as Form } from "@webstudio-is/sdk-components-react-router";
import { Link as Link, Body as Body, RemixForm as RemixForm } from "@webstudio-is/sdk-components-react-router";
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-11-23T06:42:16.542Z";
export const lastPublished = "2025-11-23T14:14:47.330Z";
export const siteName = "Inasa Healthcare";
@ -29,7 +29,6 @@ import { Link as Link, Body as Body, Form as Form } from "@webstudio-is/sdk-comp
const Page = (_props: { system: any; }) => {
let [formState, set$formState] = useVariableState<any>("initial")
return <Body
className={`w-element`}>
<Slot>
@ -150,58 +149,84 @@ className={`w-element`}>
className={`w-element`}>
{"Contact Us"}
</h1>
<Form
state={formState}
onStateChange={(state: any) => {
formState = state
set$formState(formState)
}}
action={"action"}
<HtmlEmbed
executeScriptOnCanvas={true}
code={"<script>\n document.getElementById('contact.form').addEventListener('submit', function(event) {\n event.preventDefault(); // Prevent default form submission\n\n const webhookUrl = 'https://n8n-ai.bsidesolutions.net/webhook-test/9974ca96-98ba-4e56-bb48-debfdad8cf59'; // use Webhook studio Global data var\n \n const name = document.getElementById('contact.name').value;\n const subject = document.getElementById('contact.subject').value;\n const sender = document.getElementById('contact.email').value;\n const message = document.getElementById('contact.message').value;\n const recipient = 'no-reply@inasahealthcare.com'; // use Webhook studio Global data var\n\n const formData = {\n name,\n subject,\n sender,\n message,\n recipient\n };\n\n fetch(webhookUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json' // Or 'application/x-www-form-urlencoded' if your webhook expects that\n },\n body: JSON.stringify(formData) // Send data as JSON\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json(); // Or response.text() if your webhook doesn't return JSON\n })\n .then(data => {\n document.getElementById('contact.responseMessage').innerText = 'Message sent successfully!';\n console.log('Success:', data);\n document.getElementById('contact.form').reset(); // Clear the form\n })\n .catch(error => {\n document.getElementById('contact.responseMessage').innerText = 'Error sending message.';\n console.error('Error:', error);\n });\n});\n</script>\n"}
className={`w-html-embed`} />
<RemixForm
id={"contact.form"}
method={"post"}
encType={"application/x-www-form-urlencoded"}
className={`w-webhook-form`}>
{(formState === 'initial' || formState === 'error') &&
<div
className={`w-element`}>
<label
className={`w-element w-element-72`}>
{"Name"}
htmlFor={"contact.name"}
className={`w-element`}>
{"Name:"}
</label>
<Input
name={"name"}
className={`w-element w-element-73`} />
type={"text"}
id={"contact.name"}
name={"contact.name"}
required={true}
className={`w-element`} />
<br
className={`w-element`} />
<br
className={`w-element`} />
<label
className={`w-element w-element-74`}>
{"Email"}
htmlFor={"contact.subject"}
className={`w-element`}>
{"Subject:"}
</label>
<Input
name={"email"}
className={`w-element w-element-75`} />
type={"text"}
id={"contact.subject"}
name={"contact.subject"}
required={true}
className={`w-element`} />
<br
className={`w-element`} />
<br
className={`w-element`} />
<label
className={`w-element w-element-76`}>
{"Message"}
htmlFor={"contact.email"}
className={`w-element`}>
{"Email:"}
</label>
<Input
type={"email"}
id={"contact.email"}
name={"contact.email"}
required={true}
className={`w-element`} />
<br
className={`w-element`} />
<br
className={`w-element`} />
<label
htmlFor={"contact.message"}
className={`w-element`}>
{"Message:"}
</label>
<Textarea
name={"message"}
className={`w-element w-element-77`} />
id={"contact.message"}
name={"contact.message"}
rows={5}
required={true}
className={`w-element`} />
<br
className={`w-element`} />
<br
className={`w-element`} />
<button
type={"submit"}
className={`w-element`}>
{"Submit"}
{"Send Message"}
</button>
</div>
}
{(formState === 'success') &&
</RemixForm>
<div
className={`w-element`}>
{"Thank you for getting in touch!"}
</div>
}
{(formState === 'error') &&
<div
className={`w-element`}>
{"Sorry, something went wrong."}
</div>
}
</Form>
id={"contact.responseMessage"}
className={`w-element`} />
</div>
<div
className={`w-element`} />

View File

@ -11,7 +11,7 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-11-23T06:42:16.542Z";
export const lastPublished = "2025-11-23T14:14:47.330Z";
export const siteName = "Inasa Healthcare";

View File

@ -11,7 +11,7 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
export const lastPublished = "2025-11-23T06:42:16.542Z";
export const lastPublished = "2025-11-23T14:14:47.330Z";
export const siteName = "Inasa Healthcare";

View File

@ -58,6 +58,14 @@
border-left-width: 1px;
outline-width: 1px
}
form.w-element {
box-sizing: border-box;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
outline-width: 1px
}
h1.w-element {
box-sizing: border-box;
border-top-width: 1px;
@ -229,14 +237,6 @@
white-space: normal;
white-space-collapse: collapse
}
form.w-webhook-form {
box-sizing: border-box;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
outline-width: 1px
}
}
@media all {
.w-element-1 {
@ -1365,24 +1365,6 @@
flex-direction: row;
justify-content: space-between
}
.w-element-72 {
display: block
}
.w-element-73 {
display: block
}
.w-element-74 {
display: block
}
.w-element-75 {
display: block
}
.w-element-76 {
display: block
}
.w-element-77 {
display: block
}
}
@media all and (max-width: 991px) {
.w-element-10 {