填充反应嵌入
嵌入 填充数 在反应项目中直接显示窗体。 类型脚本包含, 没有依赖性 :)
提示:如果你想在节点.js中使用填充API,请尝试 @ fillout/ api来啊!
设置
安装方式 npm i @fillout/react
嵌入组件
每个嵌入类型都有组件。 他们都要求 filloutId 道具,这是你的形式。 这个代码很容易在编辑器的url或活的形态中发现,例如, forms.fillout.com/t/foAdHjd1Duus。 。 。 .
所有嵌入组件允许您使用可选选项通过 URL 参数 parameters 道具,也可以使用 inheritParameters 使窗体继承主机页面url中的参数.
标准嵌入
这个很简单.
import { FilloutStandardEmbed } from "@fillout/react";
function App() {
return (
<div
style={{
width: 400,
height: 400,
}}
>
<FilloutStandardEmbed filloutId="foAdHjd1Duus" />
</div>
);
}
export default App;
如果你不愿手动设置嵌入高地,而是将其扩展到形式大小,使用 dynamicResize 道具 (英语).
完全嵌入
这个 FilloutFullScreenEmbed 组件填充整个页面,由 position: fixed。 。 。 .
import { FilloutFullScreenEmbed } from "@fillout/react";
function App() {
return <FilloutFullScreenEmbed filloutId="foAdHjd1Duus" inheritParameters />;
}
export default App;
弹出已嵌入
此组件创建了弹出, 黑暗的背景覆盖了后面的页面内容 。 与"FullScreen"嵌入不同,它可以使用关闭按钮来关闭,也可以在弹出器外点击来关闭.
你用自己的状态来控制它 这个 isOpen 财务报告和审定财务报表 onClose 需要道具.
import { useState } from "react";
import { FilloutPopupEmbed } from "@fillout/react";
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button onClick={() => setIsOpen(true)}>Schedule a call</button>
<FilloutPopupEmbed
filloutId="foAdHjd1Duus"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
/>
</>
);
}
export default App;
嵌入滑动器
与弹出嵌入式相似,此功能将和您自己的按钮和状态一起使用, 因此组件需要 isOpen 财务报告和审定财务报表 onClose 道具来. 窗体会从屏幕一侧滑出. 您可以控制它来自哪个方向 sliderDirection,这可以是 left 或者说 right (默认).
import { useState } from "react";
import { FilloutSliderEmbed } from "@fillout/react";
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button onClick={() => setIsOpen(true)}>Schedule a call</button>
<FilloutSliderEmbed
filloutId="foAdHjd1Duus"
inheritParameters
parameters={{
example: "abc",
}}
isOpen={isOpen}
onClose={() => setIsOpen(false)}
sliderDirection="left"
/>
</>
);
}
export default App;
弹出和滑动嵌入按钮
如果您不愿自行管理弹出或滑动的开放状态, 请使用 FilloutPopupEmbedButton 或者说 FilloutSliderEmbedButton。这会使一个按钮在点击时打开嵌入层。 这些部件采用与独立对应设备相同的道具(除 isOpen 财务报告和审定财务报表 onClose),但拥有一些额外的可选道具来自定义按钮.
text- 更改按钮文本color- 更改按钮背景颜色。 只要您指定了十六进制代码,文本颜色就会自动与它相对应.size- 小型、中型或大型float- 让你的按钮浮上屏幕.bottomLeft或者说bottomRight。 。 。 .
import { FilloutSliderEmbedButton } from "@fillout/react";
function App() {
return (
<FilloutSliderEmbedButton
filloutId="foAdHjd1Duus"
inheritParameters
parameters={{
example: "abc",
}}
sliderDirection="left"
text="Schedule a call"
color="#444444"
size="small"
float="bottomRight"
/>
);
}
export default App;
需要更多控制按钮外观的,只需自行制作并结合独立嵌入组件一起使用.
倾听形式事件
您可以使用 onInit, (中文(简体) ), onPageChange 财务报告和审定财务报表 onSubmit 道具来. 其中每一个都给出了提交UUID作为第一个参数,以及 onPageChange 道克给出了页面ID作为第二个参数.
import { FilloutStandardEmbed } from "@fillout/react";
function App() {
return (
<FilloutStandardEmbed
filloutId="4SVaJQNVdrus"
dynamicResize
onInit={(submissionUuid) => {
console.log(
`User started filling out the form (submission ID: ${submissionUuid})`
);
}}
onPageChange={(submissionUuid, pageId) => {
if (pageId === "qTcp") {
console.log("User is on the review step");
}
}}
onSubmit={async (submissionUuid) => {
const email = await doSomethingOnYourServer(submissionUuid);
console.log(`${email} finished filling out the form`);
}}
/>
);
}
export default App;
这可以结合 @ fillout/ api 软件包,以获取关于窗体结构的信息,并在获得提交UUID后获取字段值.
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
onPageChange可能为窗体上的任何一页所触发,包括嵌入第一负载时的起始页。 您应该总是检查页面ID, 而不是仅仅因为函数被触发而假设用户在表格中的位置 .
自定义域
如果您想利用只有自有域内格式才能提供的特性,例如定制JS,你可以使用 domain 改变嵌入式url的道具.
import { FilloutFullScreenEmbed } from "@fillout/react";
function App() {
return (
<FilloutFullScreenEmbed filloutId="foAdHjd1Duus" domain="example.com" />
);
}
export default App;