# Quickstart

***

## **\[THESE ARE LEGACY DOCS. PLEASE CLICK THE LINK BELOW TO FIND UP TO DATE DOCUMENTATION:]**&#x20;

## <mark style="color:green;">**<https://www.studioform.pro/docs>**</mark>

### StudioForm Library:&#x20;

<https://bmg.studio/form/library> (Useful for a good quick start without having to read all the documentation)

***

{% embed url="<https://www.loom.com/share/d554879b62ee4575abbc0042b2d4304a>" %}
Demonstration of the core functionalities of StudioForm
{% endembed %}

***

{% embed url="<https://www.loom.com/share/645505d6b9dd480c9d5bf0d59a668756?sid=fba9fb89-45e6-4ff2-b06c-278548ac5be2>" %}
Setting up your first StudioForm instance in your project
{% endembed %}

***

STEP #1

### Copy the StudioForm \<script> and paste into the \<head> of your page

```html
<!-- [BMG] StudioForm -->
<script>document.head.insertAdjacentHTML('beforeend','<style sf-css>[sf="wrapper"]>form>*:not(:nth-child(1)){display:none}</style>');
window.StudioForm = window.StudioForm || []; window.StudioForm.push(() => document.querySelectorAll('[sf-css]').forEach(e=>e.remove()))</script>
<script defer src="https://cdn.jsdelivr.net/npm/@bmg.studio/form@1/sf.js"></script>
```

{% embed url="<https://twitter.com/lowcodeapps_/status/1785933983362044285>" %}
<http://unpkg.com/@bmg.studio/form@1/sf.js>
{% endembed %}

***

STEP #2

### Implement in Webflow — Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

<details>

<summary>WRAPPER — I want this [Form Block] to become a StudioForm</summary>

Description:

The "wrapper" attribute on the form block is the one absolutely mandatory attribute that you must set in order for your Webflow forms to become StudioForms.

The functionality is generated dynamically based on the elements within this form block.

\---

Name =&#x20;

```
sf
```

Value =

```
wrapper
```

\---

![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2Fmnvt7LsJcYnYcuvoLsCZ%2F1421.png?alt=media\&token=c7f67c50-dd02-4e0c-8635-97b06ee427d0)

</details>

<details>

<summary>SLIDE — I want this [DIV] to become a slide</summary>

Description:

All child elements of the Webflow "Form" element that are not dividers are automatically classified as slides.

No further attribute is required.

\---

![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FAQFZ10Nfa5VPjEpC1WlL%2FScreenshot%202023-12-08%20at%2011.52.09.png?alt=media\&token=f7de0564-7e7d-40c9-ae82-210e97f4e9f6)

</details>

<details>

<summary>[Option] DIVIDER — I want this [Div] to only show inside of Webflow</summary>

Description:

The "divider" attribute is set to elements that are located within the form block.

After successful initiation, these divider elements are removed from the page.

\---

Name =&#x20;

```
sf
```

Value

```
divider
```

\---\ <br>

![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FdyqknbWwE8XRwdp2hAgS%2FScreenshot%202023-12-08%20at%2012.02.16.png?alt=media\&token=8a8d86e2-01bd-451e-9a3b-b07e6a137e6c)

</details>

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bmg.gitbook.io/form/quickstart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
