Custom HTML page to submit form -- I want to redirect to an external URL following "submit"

  • 1
  • 1
  • Question
  • Updated 8 months ago
  • Answered
I have a custom HTML page based on the Quickbase Custom Form Wizard. I added some formatting as needed for the users. 

When the users click the Submit button, I want to direct them to a URL outside of Quickbase. Currently, it just reloads the page with new, blank values. 

Is this possible? If not, what are the options of URLs I can direct to within Quickbase? 

Disclosure: I do not know Javascript or other coding languages so my solutions are limited to QB native, basic HTML/CSS, and copy/pasting :P

Here's the existing info I have re: form/code. 

<form name=qdbform method=POST onsubmit='return validateForm(this)' encType='multipart/form-data' action=https://mydatabase.com/db/xxxxx?act=API_AddRecord&apptoken=xxxxxx...;
<input type=hidden name=fform value=1>

.......

<input type="submit" style="font-face: 'Helvetica'; font-size: 24pt; color: white; background-color: #C21734; border: 3px" value="Save">
</form>

Photo of Adam

Adam

  • 750 Points 500 badge 2x thumb

Posted 8 months ago

  • 1
  • 1
To redirect to another page, replace what you currently have at the bottom of your code for <input...> with the following and update to where in your app you'd like to redirect the user.

<input type=hidden name=rdr value='https://yourcompany.quickbase.com/db/yourtableid?a=dbpage&pageID=3'>;
<input type=submit style="font-face: 'Helvetica'; font-size: 24pt; color: white; background-color: #C21734; border: 3px" value="Save">

When submitting a form you will only be able to redirect to another page in your app. What I've done in the past is create another code page with a single button that will link to where I need them to go outside the app. Here is the code from my code page:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="_parent">
<style>
.button {
  width: 50%;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 auto;
  text-decoration: none;
  text-align: center;
  padding: 0.9rem 1.1rem;
  border-radius: 2px;
  border: 2px solid #FFA6B6;
  background-color: white;
  color: #FFA6B6;
  font-family: Arial;
  font-weight: 300;
}
.sub-heading{
  font-size: 20px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: white;
  text-align: center;
  line-height: 1.6;
}
</style>
</head>    
<body>
<p></p>
<p></p>
<p></p>
<div class="sub-heading">Thank You!</div><br>
<a href="https://www.quickbasejunkie.com/blog"; style="margin:auto; text-align:center; display:block;" class="button">Please Click Here</a>
</body>
</html>

Photo of Rob White IV

Rob White IV

  • 1,070 Points 1k badge 2x thumb
I wonder if an html redirect would work in your code page?  What happens if you place the following in the head of your example:

(<head>)

<meta http-equiv="refresh" content="0; URL=http://www.google.com/"; />

(</head>)

It might remove the need for a user to click a button if it works.

For more see --> https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections#HTML_redirections#HTML_redirections

Thanks,

~Rob
(Edited)
Ohhh, I'll have to check this one out! Thanks Rob
Photo of Adam

Adam

  • 750 Points 500 badge 2x thumb
Thank you QB Junkie! Extremely helpful!! 

RobWhite - thank you too! your code worked exactly as expected.

Just as an fyi I ended up actually keeping the button option because I liked the "confirmation landing page" experience for the user. 

Thanks again to you both


You are most welcome!