CODEWITHSUNDEEP
reactjsformsiframemailchimp
Andrew
Andrew

Reputation: 5200

Sending a form response to an iFrame in React

I'm trying to send an embedded Mailchimp signup form's response to a hidden iFrame, to prevent the form opening the link contained in the form's action. I'm working in React, and the standard approach doesn't seem to be working. I have: 

<div class="embedSignup">
 <form action="https://app.usXX.list-manage.com/subscribe/post" method="post" formTarget="hiddenFrame">
  // ... form elements
 </form>
</div>
<iframe name="hiddenFrame" src="about:blank" style={{display:"none"}}></iframe>

But it continues to default to target="_self" behavior.

I've tried using target, formtarget, and formTarget, and none worked.

Any help is much appreciated.

Upvotes: 1

Views: 3348

Answers (1)

Phd. Burak &#214;zt&#252;rk
Phd. Burak &#214;zt&#252;rk

Reputation: 1767

You can use the srcdoc property. It allows you to specify the content of the iframe.

<iframe srcdoc="<p>Your html</p>"/>

Please don't forget, that srcdoc has very limited browser support, there is a polyfill available but it isn’t useful in this case because it requires allow-scripts, which is not safe.

In this case we can use document.open() and write() functions to create custom iframe.

import React from 'react';

const IframeSigninForm = (props) => {
   let iref = null;
   const writeHTML = (frame) => {
   
   if (!frame) {
     return;
   }

   iref = frame;
   let doc = frame.contentDocument;
   doc.open();
   doc.write(props.content);
   doc.close();
   frame.style.width = '100%';
   frame.style.height = `${frame.contentWindow.document.body.scrollHeight}px`;
 };

 return <iframe src="about:blank" scrolling="no" frameBorder="0"  ref{writeHTML}/>
};

export default IframeSigninForm;

Finally, you can use your own component like;

import IframeSigninForm from './IframeSigninForm';

<IframeSigninForm content={ <form action="https://app.usXX.list-manage.com/subscribe/post" method="post" formTarget="hiddenFrame"></form>} />

Upvotes: 2

Related Questions