Recently Bloomreach Content SaaS released the feature: “Integrations Library”, in which innovative content type fields can be built using a built-in App framework. With the release of Custom integrations, we will be able to integrate with (external) form solutions such as:
- Google forms
- Jotform
- Forms.app
- Typeform
- Form.io
- How to get your frontend to render the Form
- Custom Frontend Forms
In the upcoming sections you will learn how to integrate with each of the solutions mentioned above individually.
Integrate Content SaaS with Google Forms
To integrate with Google Forms you will need to add the following UI extension to a Custom Integration:
{
"id": "googleforms",
"displayName": "Google Forms",
"url": "https://form-integration-googleforms.bloomreach.works",
"config": "{\"apiKey\":\"123\", \"clientId\":\"456\"}",
"extensionPoint": "document.field",
"height": 80,
"description": "Google Forms Integration",
"logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAdVBMVEUAAABqQL9ySbt0SLdqP61ySbpySLlqRKtVN4pySLhoQahWNopxR7hnQadyR7hxSLlpQqhxR7hrQ6xqQqpnQqhoQqdoQ6mTc8nc0e3VyOqKaMW0ndrKuuXn3/P////t6Pbe1O+egc/Br+BySbl0RrlySbl1SrWG8Ys8AAAAJ3RSTlMADDhANZP/22+f9v8k/1Nf9OLV6Pn97f///////////////1cssxgd1lquAAAAuklEQVR4Ae3SNQLDMBBEUbPDMTPT/W8YboyzYdI3qNKrhvuweEEcTqJdl5Wx1BkFmCujLZYEYaWMt14ShM00gIUtAICAACBgAAgYAAIGgIABIGAACBgAAgK0JRAQoC6BgADdMK31JdsxJADARAZ8AeB6fnA4wqgTGYiTxD8cXtKJDKRJkt0F5GnsHo7C68R2wHbAdsB2wHbAAAZcBZR0QBgEKjrAc4PVCjGZG64hCnOeG6sqt7DNivus9tWqVjv7KE1rAAAAAElFTkSuQmCC",
"package": null,
"connect-src": [],
"frame-ancestors": [],
"frame-src": [
"form-integration-googleforms.bloomreach.works"
],
"img-src": [],
"script-src": [],
"style-src": [],
"font-src": [],
"media-src": []
}
Be aware that you will need to go to your Google Cloud Console to enable the Google Drive Picker in the API & Services and generate a Google Cloud apiKey and OAuth Client ID. When created add this to configuration of the UI extension (config element above).
Once the UI extension is registered, make sure to add the UI extension to a content type and component.
See the following demo how this can work in the Experience Manager:
Integrate Content SaaS with Jotform
To integrate with Jotform you will need to add the following UI extension to a Custom Integration:
{
"id": "jotform",
"displayName": "Jotform",
"url": "https://form-integration-jotform.bloomreach.works",
"config": "{\"apiKey\": \"123\"}",
"extensionPoint": "document.field",
"height": 80,
"description": "Jotform Integration",
"logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAA4VBMVEUAAAAAmf8Al/8JFVD/YgD/YAD/tyn/tSj/YQD/YgAAmf//YAD/YQD/YAD/YQAAlv//ryH/YAD/YAAAn/8KFVH/tikIEVD/sygAmv//tikAmf//tSn/YQD/YAD/YQD/tSr/tSgGFFAKFFEAmv8Amv//YAAAmP8Al/8KFVH/tioAmf//YAD/tSn/YAALFVL/tin/tykAmP//uCkAmP//YAD/syj/tSoAl/8LE1D/tigAmf//tSX/sDAQEFAJFVH/YQAKFVL/tioJFlD/tSkKFVAKFlD/uiX/YQAAmf//tikKFVERZpE6AAAAR3RSTlMA3yDfXxCfYM9/76DfgO8wEDAgEH/fICDPv4DPv0CvgIA3z7+fkHBA7++vn5BwX96wkG9fUEAwoJBfTzAREL+gn49vT6BQMKG90BwAAAOxSURBVHja7dmLUtpQFIXhFZoApWmlQUQoUBSBcvOu9W7VtiG8/wPVcWxTu8GTZBnZM+V/gm/2Ocw+GbBs2bKn9WoDazKZWO29Myy+Uq0wCbO2Mlhs3UdOWA0LrDSYyKzFDSljTWZVWAER6dEkCj1SRJ0a75G1wcR7ZF0Q8R5ZoYS0kx5FI/rt0XKL7j3mqDPjPTJy0fKeGDvNO7Rt+7DhpOmRbWF2jY7rP5Yfeyl7zKBG3X/S0OM9BMhp+qK3rIcAea4/o6ZDexJe6o8f/Jm5XgoeWc/kCcs7vMdcyegJ67yCpy09z9RgPeYO4nh8N3WPJTzPZ6fnkQOSHlk9Zc+W8JjyUvVYGeExNVbm8YfKPH5emcd3lXl8V5knMmilwHgakT1+/TU8th+9pjKPP1bm8T1lnrwyj28r87jKPL6tzNNR5skr87je0iOK9ZWYsXR5oM1TU+bJWLo8OFDmgaXMs6LMg25iz9tUPBgo86CtzIN1ZR5YyjxoK/PgqzIPuso86CnzAAVlHuyl66nH9SBj8KyXGM87xG9PmQclS5cH6CnzAF1lHqCmzAOcWRPZHumhyoidZvWwOI8krddKtIcnHQzWH2YzqPWAxXv+TrnHVubxXNJzvj/KVqvZ1lERL9I15Tke9YM/7Z6Cz2M8lWzwtB2edE149vuBKMsenJvc0wpmtVMBUyO5JxvIeNGY9sjKzKk1o3veGzxhNwSoTnjmd8SAeI+sTIAITyojaqbiCapIWofyzK/IrHreI7tDwpx0PEGLudW8R5Zlnme8R7ZLbFfGw//MZIeUh5+QrMl7ZCMC5Li0R3bKPfNZj+wnOJHZU4zlKYPLeSc5HxpPPJ+COH3G3DZuVzdgznb/4bx3CE9QwbxWp/ddXcLcYTPkuCFHeLgBbU8f2owigtMYd4bDYcf2gGQe86N6c/ooWkOMSE9wjLm9mT72Zu31PPswgEhRXM9nGECk6IbySBAr2uc8EkSKKmXOI0GkKEt6JIgTVeJ5cogICkUbiFWO85hB0y/xRFXWI0GciPZIECU65z0SJEU/ELU7wmMGhW0Td5rz3IMoUY72SBAlynEeMyjslrnU0sODpquIUJH2SBAnqrIeCeJELdYjQZzogvVIECnaJT0SRIoqfc4jQayoxXnkdxktqhIe2cnU1IbxXpcJj2jNCPqW9J3fP0aSTngQLrIv+TfdlSAkWLM5MaRWEbPiZ7QJkZnUH1VAtPZ97m/ty+olonbcqn66x5Sro6Mili37v/sFtkjVNRrxrTkAAAAASUVORK5CYII=",
"package": null,
"connect-src": [],
"frame-ancestors": [],
"frame-src": [
"form-integration-jotform.bloomreach.works"
],
"img-src": [],
"script-src": [],
"style-src": [],
"font-src": [],
"media-src": []
}
Keep in mind that you will need to generate a Jotform apiKey. When created, add this to the configuration of the UI extension (config element above)
Get a Jotform api key here: https://www.jotform.com/myaccount/api
Once the UI extension is registered, make sure to add the UI extension to a content type and component.
See the following demo of how this can work in the Experience Manager:
{ % embed https://www.youtube.com/watch?v=f0vz7-StAXw&list=PLL4MAGpY4oGKzfZATk173wKhLiFEUjcB-&index=5 %}
Integrate Content SaaS with Forms.app
To integrate with Forms.app, you will need to add the following UI extension to a Custom Integration:
{
"id": "formsapp",
"displayName": "Forms.app",
"url": "https://form-integration-formsapp.bloomreach.works",
"config": "{\"token\":\"123\"}",
"extensionPoint": "document.field",
"height": 80,
"description": "Forms.app Integration",
"logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB0VBMVEUAAABDRl5CSGAIyugOvdoki6ZFQVkembUOvNkNvtsMwd4E0/FDRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl4OvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdpERFw+UWkLw+AOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdo8VW4glLANv9wOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoPutcUsMwPvNkOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvtsOvtsOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdsOvdoOvdoOvdpDRl5DRl5DRl5DRl5GP1dSOk0StdIOvNkOvdoOvdpDRl5DRl5DRl5DRl5DRV0udI4QudYOvdoOvdoOvdpDRl5DRl5DRl5DRl5ERFwRt9MOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdr///803KqTAAAAmnRSTlMAAAAAAAAAAAAAAAABAgVWpKyrUN+ciYpRk6YDmZiaDiQCVVpC1E+YqiBJTQuP3jgDJTYSk/ykBhTOjQVw4ey9LxS52ToX0Ypy5XtMuc2k1ToPmtgyMeQasteOv9Y7mNxDTukzkq1E2ggNl91FVOKEVuOWRou0EAYGBV3lg5U41Mi5ut7rgQdHLm12d1VefwqR30gBXMHHop08rHnSpQAAAAFiS0dEmpjfZxIAAAAHdElNRQfjBBgLExfSQDGIAAABXElEQVQ4y2NgGBSAkZGHFwXwMDKiyPPxCwgKIQFBAX4+RmT9wiKiYuJIQExURALJDEZGSSlpVCOlpSRRFMjIoNnJKCtHQIEMFRQwMbOwyCsosuBUwKqkzKKiqsbCglUBm7qGppY2i46unj5QBUIBi4GhkTFIhN3E1MychYHFwtIKWQGLtY2tnb0DCwuHo5OzC1CGxdXNHUkBi6KHp5e3j68Di4WffwAnUD4wKDgEyQ0soWEeiizhEZFR0TGxIP3ycfEJyI5kSUxKZmFhCU/xTTWCyqexIHuTxTDdKgMoYZBpDpbPys4ByyMUsOTm5WewQHyKJI/wBRd3QSFUBYt8UXYxVB6ooKS0rBwEKiqrqmtAKlgyaxHyQAV19Q2NENDU3NLaxgKU12uHywNV8HR0dkFAd09vWF9/4ISJk5DkUQDL5CmFU6fpeeOSB4Vn+/QZM3HLg3yrOBmP9MAAADyBS45uBi7bAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTA0LTI0VDExOjE5OjIzKzAyOjAwmbHVPwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wNC0yNFQxMToxOToyMyswMjowMOjsbYMAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC",
"package": null,
"connect-src": [],
"frame-ancestors": [],
"frame-src": [
"form-integration-formsapp.bloomreach.works"
],
"img-src": [],
"script-src": [],
"style-src": [],
"font-src": [],
"media-src": []
}
Bear in mind that you will need to generate a Forms.app token. When created add this to the configuration of the UI extension (config element above).
Once the UI extension is registered, make sure to add the UI extension to a content type and component.
See the following demo of how this can work in the Experience Manager:
Integrate Content SaaS with Typeform
To integrate with Typeform, you will need to add the following UI extension to a Custom Integration:
{
"id": "typeform",
"displayName": "Typeform",
"url": "https://form-integration-typeform.bloomreach.works",
"config": "{\"token\":\"123\"}",
"extensionPoint": "document.field",
"height": 80,
"description": "Typeform Integration",
"logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkDAoKNhabE1+jAAACb0lEQVRIx52Vy08TURSHf/da+hhaRDHBRYNGI7KgJIpUIxvfYEJkpZHwiK8Yq2XjxpWKUTT+Ay7cEG2Ir4UuGgPRECIbgegCiSYYoyxEsLw6r06nU46LpgShtDPzu4vJTO73nZO5mTPAmhCjPXR1/rU0o0q0lDbk6cUBukKlyBm2Ci7Vw6lwzPPBOewewwwW4UAFAmhSTiD1pKSbTSFfjPOJeK9UR2U5ViU9TEpxo33dDqhIfjbdcMH7NU+BKvQqZf3eFqavERAX+0bqzwka8seDHnX/qK+RLW/kmYt8d+JgW0EcSKBV6A+KUXL81wHtUMdrPbGCeCYOvFBr3/haV3Qgdj9ymMUBA+1CrFkLLXdAvuTfGvecaQEAbMOg4qtj3zIdNI7o1nBgEl0e+SVxgAPy0QGfRR7AU/57O04DHEgGx5h1AeG2V7pPjAMu/6R1HsB7/NmCYxxw+uZtCYCIV2rjgMOp2hR85HSIA0ZKsCn4CXc5B5KL5TYFCfANHNCnKmwKtiIZ54BrZDfZE9RB/8QB77uToj1Bi7wpwgAqSc5Y/RYAIIDoXLGfA0xMRdvT1uvfU5y3mJaZB9XycECQLOGXjJs/imuYzgGAjaefPyg8jlYkiC69+BTTl0faxs6m2WbTZ1GNV1pRB5sAVk7lvcrQcWHCBL4LfZpw2RnJ3PHsY/bZee2tWmWielR1dWbxVTE64srhnL+V7AoZCck4k8dvnE0oN9K5YT/1JJQpChRokarE70Nqwxr84lJMkaO02cRLIpd2XVkYVcO0j3ZSJR2hO+lf4sIXqjd7SgDInQ7NDsoxTdXU+KT0mA6st/MfpVUmc1BpehgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMTItMTBUMTA6NTQ6MjIrMDE6MDASXAx5AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTEyLTEwVDEwOjU0OjIyKzAxOjAwYwG0xQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXelRYdFJhdyBwcm9maWxlIHR5cGUgaXB0YwAAeJzj8gwIcVYoKMpPy8xJ5VIAAyMLLmMLEyMTS5MUAxMgRIA0w2QDI7NUIMvY1MjEzMQcxAfLgEigSi4A6hcRdPJCNZUAAAAASUVORK5CYII=",
"package": null,
"connect-src": [],
"frame-ancestors": [],
"frame-src": [
"form-integration-typeform.bloomreach.works"
],
"img-src": [],
"script-src": [],
"style-src": [],
"font-src": [],
"media-src": []
}
Be aware that you will need to generate a Typeform token. When created add this to the configuration of the UI extension (config element above)
Get a personal token: https://admin.typeform.com/user/tokens
Once the UI extension is registered, make sure to add the UI extension to a content type and component
See the following demo of how this can work in the Experience Manager:
Integrate Content SaaS with Form.io
To integrate with Form.io you will need to add the following UI extension to a Custom Integration:
{
"id": "formio",
"displayName": "Form.io",
"url": "https://form-integration-formio.bloomreach.works",
"config": "{\"endpoint\":\"https://yourstuff.form.io\"}",
"extensionPoint": "document.field",
"height": 80,
"description": "Form.io Integration",
"logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC3FBMVEUAAAAQdbwPdbwPdbwPdbxUsUdUskdUskdUskdVskgQdrwPdbwPdbwPdbwPdbwQdbxUskdUskdUskdUskdVskhVskgUdroQdbwPdbwPdbwPdbwPdbxUskdUskdUskcQdrwPdbwPdbwPdbxUskdUskdUskdUskdUskdWs0kQdrwQdbwPdbwPdbwPdbwQdbxWs0lUskdUskdUskdUskdVskgVeL0RdrwPdbwPdbwPdbwPdbwPdbwQdbxUskdUskdUskdUskdUskdVskkRdrwPdbwPdbwPdbwPdbwPdbwQdbxYskxUskdUskdUskdUskdUskdXs0oSdrwPdbwPdbwPdbwPdbwPdbwQdbwbe75VsklUskdUskdUskdUskdVskgRdrwPdbwPdbwPdbwPdbwQdbxUskdUskdUskdVskhWskkRdrwPdbwPdbwPdbwPdbwQdbxWsklUskdUskdUskdUskdUskcPdbwPdbwPdbwPdbwUd71VskhUskdUskdUskdVskgPdbwPdbwPdbwUeL1VskhUskdUskdUskdUskcPdbwPdbwPdbwQdbxVsklUskdUskdUskdUskdUskdVskgPdbwPdbwPdbwPdbwPdbxUskdUskdUskdUskdUskdUskdUskgTd7wQdbwPdbwPdbwPdbwUeL1VskhUskdUskdVskgPdbwPdbwPdbwPdbwQdbxVs0hUskdUskdUskdUskdUskcQdbwPdbwPdbwPdbwRdrxUskhUskdUskdUskdVskgWeb4QdbwPdbwPdbwPdbwPdbxVskhUskdUskdUskdVskgRdrwPdbwPdbwPdbxUskdUskdUskdUskdWskkPdbwPdbwPdbwPdbxUskdUskdUskdUskcSdr0PdbwPdbwPdbwQdbxUskdUskcQdbwPdbwPdbwPdbwPdbwXeL5UskdUskdUskdVskkQdbwPdbwRdrxUskdUskcPdbxUskf///9ORprqAAAA8XRSTlMAGmZpGwE4d0kKCErK/KkQOt3znicBATin8Oou/n8ZE3Lisz7l/b9HBQZBuvalIgFMz++NIgEflO/+wVAMHXjk2WEMEHDV/eF9GwE5pvW2RAQFQbX6+LA1AQlg1uuKIR2M7M9cDiKI01wKA2DS6YQhBUCv+rAwL+S2QwIPbdipCE/jTgIOifvRFBq+kx4CQ7v4+X0CIefOaxUBL5Lo/M0LBDq9uDcDDGLeGhPY5oEXAjT3sj8HKY7JYgsii8xnEAM8t/ekOA1dy+wcEW9hAhOdwUIEMpnz22PbbxgHVsPZH17xFoLe3GUBoMpRBgYdBCEWUIfmiQAAAAFiS0dE86yxvu4AAAAHdElNRQfmCRcHIghgMYf/AAAB60lEQVRIx2NgGAWjgFaAkYmZBcxgZWPn4CSonIubh/cjHz+IKSD4SUhYRBSvcjFxCcmPHz9KSYM47J8+fZIRlJXDo15eQfEjCCiBbVBWAer4pKqmroFDuaaWNi9IuY6uHpivb2CoCtJiZGyCzV2mZuYWIOWWVtY2MDFbO3uQDhkHRycM9c4urm4g9e4enkiiXt4+viAtvn7+ASjKA4OCQ0DKQ8PCI1ANioyKlgFpiYmNQxKNT0gEuyYpOQXTralpMWB3pWdkQkWysnPArsnNy8caGAWFRcVgd5WUQgTKysGuqaiswhXc1TW1YHfV1YO5DWDnNzY1446gltY2kIb2DjCvswscW1LdPTiU9/b1TwCpnzhpMkRgSsJUkA63adNnYFE+c9bsOSDlc+c5zoeJLVi4COws3sVLlqKrX7Z8xSdIfK9EFl7FtBrsrjVr16EoX7+haCNIefGmzVvQTNq6Dewu3u07diIEd+2GpI09e/dhunX/gYNgdx06fAQaXkePHQe75kTsSeyhcep0OcRdZ86CuOfOg8Nm7oWLl3AF99nLV66CdFwDp+/r4LC/cfMWAx5w+85dYJ64dx/EfjD306eH50sZCIBHj588ffYc7KQX9i9fvSaknoHhzdu376Cefv9BlLD6UTAK6AUAHXsSvNupchsAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDktMjNUMDc6MzQ6MDgrMDA6MDDf7pjeAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA5LTIzVDA3OjM0OjA4KzAwOjAwrrMgYgAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMi0wOS0yM1QwNzozNDowOCswMDowMPmmAb0AAAAASUVORK5CYII=",
"package": null,
"connect-src": [],
"frame-ancestors": [],
"frame-src": [
"form-integration-formio.bloomreach.works"
],
"img-src": [],
"script-src": [],
"style-src": [],
"font-src": [],
"media-src": []
}
Remember that you will need to copy the form.io endpoint. When acquired add this to the configuration of the UI extension (config element above).
Once the UI extension is registered, make sure to add the UI extension to a content type and component
See the following demo of how this can work in the Experience Manager:
How to get your frontend to render the Form
The above integrations will store 2 attributes to the API: the form object itself and the code required to embed it on your page/component.
You can use the following react frontend component example to render the forms with the above integration (one size fits all):
export function GenericEmbeddedForm({component, page}: BrProps<ContainerItem>): JSX.Element | null {
const content: any = component.getContent(page);
let forms: Array<any>;
try {
forms = JSON.parse(content.form);
} catch (e) {
forms = []
}
return (
<div>
{forms.map((form, index) => {
return <div key={index} dangerouslySetInnerHTML={{__html: decodeURIComponent(escape(atob(form.embed)))}}/>
})}
</div>
);
}
Custom Frontend Forms
If you are looking for forms that you can control in the frontend, but want to provide editors the ability to create and edit the form structure for example: have editors add/remove or rearrange fields you could also look at Bloomreach native form builder which stores the form model in Bloomreach Content SaaS.
For more information, check out this blog post!
Top comments (0)