How to load a html form in an iframe

JavaScript
1

I would like to know how to load the HTML form in the iframe in reactjs.

I have one form component that has all the input fields, and I want to load that form component in the iframe. I would like to know how I can do that.

const Form = () => {
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
        />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input type="email" id="email" />
      </div>
      <button>Submit</button>
    </form>
  );
};

export default Form;
2

Hi @rishipurwar007,
This article might help: => Best practices for React iframes - LogRocket Blog

Thanks,
Hal_Jordan

1 Like
3

It worked, but now my Form component styling doesn’t get applied. Any idea how to fix that? I tried to import the styling file for that component directly inside that file, but it still didn’t work.

4

Read here => javascript - How to set iframe content of a react component - Stack Overflow

Thanks,
Hal_Jordan