StudioForm Docs
Quickstart
Quickstart
  • Quickstart
  • Automatic Form Field Validation
  • Navigation [Currently being edited]
  • Events + Combo Classes
  • Wized + StudioForm
  • Xano + StudioForm [Currently being edited]
Powered by GitBook
On this page
  • [THESE ARE LEGACY DOCS. PLEASE CLICK THE LINK BELOW TO FIND UP TO DATE DOCUMENTATION:]
  • https://www.studioform.pro/docs
  • StudioForm Library:
  • Copy the StudioForm <script> and paste into the <head> of your page
  • Implement in Webflow — Apply attributes to elements on the page

Quickstart

[LEGACY]

Last updated 9 months ago


[THESE ARE LEGACY DOCS. PLEASE CLICK THE LINK BELOW TO FIND UP TO DATE DOCUMENTATION:]

https://www.studioform.pro/docs

StudioForm Library:

(Useful for a good quick start without having to read all the documentation)




STEP #1

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

<!-- [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>


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.

WRAPPER — I want this [Form Block] to become a StudioForm

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 =

sf

Value =

wrapper

---

SLIDE — I want this [DIV] to become a slide

Description:

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

No further attribute is required.

---

[Option] DIVIDER — I want this [Div] to only show inside of Webflow

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 =

sf

Value

divider

---


https://bmg.studio/form/library
Demonstration of the core functionalities of StudioForm
Setting up your first StudioForm instance in your project
http://unpkg.com/@bmg.studio/form@1/sf.js