Discussions

Expand all | Collapse all

Contact Form Recommendation

  • 1.  Contact Form Recommendation

    Posted 02-12-2020 20:04
    I want to add a contact form table where potential customers could enter in their information and answer questions via a drop down menu. I could then send a hyperlink by email to these potential customers so they could enter in basic info.

    a) trying to see if anyone has done this before, remember this would be for non users of QB.
    b) If it can be donewould u recommend I build a separate app so that these people would only see questionnaire and not potential of opening up my app to anyone else online.
    c) I want the info in the questionnaire to link to their profile we already have for them in quickbase so that we can better provide them with the right products and estimate.

    Any help would def be appreciated.

    ------------------------------
    Joshua Smith
    ------------------------------


  • 2.  RE: Contact Form Recommendation

    Posted 02-13-2020 10:27
    Yes, you can open an app up to everyone on the internet. (EOTI)  Sometimes for new Realms, the ability to open up to everyone on the internet is blocked so if you cannot do it by searching for the user called

    everyone on the internet

    then you will need to put in a support ticket.

    I do suggest a separate app to help safeguard again accidentally messing up a permission setting later on and exposing your main app to  EOTI.  Then I would do a cross app relationship initiated on the child side which would be the EOTI app to make those records children of your contacts (Profiles) in your main app.

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 3.  RE: Contact Form Recommendation

    Posted 02-13-2020 10:28
    .. also you need to set the form for view to be just a blank a thank you form with no actual fields showing, so that other EOTI users cannot see other forms.

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 4.  RE: Contact Form Recommendation

    Posted 02-14-2020 11:56
    Mark,


    Thank you I may have some more questions as i get this up and running so if I do I will give you a quick shout.

    Thank you
    Joshua Smith

    ------------------------------
    Joshua Smith
    ------------------------------



  • 5.  RE: Contact Form Recommendation

    Posted 02-14-2020 12:05
    np, setting up an EOTI app has some best practises.  They are probably documented somewhere, but I'm not sure where.

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 6.  RE: Contact Form Recommendation

    Posted 02-14-2020 13:14
    The ABC Customer Request Tracker on the Quick Base app Exchange is a good example:

    ABC Customer Request Tracker

    ------------------------------
    Adam Keever
    ------------------------------



  • 7.  RE: Contact Form Recommendation

    Posted 02-19-2020 10:57
    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&amp;dfid=11" target="" title="">Example of Native QuickBase form with standard QuickBase header</a><br>
    <a href="bqbj2a8cg?a=nwr&amp;dfid=11&amp;ifv=20" target="" title="">Example of Native QuickBase form without QuickBase header</a><br>
    <a href="bqbj2a8b2?a=dbpage&amp;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&amp;apptoken=dzs5cvbibe7ubcb6yk4gdfvixub" enctype="multipart/form-data">
    <input type="hidden" name="rdr" value="bqbj2a8b2?a=pagePreview&amp;pageID=2&amp;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:&nbsp;&nbsp;
    <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&amp;apptoken=dzs5cvbibe7ubcb6yk4gdfvixub" enctype="multipart/form-data">
    <input type="hidden" name="rdr" value="bqbcvrekm?a=pagePreview&amp;pageID=2&amp;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>&lt;Add New Choice...&gt;</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>&lt;Add New Choice...&gt;</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>
    </table><input type=hidden name=rdr value='http://www.unitedexteriors.net'>
    <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) {
      //  block of code to be executed if the condition is true
    }
    <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
    ------------------------------



  • 8.  RE: Contact Form Recommendation

    Posted 02-19-2020 11:05
    I have no idea what you are attempting here and I would not do this with code.  i would simply put up a native Quick Base form and suffix the URL with "&ifv=1".  That will suppress all the Quick Base stuff aside from the pure form.  Then I would put a save button on the form.

    Here, for example is a link to a native Quick Base Form.
    https://gesco.quickbase.com/db/bnyzm2r3v?a=API_GenAddRecordForm&_fid_8=3&dfid=10&ifv=1

    If you are starting from scratch here and want some one one one coaching, contact me off line or else I will try to help you via this forum more slowly.


    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------