How to create a newsletter form that doesn't redirect you to a new page?

Design help Custom code
1

Hi,

I am trying to implement a newsletter sign-up code through one.com’s provider Ubinox. According to their documentation, this is the custom HTML to be used:

<form action="https://nasetsestetik-se.one.uxmail.io/handlers/post/" method="post">

  <input type="hidden" name="action" value="subscribe" />
  <input type="hidden" name="lists" value="80106" />

  <p>
    <label for="email_address_id">E-postadress</label>
    <input type="text" name="email_address" id="email_address_id" />
  </p>

  <p>
    <input type="submit" value="Prenumerera" />
  </p>

</form>

Which I mapped to the newsletter sign-up form at the bottom of my page (including hidden inputs):

image
image264×546 22.5 KB

It works, however on submit it redirects me to Ubinox own confirmation page, which I don’t want, instead I’d like to use webflow’s form success state.

How would I go about implementing it? Do I need a different address to POST to, or do something else on my end, or is it impossible as that’s just how the given signup works and there’s no way around it? Tried putting “#” in redirect url with no success.

Here is my site Read-Only: Webflow - YouSkin

Form only works on published site which you can find here: https://youskin-a37a8c.webflow.io/

2

No, you have to write javascript and send the form in an async way in order to not redirect, otherwise the form will have the default browser behaviour

3

Thank you, do you have any pointers as far as required JS implementation goes? Not sure what I should search for.

4

POST form data using JavaScript’s Fetch API (openjavascript.info)

1 Like
5

Thanks a lot for the help!

6

Hey Brown, my Webflow Utils library has this capability.

Try this;

  1. Add this to your before </body> custom code on your page;
<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@3.16/src/nocode/webflow-form.js"></script>
  1. On your FORM BLOCK element ( not the form element ) add a custom attribute of;

wfu-form-handler=other

That should do what you need. Note that it will always display your custom success message, no matter what. Since you’re using a webhook I haven’t programmed for, the library doesn’t know how to determine success / fail states from the webhook response.

You can improve that if you want by using e.g. Make/Integromat’s webhooks which deliver useful success/fail codes.