Integrating Forms into Your Website with Boost.space

This article is intended for developers or individuals who are comfortable with coding. If you’re familiar with web development, you’ll find Boost.space’s form integration straightforward. The system allows you to embed custom forms directly into your website, with the data being collected and stored in Boost.spaceA platform that centralizes and synchronizes company data from internal and external sources, offering a suite of modules and addons for project management, CRM, data visualization, and more. Has many features to optimize your workflow!.

How to Integrate the Form

To add a Boost.space form to your website, you can follow this simple process. A practical example of how to integrate the form into an HTML page is available at the following URL:

https://system.boost.space/api/example-form.html

Note: Replace “system” in the URL with the name of your own system to make it work for your setup.

HTML Code Integration

The integration is achieved by embedding the following code into the HTML structure of your website. This snippet includes the custom form JavaScript (custom_form.js) with several necessary parameters:

Replace the placeholders with your specific form details:

<FORM_ID>: The ID of the form you want to embed.
<INSERT_FORM_ID>: The integrity key tied to the form.
<ELEMENT_ID_OPTIONAL>: (Optional) The element ID where the form should be rendered. If not specified, it defaults to rendering within the body.
<LANGUAGE>: The language code for the form, allowing you to localize the form for different regions.

AJAX and reCAPTCHA

The script dynamically loads additional resources using AJAX, including:

Google reCAPTCHA: If reCAPTCHA is enabled on the form, the following script is pulled:https://www.google.com/recaptcha/api.js?&render=explicit
Form Structure: The form structure from: https://system.boost.space/api/form/X/generate, which returns the HTML structure of the form.

Customizing the Form UI

The form’s appearance can be customized using several methods, allowing you to maintain full control over the styling:

CSS Classes: Each form element can be styled individually by assigning a CSS class. This can be set for every form field via the Boost.space form editor.
Required Fields: Fields can be set as required by enabling the “Required” option within the form editor for each input.
Global CSS Styling: Apply styles to the entire form using the FORM#custom_form_ID selector, where ID is the form’s unique identifier.
Optional CSS Class Disabling: If you prefer not to use custom styling for specific form inputs, you can disable the CSS class assignment per input, allowing for a more basic or standard appearance.

Automating Form Submissions

Once your form is integrated and actively collecting data, Boost.space’s Automation module can help you streamline post-submission processes. Here are a few examples of what can be automated after a form submission:

Company Notifications: Automatically send a notification email to your company when a client submits a form.
Client Notifications: Send an automatic response to the client.
Webhooks: Trigger more complex actions by launching a webhook via Boost.space’s Integrator. This could be used for actions like automatically creating a new client in your system.
System Notifications: Create system notifications within Boost.space when the form is submitted.