Button Text

Base Form

The form component lets you create reactive forms that can be used in CRUD applications

Copy component
school Instructions
close

Installation

Before you paste a Vue component into a Webflow page you must first define the application container and add the javascript libraries. Learn more

1. Define app
2. Add Libraries
3. Copy & Paste

First, you must specify the app container within your Webflow page.

warning Webflow interactions will not work for elements within the app container! It is possible to pass the VueFlow resetIX option to reload the interactions after the Vue app has been mounted.

Add the following snippet of Javascript in the <head> tag of your Webflow page.

<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.22/dist/vue.global.prod.js"></script>

<!-- VueFlow -->
<script
    src="https://cdn.vueflow.io/libs/vueflow-v2.0.0-alpha.0.js"
    vf-create-app="true"
    vf-container="#app"
    vf-resetix="false">
</script>

Copy the component by clicking the 'Copy component' button on this page and then paste it within Webflow using ⌘ + V

First Name
Last Name
Email
Phone Number
Message
{{ wfForm.messages.success || 'Thank you! Your submission has been received!'}}
{{ wfForm.messages.error || 'Oops! Something went wrong while submitting the form.'}}