@formcrafts/embed

导言

你可以使用Formcrafts的嵌入库 @formcrafts/embed 以 Vanilla JavaScript 为格式嵌入。 库可作为一个npm软件包提供,与Svelte,React,Vue,Angular等框架合作良好.

安装

要将 Formcraps JavaScript 库添加到您的项目中, 请使用 npm 安装 :

npm install @formcrafts/embed --save

导入库

要在代码中提供库,请导入必要的模块:

import { createInlineForm, createPopup } from "@formcrafts/embed"

嵌入 - 内置

初始化表单

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
})

可用方法

您可以使用下列方法与内线形式进行交互:

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

嵌入 - 弹出

初始化表单

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
})

可用方法

您可以使用下列方法与弹出表进行交互:

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