I need help with html and javascript code.
I am building a landing page using a third-party builder (Unlayer.com), which gives out the page HTML. On the page, there is a form tool to collect leads, so whenever the submit button is clicked the leads data will be sent as a POST request to a bubble’s backned workflow trigger. This is the inbuilt functionality.
Now I wanted the user to land on a specific page, after hitting the submit button I wanted two actions on the same submit button, that is, when someone clicks submit, the leads data to be sent to the POST request and the user to be sent to a different external page URL, as right now bubble can redirect the user only to a bubble page. I researched a bit and found I could achieve this by adding a Java script inside the HTML. so I added that.
But now, if I try this inside an environment like the one in HTML Online Viewer websites, it is running fine. But when I click the submit button on the bubble page directly opening it in the browser, it takes the user to the post request URL (the JSON objects page). The second action of taking them to another page is not working.
I believe someone here might be able to help me.
My HTML with javascript inserted:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"> .u-row { display: flex; flex-wrap: nowrap; margin-left: 0; margin-right: 0; } .u-row .u-col { position: relative; width: 100%; padding-right: 0; padding-left: 0; } .u-row .u-col.u-col-100 { flex: 0 0 100%; max-width: 100%; } u/media (max-width: 767px) { .u-row:not(.no-stack) { flex-wrap: wrap; } .u-row:not(.no-stack) .u-col { flex: 0 0 100% !important; max-width: 100% !important; } } body,html{padding:0;margin:0}html{box-sizing:border-box}\*,:after,:before{box-sizing:inherit}html{font-size:14px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}p{margin:0}form .error-field{-webkit-animation-name:shake;animation-name:shake;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}form .error-field input,form .error-field textarea{border-color:#a94442!important;color:#a94442!important}form .field-error{padding:5px 10px;font-size:14px;font-weight:700;position:absolute;top:-20px;right:10px}form .field-error:after{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-top-color:#ebcccc;border-width:5px;margin-left:-5px}form .spinner{margin:0 auto;width:70px;text-align:center}form .spinner>div{width:12px;height:12px;background-color:hsla(0,0%,100%,.5);margin:0 2px;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}form .spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}form .spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@media (max-width:480px){.container{max-width:100%!important}}@media (min-width:481px) and (max-width:768px){.hide-tablet{display:none!important}}.container{width:100%;padding-right:0;padding-left:0;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}} a\[onclick\] { cursor: pointer; } body { font-family: arial,helvetica,sans-serif; font-size: 1rem; line-height: 1.5; color: #000000; background-color: #FFFFFF; } #u\_body a { color: #0000ee; text-decoration: underline; } #u\_body a:hover { color: #0000ee; text-decoration: underline; } #u\_content\_form\_1 button:hover { color: #FFF !important; background-color: #3AAEE0 !important; } #u\_content\_form\_1 input::placeholder { color: #000; opacity: 0.5; } #u\_content\_button\_1 a:hover { color: #FFFFFF !important; background-color: #3AAEE0 !important; } </style>
<script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var form = document.querySelector("form"); form.onsubmit = function (event) { event.preventDefault(); // Prevent the default form submission behavior var formData = new FormData(form); fetch(form.action, { method: "POST", body: formData }).then(function (response) { window.location.href = "https://www.inaziffy.com/thank-you-6"; // Redirect after POST }).catch(function (error) { console.error('Error during fetch:', error); }); }; }); </script>
</head>
<body>
<div id="u\_body" class="u\_body" style="min-height: 100vh;">
<div id="u\_row\_1" class="u\_row" style="padding: 0px;">
<div class="container" style="max-width: 1200px;margin: 0 auto;">
<div class="u-row">
<div id="u\_column\_1" class="u-col u-col-100 u\_column" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;">
<div style="width: 100%;padding:0px;">
<div id="u\_content\_image\_1" class="u\_content\_image" style="overflow-wrap: break-word;padding: 10px;">
<div style="position:relative;line-height:0px;text-align:left">
<img alt="" src="https://assets.unlayer.com/projects/141475/1713981650291-Screenshot%20(2).png" style="width: 100%;max-width: 72px;" title=""/>
</div>
</div>
<div id="u\_content\_heading\_1" class="u\_content\_heading" style="overflow-wrap: break-word;padding: 10px;">
<h1 style="margin: 0px; line-height: 140%; text-align: center; word-wrap: break-word; font-size: 35px; font-weight: 400;"><strong>Optin</strong></h1>
</div>
<div id="u\_content\_form\_1" class="u\_content\_form" style="overflow-wrap: break-word;padding: 10px;">
<div style="text-align:center"><form action="https://www.letslevelup.app/version-1yc5/api/1.1/wf/trigger1?funnel=1713981278629x302717787138949100\&pageid=1713981537189x730694483438469100" method="POST" style="display:inline-block;width:55%;box-sizing:border-box" target="\_self"><div color="#000" class="sc-jEACwC wZTDr"><div style="padding-bottom:10px"><div style="text-align:left;color:#444;font-size:14px;padding:0px 0px 3px"></div><div style="position:relative"><input type="text" name="first\_name" placeholder="First Name" style="border-top-width:1px;border-top-style:solid;border-top-color:#CCC;border-left-width:1px;border-left-style:solid;border-left-color:#CCC;border-right-width:1px;border-right-style:solid;border-right-color:#CCC;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;border-radius:0px;padding:10px;color:#000;background-color:#FFF;font-size:12px;width:100%"/></div></div></div><div color="#000" class="sc-jEACwC wZTDr"><div style="padding-bottom:10px"><div style="text-align:left;color:#444;font-size:14px;padding:0px 0px 3px"></div><div style="position:relative"><input type="text" name="last\_name" placeholder="Last Name" style="border-top-width:1px;border-top-style:solid;border-top-color:#CCC;border-left-width:1px;border-left-style:solid;border-left-color:#CCC;border-right-width:1px;border-right-style:solid;border-right-color:#CCC;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;border-radius:0px;padding:10px;color:#000;background-color:#FFF;font-size:12px;width:100%"/></div></div></div><div color="#000" class="sc-jEACwC wZTDr"><div style="padding-bottom:10px"><div style="text-align:left;color:#444;font-size:14px;padding:0px 0px 3px"></div><div style="position:relative"><input type="email" name="email" placeholder="Email" style="border-top-width:1px;border-top-style:solid;border-top-color:#CCC;border-left-width:1px;border-left-style:solid;border-left-color:#CCC;border-right-width:1px;border-right-style:solid;border-right-color:#CCC;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;border-radius:0px;padding:10px;color:#000;background-color:#FFF;font-size:12px;width:100%"/></div></div></div><div style="text-align:center"><button type="submit" style="border:none;border-radius:4px;display:inline-block;text-align:center;overflow:hidden;cursor:pointer;text-decoration:none;padding:10px;margin:5px 0px 0px;font-size:14px;width:61%;color:#FFF;background-color:#3AAEE0">Submit</button></div></form></div>
</div>
<div id="u\_content\_button\_1" class="u\_content\_button" style="overflow-wrap: break-word;padding: 10px;">
<div style="text-align: center;">
<a href="https://www.inaziffy.com/thank-you-6" target="\_self" style="color:#FFFFFF;background-color:#3AAEE0;border-radius: 4px;line-height:120%;display:inline-block;text-decoration:none;text-align:center;padding:10px 20px;width:auto;max-width:100%;word-wrap:break-word;font-size: 14px;">
<span style="line-height: 16.8px;">Button Text</span>
</a>
</div>
</div>
<div id="u\_content\_image\_2" class="u\_content\_image" style="overflow-wrap: break-word;padding: 10px;">
<div style="position:relative;line-height:0px;text-align:center">
<img alt="" src="https://assets.unlayer.com/projects/141475/1713981786503-788125" style="width: 100%;max-width: 512px;" title=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My Javascript that is inserted into the above-mentioned HTML:
<script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var form = document.querySelector("form"); form.onsubmit = function (event) { event.preventDefault(); // Prevent the default form submission behavior var formData = new FormData(form); fetch(form.action, { method: "POST", body: formData }).then(function (response) { window.location.href = "https://www.inaziffy.com/thank-you-6"; // Redirect after POST }).catch(function (error) { console.error('Error during fetch:', error); }); }; }); </script>