Need to post form to external site and navigate to that site

I haven’t found a way to create a form with an “action” that specifies an external URL. I can’t use fetch() due to the fact that the user must navigate to the external site (to complete a form prior to returning to the Wix site).

I tried creating an HTML (iframe) widget with a form, but it does not work when setting target=“_top” or “_parent”. A message in the dev console says: “The frame attempting navigation of the top-level window is sandboxed, but the flag of ‘allow-top-navigation’ or ‘allow-top-navigation-by-user-activation’ is not set”.

Is there a way to change the behavior so that top navigation works reliably from within the iframe, or some other way to accomplish the objective stated in this post’s title?

Let me make sure I’m understanding you. On form submit you want the user to be redirected to an external url?

Not just a redirect… On submit, the external site will render a form based on the data submitted.

Okay, I see.

On submit > data is posted to the external site > a form is returned/rendered in the iFrame on the Wix site.

The form is rendering in the iFrame but you can’t get it to have the behavior you would like using “top”?

And yes the iframe element is sandboxed so you can’t use window.parent etc. You can use postMessage to communicate between the iframe and your page code.

I"m assuming that you want the iframe form to block the user from continuing any action until they fill it out? If that is the case the only idea I currently have is to block or hide the inputs until the iframe action is complete.

There is potentially a more elegant solution that someone else passing through may offer. I will follow up as well if I have any other ideas

Correct - I don’t want the form to render in an iFrame, and yes, it does not render at all when trying to set the form target to either “_top” or “_parent”.

The primary reason for wanting the form to render in the parent window is that it is loading a First Data “Payeezy” hosted payment form.

Thanks for your time and willingness to help!

@tony-kamin Ack! I didn’t realize your form wasn’t rendering at all. Does Payeezy have an API or only the embeddable form option?

You should be able to get this to work, but those targets will not work in the sandboxed environment. Are they required for the form to render/work?

Here are some articles as well in case you haven’t run into them that may provide more information.

Working with the HTML component

There are also the option of custom elements

HTML component API reference

@amandam I believe Payeezy has an API but using it would put us in PCI scope (because we would then be touching cardholder data). I’ve been told we specifically need to use their hosted payment pages, and not in an embedded fashion.

I appreciate the reference links. One way or another we’ll figure out a solution – we always do. :slight_smile:

1 Like

@tony-kamin isn’t that the truth! Okay, keep me posted once you have a chance to review everything and test a little and let me know how things are going. I’m not familiar with Payeezy at all but conceptually it shouldn’t matter…