How to use Jot Form with React

Question

I'm trying to embed a script tag to render a form in a component. I can't figure out how to do this in React. If I took this tag and pasted it to an HTML document, the form would load perfectly, but I don't know how to do the equivalent with React.

I cant paste the actual code to embed on this site for work reasons, but I'm basically trying to embed this into a component so that a form renders and users can submit the form:

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

Any ideas?

Answer 1

I made a component to easily embed JotForm.com forms to your ReactJS based websites or applications. It supports NextJS / Gatsby like SSR frameworks.

You also have access to some callbacks like onSubmit if you need.

You can access it here: https://npmjs.com/package/jotform-react

Answer 2

you can use the tag

   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>

read more about it HERE

Answer 3

I found a lovely node package that lets you embed Jotforms; you can find the NPM article here :

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

Answer 4

This was a lot easier than the solutions above and I couldn't find anything anywhere telling me how to do it. So, here's what I did:

1. Go to your form and the "Publish" page.
2. Select iframe and copy the code.
3. Create a file in the public/ folder called "jotform-embed.htm" (or whatever you want to call it) and paste all of the iframe code into it.
4. Inside your React JSX, reference the file like this:

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

And that's all you have to do!