如何在 React 中使用 Jotform答案

【问题标题】：How to use Jot Form with React如何在 React 中使用 Jotform
【发布时间】：2020-09-04 22:09:25
【问题描述】：

我正在尝试嵌入脚本标签以在组件中呈现表单。我不知道如何在 React 中做到这一点。如果我将此标签粘贴到 HTML 文档中，表单将完美加载，但我不知道如何使用 React 进行等效操作。

出于工作原因，我无法将实际代码粘贴到此站点上，但我基本上是在尝试将其嵌入到组件中，以便呈现表单并且用户可以提交表单：

<script type="text/javascript" src="https://form.jotform.com/jsform/1234566789"></script>

有什么想法吗？

【问题讨论】：

标签： javascript node.js reactjs embed jotform

【解决方案1】：

你可以使用标签

   const styles = {} // if you want to add some custom CSS
   const URL = "https://form.jotform.com/jsform/1234566789" //embed URL

   <iframe title="your title" style={styles} src={URL}></iframe>

阅读更多关于它HERE

【讨论】：

不幸的是，它只是显示为一个框，您可以滚动到其中包含实际表单的所有代码 - 至少我是如何尝试的。

【解决方案2】：

我找到了一个可爱的节点包，可以让你嵌入 Jotforms；你可以在这里找到 NPM 文章：

https://www.npmjs.com/package/react-jotform-embed

【讨论】：

【解决方案3】：

我制作了一个组件，可以轻松地将 JotForm.com 表单嵌入到基于 ReactJS 的网站或应用程序中。支持 NextJS / Gatsby like SSR 框架。

如果需要，您还可以访问一些回调，例如 onSubmit。

您可以在这里访问它：https://npmjs.com/package/jotform-react

【讨论】：