Form redirect request #17
Comments
|
Same. I tried adding:
But since this script is firing externally from google scripts "window" is undefined. |
|
Same Problem |
|
I fixed it by adding this to the html and not the google script:
|
Where did you add that in the HTML? Was it inside the form action, or outside the form action brackets? |
|
I put it after the input type = submit outside of the form. |
|
In case anyone wants to add dropdown selects, it worked fine for me. Here is my form: And the spreadsheet: |
This worked. For those wondering how to implement this... Literally copy all of this and paste it at the bottom of your HTML document that has your form. Inside your
|
It also worked for me. Here's the full code (without the Google Apps script URL): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form
id="SurveyForm"
method="POST"
action="YOUR_GOOGLE_SCRIPT_URL"
>
<input name="Email" type="email" placeholder="Email" required>
<input name="Name" type="text" placeholder="Name" required>
<button type="submit">Send</button>
</form>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() { const yourForm = document.getElementById('SurveyForm'); yourForm.addEventListener("submit", function(e) { e.preventDefault(); const data = new FormData(yourForm); const action = e.target.action; fetch(action, { method: 'POST', body: data, }) .then(() => { window.location.replace('https://www.WEBSITE.com/thank-you') }) }) });
</script>
</body>
</html>Update (June 11, 2023): This trick is not working anymore. I am now using SheetDB service. Here is a working code example: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form
id="SurveyForm"
method="POST"
action="YOUR_SHEETDB_SCRIPT_URL"
>
<input id="Date" name="Date" type="hidden" readonly="readonly">
<input name="Email" type="email" placeholder="Email" required>
<input name="Name" type="text" placeholder="Name" required>
<button type="submit">Send</button>
</form>
<script>
// Get current Date
var date_today = new Date().toISOString().slice(0, 10)
document.getElementById("Date").value = date_today.toString();
var form = document.getElementById('SurveyForm');
form.addEventListener("submit", e => {
e.preventDefault();
fetch(form.action, {
method : "POST",
body: new FormData(document.getElementById("SurveyForm")),
}).then(
response => response.json()
).then((html) => {
// you can put any JS code here
window.location.replace('https://www.WEBSITE.com/thank-you')
});
});
</script>
</body>
</html> |
This is a fantastic overview, and it works great. The only issue I have is finding a way to redirect the page to another URL after submission.
It returns a success page, however it does not redirect.
What code would I need to add inside of this Javascript to redirect the user, instead of them seeing the message above?
Thanks!
The text was updated successfully, but these errors were encountered: