Capturing Query String Parameters On Web Forms
I haven?t found many examples of Web Forms on Quick Base where you could have a lead gen / simple setup that posts directly into Quick Bases database. Our shop primarily works in Wordpress, which can be achieved, if you use a plugin like Zapier, but I wanted to share a tutorial with creating a web form and setting up hidden fields for info you may want to capture in query string parameters.
Lets say you have a URL www.example.com. You may have a series of arguments passed like Google UTM code to capture campaign information, so the URL will look like this:
www.example.com/?campaignID=123&whatever=someValue
This tutorial shows how to set this up manually. This does not cover form creation if you?re using a form plugin. This is purely a custom solution.
There's a few steps in creating Web Forms in Quickbase. Using the URL above, you would obviously switch out the parameters with your own and reflect in the code below:
STEP #1: CREATE A TOKEN
You must create an Application Token for the form to access the app. To do this:
Go to the apps homepage settings => App Properties => And click on "Manage Application Token" under Advanced settings.
Click New Application Token. Type in a description and click OK.
If the Web Form wizard in the next step provides you with an Application Token, you can create a new token or assign to an existing token.
STEP #2: CREATE A WEBFORM:
After the token is created, you can go into Quick Base and create a new table with fields you want to display on the form. For all hidden fields, you can create them as text fields for now, since Quickbase does not have a hidden field type. Next, you can go through the form wizard:
https://login.quickbase.com/db/6mztyxu8?act=DBPage&pagename=formWizard.html
STEP #3: EDITING A WEBFORM TO CAPTURE QUERY STRING PARAMETERS
The form wizard produces static HTML, which may need to be modified if you want to make any of the fields hidden. To do this, change:
<input type=text> to <input type=hidden>
We typically capture values from query string parameters into hidden fields, which can be done through JS or PHP. Either method will work; basically boils down to your preference in coding. The code bolded below is custom code that?s NOT generated by the wizard, that needs to be included in order for this to work.
IF YOU PREFER JS:
<!-- GET JS -->
<script>
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
//if (!results) return null;
if (!results) return '';
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('campaignID?);
</script>
<!-- END OF GET JS _
<!-- QB FORM -->
<h2>Some Form</h2><form name=someform method=POST onsubmit='return validateForm(this)' encType='multipart/form-data' action=https://urlthatquickbasegenerates >
<input type=hidden name=fform value=1>
<table>
<tr><td class="m">Name</td>
<td class="m"><input type=text size=40 name=_fid_6 ></td></tr>
<tr><td class="m">Email</td>
<td class="m"><input type=text size=40 name=_fid_7 ></td></tr>
<tr><td class="m">Phone</td>
<td class="m"><input type=text size=40 name=_fid_8 ></td></tr>
<tr><td class="m">Hidden</td>
<td class="m"><input type=hidden size=40 name=_fid_9 id=?example? value=""></td></tr>
</table><input type=hidden name=rdr value='http://www.example.com'>;;
<input type=submit value=Save>
</form>
<br />Powered by QuickBase <a href="http://www.quickbase.com/">Online Database</a>
<script lang="javascript">
function CheckForOther (item, origlen)
{
var sitem = item.options[item.selectedIndex];
if (item.selectedIndex == (item.length - 1))
{
var val = prompt ("ADD A NEW CHOICE:", "");
if (val == null)
item.selectedIndex = 0;
else
{
var slen = item.length;
if (slen == origlen+1){
item.options[slen] = new Option (sitem.text, sitem.value);
}
item.options[item.length-2].text = val;
item.options[item.length-2].value = val;
item.selectedIndex = item.length-2;
}
}
}
</script>
<script lang=javascript>
function validateForm(theForm)
{
}
</script>
<script type="text/javascript">
function myFunction() {
document.getElementById(?example?).value = innerHTML = dynamicContent;
}
// Required to load parameter into input field
window.onload = function() {
myFunction();
}
</script>
IF YOU PREFER PHP
<h2>Some Form</h2><form name=someform method=POST onsubmit='return validateForm(this)' encType='multipart/form-data' action=https://urlthatquickbasegenerates >
<input type=hidden name=fform value=1>
<table>
<tr><td class="m">Name</td>
<td class="m"><input type=text size=40 name=_fid_6 ></td></tr>
<tr><td class="m">Email</td>
<td class="m"><input type=text size=40 name=_fid_7 ></td></tr>
<tr><td class="m">Phone</td>
<td class="m"><input type=text size=40 name=_fid_8 ></td></tr>
<tr><td class="m">Hidden</td>
<td class="m"><input type=hidden size=40 name=_fid_9 value="<?php echo $_GET[?campaignID?]; ?>"></td></tr>
</table><input type=hidden name=rdr value='http://www.example.com'>;;
<input type=submit value=Save>
</form>
<br />Powered by QuickBase <a href="http://www.quickbase.com/">Online Database</a>
<script lang="javascript">
function CheckForOther (item, origlen)
{
var sitem = item.options[item.selectedIndex];
if (item.selectedIndex == (item.length - 1))
{
var val = prompt ("ADD A NEW CHOICE:", "");
if (val == null)
item.selectedIndex = 0;
else
{
var slen = item.length;
if (slen == origlen+1){
item.options[slen] = new Option (sitem.text, sitem.value);
}
item.options[item.length-2].text = val;
item.options[item.length-2].value = val;
item.selectedIndex = item.length-2;
}
}
}
</script>
<script lang=javascript>
function validateForm(theForm)
{
}
</script>
Lets say you have a URL www.example.com. You may have a series of arguments passed like Google UTM code to capture campaign information, so the URL will look like this:
www.example.com/?campaignID=123&whatever=someValue
This tutorial shows how to set this up manually. This does not cover form creation if you?re using a form plugin. This is purely a custom solution.
There's a few steps in creating Web Forms in Quickbase. Using the URL above, you would obviously switch out the parameters with your own and reflect in the code below:
STEP #1: CREATE A TOKEN
You must create an Application Token for the form to access the app. To do this:
Go to the apps homepage settings => App Properties => And click on "Manage Application Token" under Advanced settings.
Click New Application Token. Type in a description and click OK.
If the Web Form wizard in the next step provides you with an Application Token, you can create a new token or assign to an existing token.
STEP #2: CREATE A WEBFORM:
After the token is created, you can go into Quick Base and create a new table with fields you want to display on the form. For all hidden fields, you can create them as text fields for now, since Quickbase does not have a hidden field type. Next, you can go through the form wizard:
https://login.quickbase.com/db/6mztyxu8?act=DBPage&pagename=formWizard.html
STEP #3: EDITING A WEBFORM TO CAPTURE QUERY STRING PARAMETERS
The form wizard produces static HTML, which may need to be modified if you want to make any of the fields hidden. To do this, change:
<input type=text> to <input type=hidden>
We typically capture values from query string parameters into hidden fields, which can be done through JS or PHP. Either method will work; basically boils down to your preference in coding. The code bolded below is custom code that?s NOT generated by the wizard, that needs to be included in order for this to work.
IF YOU PREFER JS:
<!-- GET JS -->
<script>
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
//if (!results) return null;
if (!results) return '';
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('campaignID?);
</script>
<!-- END OF GET JS _
<!-- QB FORM -->
<h2>Some Form</h2><form name=someform method=POST onsubmit='return validateForm(this)' encType='multipart/form-data' action=https://urlthatquickbasegenerates >
<input type=hidden name=fform value=1>
<table>
<tr><td class="m">Name</td>
<td class="m"><input type=text size=40 name=_fid_6 ></td></tr>
<tr><td class="m">Email</td>
<td class="m"><input type=text size=40 name=_fid_7 ></td></tr>
<tr><td class="m">Phone</td>
<td class="m"><input type=text size=40 name=_fid_8 ></td></tr>
<tr><td class="m">Hidden</td>
<td class="m"><input type=hidden size=40 name=_fid_9 id=?example? value=""></td></tr>
</table><input type=hidden name=rdr value='http://www.example.com'>;;
<input type=submit value=Save>
</form>
<br />Powered by QuickBase <a href="http://www.quickbase.com/">Online Database</a>
<script lang="javascript">
function CheckForOther (item, origlen)
{
var sitem = item.options[item.selectedIndex];
if (item.selectedIndex == (item.length - 1))
{
var val = prompt ("ADD A NEW CHOICE:", "");
if (val == null)
item.selectedIndex = 0;
else
{
var slen = item.length;
if (slen == origlen+1){
item.options[slen] = new Option (sitem.text, sitem.value);
}
item.options[item.length-2].text = val;
item.options[item.length-2].value = val;
item.selectedIndex = item.length-2;
}
}
}
</script>
<script lang=javascript>
function validateForm(theForm)
{
}
</script>
<script type="text/javascript">
function myFunction() {
document.getElementById(?example?).value = innerHTML = dynamicContent;
}
// Required to load parameter into input field
window.onload = function() {
myFunction();
}
</script>
IF YOU PREFER PHP
<h2>Some Form</h2><form name=someform method=POST onsubmit='return validateForm(this)' encType='multipart/form-data' action=https://urlthatquickbasegenerates >
<input type=hidden name=fform value=1>
<table>
<tr><td class="m">Name</td>
<td class="m"><input type=text size=40 name=_fid_6 ></td></tr>
<tr><td class="m">Email</td>
<td class="m"><input type=text size=40 name=_fid_7 ></td></tr>
<tr><td class="m">Phone</td>
<td class="m"><input type=text size=40 name=_fid_8 ></td></tr>
<tr><td class="m">Hidden</td>
<td class="m"><input type=hidden size=40 name=_fid_9 value="<?php echo $_GET[?campaignID?]; ?>"></td></tr>
</table><input type=hidden name=rdr value='http://www.example.com'>;;
<input type=submit value=Save>
</form>
<br />Powered by QuickBase <a href="http://www.quickbase.com/">Online Database</a>
<script lang="javascript">
function CheckForOther (item, origlen)
{
var sitem = item.options[item.selectedIndex];
if (item.selectedIndex == (item.length - 1))
{
var val = prompt ("ADD A NEW CHOICE:", "");
if (val == null)
item.selectedIndex = 0;
else
{
var slen = item.length;
if (slen == origlen+1){
item.options[slen] = new Option (sitem.text, sitem.value);
}
item.options[item.length-2].text = val;
item.options[item.length-2].value = val;
item.selectedIndex = item.length-2;
}
}
}
</script>
<script lang=javascript>
function validateForm(theForm)
{
}
</script>
