A Quickstart guide to Studio Form

Studio Form is optimised for ease of use. If you have suggestions on how we can make it even easier to use, let us know.

1. Insert the script

Simply insert the script tag (with the current script version) anywhere on the page (e.g. within the <head> tag).

<!-- [BMG] Studio Form -->
<script>document.head.insertAdjacentHTML('beforeend','<style sf-css>[studio-form="wrapper"]>form>*:not(:first-child){display:none}</style>');
(function t(){if("undefined"!=typeof StudioForm){document.querySelectorAll('[sf-css]').forEach(e=>e.remove());return;}setTimeout(t,4)})();</script>
<script async src="https://unpkg.com/@bmg.studio/form/v/1/1/3.js"></script>

2. Add 1 attribute

After loading the script, you must specify which Webflow forms should become Studio Forms. To do this, add the following attribute to the "Form Block" of the form of your choice:

Name   studio-form
Value   wrapper

Perfect. Now you are ready to build!

Continue with -> Learning how to define a slide <-

Are you tired of documentations?

If you want to get right to the juicy part, check out our clonable page:
https://webflow.com/made-in-webflow/website/studio-form-style-guide