Sending a form response to an iFrame in React

Question

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.

`target` should do that, if the form gets submitted normally. If react interferes however, prevents the normal form submission, and makes it an AJAX request instead(?) - then you’d have to check the documentation, I suppose, on how to handle targetting specific result windows/frame then. — CBroe, Apr 17 '20 at 13:32
(MailChimp does have APIs for this kind of stuff as well. Might perhaps make more sense, to use your own form, that you just submit to your app, and then handle the rest in the background …?) — CBroe, Apr 17 '20 at 13:54
Yes, @CBroe; it turns out `target` was working. For reasons still unclear to me, I had to follow the protocol discussed in one of the answers to [this question](https://stackoverflow.com/questions/44341293/custom-mailchimp-signup-form-in-react/61276904#61276904) to actually get it working. (In short, include a `c=?` value and use `post-json` at the end of the url rather than `post`.) I'm hoping there's a clearer answer out there, but this one does work. — Andrew, Apr 17 '20 at 17:09

score 2 · Accepted Answer · answered Jan 14 '21 at 10:09

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>} />

Sending a form response to an iFrame in React

1 Answers1