Introduction
You can use Formcrafts' embed library @formcrafts/embed to embed forms using vanilla JavaScript. The library is available as an npm package, and works well with frameworks like Svelte, React, Vue, and Angular.
Installation
To add the Formcrafts JavaScript library to your project, install it using npm:
npm install @formcrafts/embed --save
Importing the library
To make the library available in your code, import the necessary modules:
import { createInlineForm, createPopup } from "@formcrafts/embed"
Embed - Inline
Initialize the form
const myInlineForm = createInlineForm({
form: "form_key", // Your form key
target: document.getElementById("element_id"), // Target element
seamless: true, // Removes form border, shadow, and padding
width: 500, // Max width of the form
redirectWithin: true, // Keep redirect within form frame
values: {
field1: "Jack Smith",
field2: ["Chocolate", "Vanilla"],
}, // Prefill values
})
Available methods
You can use the following methods to interact with the inline form:
myInlineForm.on("load", (height: number) => {}) // Fires when the form loads
myInlineForm.on("submit:success", () => {}) // Fires on a successful form submit
myInlineForm.destroy() // Remove the form instance
myInlineForm.values({
field1: "New value",
}) // Update the values of the form
Embed - Popup
Initialize the form
const myPopupForm = createPopup({
form: "form_key", // Your form key
width: 500, // Max width of the form
redirectWithin: true, // Keep redirect within form frame
values: {
field1: "Jack Smith",
field2: ["Chocolate", "Vanilla"],
}, // Prefill values
})
Available methods
You can use the following methods to interact with the popup form:
myPopupForm.on("load", (height: number) => {}) // Fires when the form loads
myPopupForm.on("submit:success", () => {}) // Fires on a successful form submit
myPopupForm.load() // Load the form. Can be used to load the form before showing it. Optional.
myPopupForm.open() // Open the popup
myPopupForm.close() // Close the popup
myPopupForm.destroy() // Destroy the popup and the form instance
myPopupForm.values({
field1: "New value",
}) // Update the values of the form