Adam and Mark thank you for all your help on this.
This is where I am right now but as you can see it doesn't look pretty, love some help.
Ok so I am out of my element here and I hope you can help Im writing some HTML code and I want to dress it up and look pretty.
So here is the code they gave me as an example
<script>
$(function()
{
$("#email").change(
function(e){
$("#email2").val($(e.target).val());
}
);
}
);
</script>
<style type="text/css">
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
input{margin-left:10px; padding:5;}
select{border:0; margin-left:10px; padding:5;}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- Add Request Form ----------- */
.addrequestform{
margin:0 auto;
width:500px;
padding:14px;
}
#stylized{
border:solid 2px #b7ddf2;
background:#EEEEEE;
}
#stylized h1 {
font-size:12px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:150px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:150px;
}
#stylized input.radio{
float:left;
font-size:11px;
padding:4px 2px;
}
#stylized .texta, textarea{
border:solid 1px #aacfe4;
width:300px;
float:left;
font-size:11px;
padding:4px 2px;
margin:2px 0 20px 10px;
}
</style>
<h1 style="text-align: center;">Example Customer Website</h1>
<p style="text-align: center;">
This is an example of using your own custom request form on your website</p>
<p style="text-align: center;">
<a href="bqbj2a8cg?a=nwr&dfid=11" target="" title="">Example of Native QuickBase form with standard QuickBase header</a><br>
<a href="bqbj2a8cg?a=nwr&dfid=11&ifv=20" target="" title="">Example of Native QuickBase form without QuickBase header</a><br>
<a href="bqbj2a8b2?a=dbpage&pageID=12">How to create your own custom web form</a><br>
<a href="bqbj2a8b2">Go Back</a><br><br>
</p>
<p style="text-align: center;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Customer Request Tracker</title>
</p><div id="stylized" class="addrequestform">
<form name="enForm" method="POST" action="bqbj2a8cg?act=API_AddRecord&apptoken=dzs5cvbibe7ubcb6yk4gdfvixub" enctype="multipart/form-data">
<input type="hidden" name="rdr" value="bqbj2a8b2?a=pagePreview&pageID=2&ifv=20">
<h1>CUSTOMER REQUEST</h1>
<p>Please enter your request below. A copy will be emailed to the email address provided.</p>
<label>Request Type:
<span class="small">Select request type.</span></label>
<input type="radio" name="_fid_9" value="Billing"> Billing
<input type="radio" name="_fid_9" value="Marketing"> Marketing
<input type="radio" name="_fid_9" value="Sales"> Sales
<input type="radio" name="_fid_9" value="Support"> Support
<div class="spacer"></div>
<br>
<label>Operating System:
<span class="small">Select operating system.</span></label>
<select name="_fid_62">
<option value="Win XP">Win XP</option>
<option value="Win 7">Win 7</option>
<option value="Win 8">Win 8</option>
<option value="Win 8.1" selected="selected">Win 8.1</option>
<option value="Mac Snow Leopard 10.6">Mac Snow Leopard 10.6</option>
<option value="Mac Lion 10.7">Mac Lion 10.7</option>
<option value="Mac Mountain Lion 10.8">Mac Mountain Lion 10.8</option>
<option value="Mac Mavericks 10.9">Mac Mavericks 10.9</option>
<option value="Ubuntu 13.10">Ubuntu 13.10</option>
<option value="Ubuntu 14.04 LTS">Ubuntu 14.04 LTS</option>
</select>
<div class="spacer"></div>
<br>
<label>Request:
<span class="small">Enter request name.</span></label>
<input type="text" name="_fid_7" class="texta">
<div class="spacer"></div>
<label>Details:
<span class="small">Detail your request.</span></label>
<textarea type="text" name="_fid_8" rows="4" cols="100" class="texta"></textarea>
<div class="spacer"></div>
<label>File:
<span class="small">Browse for file.</span></label>
<input type="file" name="_fid_20" class="texta">
<div class="spacer"></div>
<h1>Customer Information</h1>
<label>Name:
<span class="small">Enter your name</span></label>
<input type="text" name="_fid_12" class="texta">
<div class="spacer"></div>
<label>Email:
<span class="small">Enter valid email address</span></label>
<input type="text" name="_fid_13" id="email" class="texta">
<input type="hidden" name="_fid_44" id="email2" value="">
<div class="spacer"></div>
<label>Phone:
<span class="small">Enter daytime phone</span></label>
<input type="text" name="_fid_14" class="texta">
<input onclick="submit" type="submit" value="Submit">
</form>
</div>
<p></p>
This works great but it doesn't do a few things I want
A) It doesn't ask the right questions.
C)I am thinking abut having a pic in the background to dress it up if we were showing by itself. If it was on mobile maybe hidden.
D) If than statement either in javascript in there that shows certain questions based on what customer says is what they are interested in.Please look at highlighted red this should be a multi select field. and the if should be based on this field.
<script>
$(function()
{
$("#email").change(
function(e){
$("#email2").val($(e.target).val());
}
);
}
);
</script>
<style type="text/css">
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}
input{margin-left:9px; padding:5;}
select{border:0; margin-left:9px; padding:5;}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- Add Request Form ----------- */
.addrequestform{
margin:0 auto;
width:900px;
padding:20px;
}
#stylized{
border:solid 2px #b7ddf2;
background:#EEEEEE;
}
#stylized h1 {
font-size:24px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:10px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-size:18px;
font-weight:bold;
text-align:right;
width:250px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:9px;
font-weight:normal;
text-align:right;
width:150px;
}
#stylized input.radio{
float:left;
font-size:9px;
padding:4px 2px;
}
#stylized .texta, textarea{
border:solid 1px #aacfe4;
width:250px;
float:left;
font-size:9px;
padding:4px 2px;
margin:2px 0 20px 10px;
}
</style>
<h1 style="text-align: center;">
<p style="text-align: center;">
</p>
</p>
<p style="text-align: center;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Customer Request Tracker</title>
</p><div id="stylized" class="addrequestform">
<form name="enForm" method="POST" action="bqbcvrerh?act=API_AddRecord&apptoken=dzs5cvbibe7ubcb6yk4gdfvixub" enctype="multipart/form-data">
<input type="hidden" name="rdr" value="bqbcvrekm?a=pagePreview&pageID=2&ifv=20">
<h1>CUSTOMER REQUEST FORM</h1>
<p>Please enter your request below. A copy will be emailed to the email address provided.</p>
<h2></h2><form name=qdbform method=POST onsubmit='return validateForm(this)' encType='multipart/form-data' action=bqbcvrerh?act=API_AddRecord&apptoken=cwfcy7gdzqrsyncqbi2bn4u4kr>
<input type=hidden name=fform value=1>
<table>
<label><font color=red size=+1>* </font>Name</label>
<label><input type=text size=40 name=_fid_12 ></label><br>
<br>
<label><font color=red size=+1>* </font>Email</label>
<label><input type=text size=40 name=_fid_13 ></label><br>
<br>
<label><font color=red size=+1>* </font>Phone</label>
<label><input type=text size=40 name=_fid_14 ></label><br>
<br>
<label>Other Number</label>
<label><input type=text size=40 name=_fid_75 ></label><br>
<br>
<label>Address</label>
<label><input type=text size=60 name=_fid_68 ></label><br>
<br>
<label>Street 1</label>
<label><input type=text size=60 name=_fid_69 ></label><br>
<br>
<label>Street 2</label>
<label><input type=text size=60 name=_fid_70 ></label><br>
<br>
<label>City</label>
<label><input type=text size=60 name=_fid_71 ></label><br>
<br>
<label>State/Region</label>
<label><select name=_fid_72 ><option></option>
<option>Connecticut</option>
<option>Massachusetts</option>
<option>New Jersey</option>
<option>New York</option>
<option>Pennsylvania</option>
</select></label><br>
<br>
<label>Postal Code</label>
<label><input type=text size=20 name=_fid_73 ></label><br>
<br>
<label>What services are you interested in</label>
<label><select onChange=CheckForOther(this,7) name=_fid_9 ><option></option>
<option>Roofing</option>
<option>Siding</option>
<option>Skylights</option>
<option>Decks</option>
<option>Gutters</option>
<option>Windows</option>
<option><Add New Choice...></option></select></label><br>
<br>
<label>How did you hear about us?</label>
<label><input type=text size=60 name=_fid_7 ></label<br>
<br>
<label>Best Time to Call</label>
<label><select name=_fid_62 ><option>8 am to Noon</option>
<option>Noon to 4 Pm</option>
<option>4 Pm to 8 Pm</option></select></label><br>
<br>
<label>Desired Completion Time?</label>
<label><select name=_fid_76 ><option>ASAP</option>
<option>In three Months</option>
<option>In 6 Months</option>
<option>In one year</option></select></label><br>
<br>
<label>How many stories is your building?</label>
<label><select name=_fid_78 ><option>1</option>
<option>2</option>
<option>more than 2</option></select></label><br>
<br>
<label>Is this request covered by insurance claim?</label>
<label><select name=_fid_79 ><option>Yes</option>
<option>No</option></select></label><br>
<br>
<label>Residental or Commercial Project?</label>
<label><select name=_fid_81 ><option>Yes</option>
<option>No</option></select></label><br>
<br>
<label>Which is more important to you</label>
<label><select name=_fid_82 ><option>Quality</option>
<option>Cheapest Price</option></select></label><br>
<br>
<label>Are you the owner or authorized person to make property changes?</label>
<label><select name=_fid_83 ><option>Yes</option>
<option>No</option></select></label><br>
<br>
<label>Description of Project?</label>
<label><textarea name=_fid_8 rows=3 cols=60></textarea></label><br>
<br>
<label>Please add any drawings or Photos of your project</label>
<label><input type=file size=40 name=_fid_20 ></label><br>
<br>
<label>Do you have an idea of what you would like to spend?</label>
<label><input type=text size=40 name=_fid_84 ></label>
<label>Roof, Are you aware of any leaks</label>
<label><select name=_fid_85 ><option>Yes</option>
<option>No</option>
</select></label><br>
<br>
<label>Roof, Nature of Project</label>
<label><select name=_fid_86 ><option>Roof Replacement</option>
<option>New Construction</option>
<option>Repair</option>
</select></label><br>
<br>
<label>Roof Type of Materials</label>
<label><select name=_fid_87 ><option>Asphalt</option>
<option>Wood Shake/Composite</option>
<option>Tile</option>
<option>Natural Slate</option>
<option>Metal</option>
<option>Flat, Foam, Single Ply</option>
</select></label><br>
<br>
<label>Roof Special Features?</label>
<label><select name=_fid_88 ><option>Ridge Vent</option>
<option>Snow Guards or Brackets</option>
<option>Turbine Vents</option>
<option>Skylights/Solar Tubes</option>
<option>Heat Tape</option>
<option>Water Diverters</option>
</select></label><br>
<br>
<label>Siding Type of Material</label>
<label><select onChange=CheckForOther(this,6) name=_fid_90 ><option>Vinyl</option>
<option>Fiber Cement</option>
<option>Wood</option>
<option>Metal</option>
<option>Custom</option>
<option><Add New Choice...></option></select></label><br>
<br>
<label>Siding Brand Name</label>
<label><select name=_fid_91 ><option>Certainteed</option>
<option>Royal</option>
<option>Hardie</option>
<option>Prodigy</option>
</select></td></label><br>
<br>
<label>Siding Style</label>
<label><select name=_fid_92 ><option>Horizontal</option>
<option>Vertical</option>
<option>Board and Batten</option>
<option>Beaded</option>
<option>Shakes</option>
<option>Scallops</option>
<option>Custom please describe in description</option>
</select></label><br>
<br>
<label>Siding - Color?</label>
<label><input type=text size=40 name=_fid_93 ></label><br>
<br>
<label>Siding Manufacture Virtual Remodeler Site</label>
<label><select name=_fid_94 ><option>Yes</option>
<option>No</option></select></label><br>
<br>
<label>Exterior Insulation important to you</label>
<label><input type=text size=40 name=_fid_95 ></label>
<label>Gutter Project Type</label>
<label><select name=_fid_96 ><option>Replacement</option>
<option>New</option>
<option>Repair</option></select></label><br>
<br>
<label>Gutter Style</label>
<label><select name=_fid_97 ><option>K style 5"</option>
<option>K style 6"</option>
<option>Half Round</option>
<option>Custom</option></select></label><br>
<br>
<label>Gutter type of Material</label>
<label><select name=_fid_98 ><option>Aluminum White</option>
<option>Aluminum Brown</option>
<option>Aluminum Colors</option>
<option>Copper</option></select></label><br>
<br>
<label>Gutter Downspout Style</label>
<label><select name=_fid_99 ><option>2x3</option>
<option>3x4</option>
<option>Corrugated Round</option>
<option>Rain chains</option></select></label><br>
<br>
<label>Gutter Fastener Spacing</label>
<label><select name=_fid_100 ><option>16" Hidden</option>
<option>24" Hidden</option>
<option>32" Hidden</option></select></label><br>
<br>
<label>Decking Materials?</label>
<label><select name=_fid_101 ><option>Pressure Treated Decking</option>
<option>Composite Decking</option>
<option>Hardwood Decking</option>
<option>Softwood Decking</option></select></label><br>
<br>
<label>Have you used Decking Manufactures Virtual Remodeler Site</label>
<label><select name=_fid_102 ><option>Yes</option>
<option>No</option></select></label><br>
<br>
<label>Skylight Project Type</label>
<label><select name=_fid_103 ><option>Replacement</option>
<option>New Construction</option>
<option>Replacement Suntunnel</option></select></label><br>
<br>
<label>Skylight Type of Unit</label>
<label><select name=_fid_104 ><option>Fixed</option>
<option>Opening Manual</option>
<option>Opening Solar</option></select></label><br>
<br>
<label>Skylight Roof Material</label>
<label><select name=_fid_105 ><option>Asphalt</option>
<option>Metal</option>
<option>Slate</option>
<option>Cedar</option></select></label><br>
<br>
<label>Skylight Interior Finish</label>
<label><select name=_fid_106 ><option>Sheetrock</option>
<option>Wood</option></select></label><br>
<br>
<label>Skylight Interest in Blinds</label>
<label><select name=_fid_107 ><option>Yes</option>
<option>No</option></select></label><br>
<br>
<label>Window Project Type</label>
<label><select name=_fid_108 ><option>Replacement</option>
<option>New Construction</option>
</select></label><br>
<br>
<label>Window Colors?</label>
<label><select name=_fid_109 ><option>White</option>
<option>Brown</option>
<option>Colors</option></select></label><br>
<br>
<label>Window Frame Construction</label>
<label><select name=_fid_110 ><option>Wood Interior/ Aluminum Exterior</option>
<option>Aluminum Interior/ Aluminum Exterior</option>
<option>Vinyl Interior/ Vinyl Exterior</option>
</select></label><br>
<br>
<label>Window Manufactures?</label>
<select name="_fid_111" >
<option value="Marvin">Marvin</option>
<option>Marvin</option>
<option>Anderson</option>
<option>Pella</option>
<option>Simonton</option>
<option>Trimline</option>
<option>Norandex</option>
<option>Estate</option></select></label><br>
<br>
<label>Window types</label>
<label><select name=_fid_112 ><option>Double Hung</option>
<option>Single hung</option>
<option>Bay</option>
<option>Bow</option></select>
<div class="spacer"></div>
<br>
<font color=red>* required fields</font>
<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)
{
if(theForm._fid_12.value == "")
{
alert('Please enter a value for the "Name" field.');
theForm._fid_12.focus();
return (false);
}
if(theForm._fid_13.value == "")
{
alert('Please enter a value for the "Email" field.');
theForm._fid_13.focus();
return (false);
}
if(theForm._fid_14.value == "")
{
alert('Please enter a value for the "Phone" field.');
theForm._fid_14.focus();
return (false);
}
}
if (condition) {
}
<label>Request:
<span class="small">Enter request name.</span></label>
<input type="text" name="_fid_7" class="texta">
<div class="spacer"></div>
<label>Details:
<span class="small">Detail your request.</span></label>
<textarea type="text" name="_fid_8" rows="4" cols="100" class="texta"></textarea>
<div class="spacer"></div>
<label>File:
<span class="small">Browse for file.</span></label>
<input type="file" name="_fid_20" class="texta">
<div class="spacer"></div>
<h1>Customer Information</h1>
<label>Name:
<span class="small">Enter your name</span></label>
<input type="text" name="_fid_12" class="texta">
<div class="spacer"></div>
<label>Email:
<span class="small">Enter valid email address</span></label>
<input type="text" name="_fid_13" id="email" class="texta">
<input type="hidden" name="_fid_44" id="email2" value="">
<div class="spacer"></div>
<label>Phone:
<span class="small">Enter daytime phone</span></label>
<input type="text" name="_fid_14" class="texta">
<input onclick="submit" type="submit" value="Submit">
</form>
</div>
<p></p>
------------------------------
Joshua Smith
------------------------------
