The embed code generated by Full Fabric when "Embed code" is chosen in the field "Enable external integration" can be used as is; however, there are sophisticated options available for tailoring the code to specific requirements.
This article aims to educate developers and IT technicians on how to customise the standard embed code and the choices they have.
In this article
(click to jump to topic)
How do I tweak the embed code?
Use the options below to customise a Full Fabric form's embed code and edit a default Full Fabric form.
<!-- Form Embed code -->
<link href="http://instanceUrl/assets/vendor/embeddable/v2/stylesheets/manifest.css" media="all" rel="stylesheet" type="text/css"> <script id="ff-form-embed-formId" src="https://instanceUrl/f/formId/embed-script"></script>
<!-- Options -->
<script type="text/javascript">
<!-- Pre-fill data on form load -->
FF.Forms["formID"].preFillData = {
first_name: "Larry",
last_name: "David",
email: "larry.david@fullfabric.com"
}
<!-- Execute on form start -->
FF.Forms["formId"].onBeforeFormStarts = function(){
console.log("CALLBACK: onBeforeFormStarts formId")
}
<!-- Execute on form submitted -->
FF.Forms["formId"].onFormSubmitted = function() {
window.location.href = "https://fullfabric.com"
}
</script>
Configuration options
Type legend:
R (required) – This attribute must be provided for the embed code to work properly.
I (internal) – Used internally by Full Fabric. Use with caution, as it will likely affect how this form behaves or how the submission data is processed.
O (optional) – Optional form customisation attribute intended for use by end-users.
C (callback) – A callback function that will be executed at various points in the form's lifecycle.
ATTRIBUTE | TYPES | DESCRIPTION |
instanceUrl | R, I | User's portal URL. |
formId | R, I | Unique ID of the form you wish to build. |
preFillData | O, C | Callback that populates the selected field before the form builds. |
onBeforeFormStarts | O, C | Callback that executes before the form builds. |
onFormSubmitted | O, C | Callback executed when the data is actually sent. This allows you to perform an action when the submission is fully complete, such as displaying a confirmation or thank you message. |
*
You have reached the end of this article. Thanks for reading! 🤓 If you have any questions or comments on the topic at hand, or if you enjoy reads like this and have article requests, feel free to start a chat or email us at support@fullfabric.com. Also, please leave a rating below. Your feedback is highly appreciated! 💖
PUBLISHED: November 25, 2022
LAST UPDATED: November 8, 2023