NodeJS 如何使用Jot Form与React

vktxenjb  于 2023-03-22  发布在  Node.js
关注(0)|答案(4)|浏览(91)

我尝试在组件中嵌入一个脚本标签来渲染表单。我不知道如何在React中做到这一点。如果我将这个标签粘贴到HTML文档中,表单将完美加载,但我不知道如何在React中做同样的事情。
由于工作原因,我不能粘贴实际的代码嵌入到这个网站上,但我基本上试图将其嵌入到一个组件中,以便表单呈现和用户可以提交表单:

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

有什么想法吗?

svmlkihl

svmlkihl1#

您可以使用标记

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

3bygqnnd

3bygqnnd2#

我发现了一个可爱的节点包,它可以让您嵌入Jotforms;你可以在这里找到NPM的文章:
https://www.npmjs.com/package/react-jotform-embed

7xllpg7q

7xllpg7q3#

我做了一个组件,可以轻松地将JotForm.com表单嵌入到基于ReactJS的网站或应用程序中。它像SSR框架一样支持NextJS / Gatsby。
如果需要,您还可以访问一些回调,如onSubmit。
您可以在这里访问:https://npmjs.com/package/jotform-react

nkoocmlb

nkoocmlb4#

这比上面的解决方案容易得多,我找不到任何地方告诉我如何做到这一点。所以,这是我所做的:
1.转到您的表单和“发布”页面。
1.选择iframe并复制代码。
1.在public/文件夹中创建一个名为“jotform-embed.htm”的文件(或者您想叫它的任何名称),并将所有iframe代码粘贴到其中。
1.在React JSX中,像这样引用文件:

<iframe
   title="Form Name"
   src="jotform-embed.htm"
   style={{
      width: '100%',
      height: '750px',
   }}
/>

这就是你要做的!

相关问题