How to Customize & Validate Google Docs Form (an easier way?)

javascript html forms google-forms

14,017

Here's the answer, source code to my question. Details and info on the code is given at my blog post on my website blog post: Google Form Customization & Validation Tutorial

Here's the link to the : Form Demo Page

<title>Demo Google Form</title>

    <style>
    body{}
    #pagewrap {}
        .tableradio {}
        .sbutton {}
        .sbutton:hover {}
        .sbutton:active {}
        a{}
        a:hover{}    
    </style>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

        <script>
        $(function() {
            $( "#dialog" ).dialog({
            autoOpen: false,
            show: {
        effect: "blind",
        duration: 1000
            },
            hide: {
        effect: "blind",
        duration: 1000
        }
        });
            });
        </script>

        <script>
        function validateForm()    
        {
        var x=document.forms["myForm"]["entry.1178504574"].value;
        var y=document.forms["myForm"]["entry.1736977247"].value;
        if (x==null || x=="" || x=="Enter Full Name" || y==null || y=="" || y=="Your Email or Phone No.")
        {
             $(function() {
             $( "#dialog" ).dialog( "open" );
            });

            return false;
        }
        else {
        submitted=true;
        }
            }
        </script>

</head>
<body>

<div id="pagewrap">

    <h4>Demo form for the <br>Google Form Customization &amp; Validation</h4>
    <script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='a_thankyou.htm';}"></iframe>
<form name="myForm" action="https://docs.google.com/forms/d/Us3y0uR0WNg00GL3f0RmC0D3/formResponse" method="POST" target="hidden_iframe" onsubmit="return validateForm()">
<ol style="padding-left: 0">

<div dir="ltr"><label for="entry_1178504574">Name
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span> </span></div>
<input type="text" name="entry.1178504574" value="Enter Full Name" id="entry_1178504574" dir="auto" aria-required="true" onfocus="if (this.value=='Enter Full Name') this.value='';">

<div dir="ltr" ><label for="entry_1736977247">Contact Info
</div>
<input type="text" name="entry.1736977247" value="Your Email or Phone No." id="entry_1736977247" dir="auto" onfocus="if (this.value=='Your Email or Phone No.') this.value='';">

<div dir="ltr"><label for="entry_1735394145">Comments
</div>
<textarea name="entry.1735394145" rows="8" cols="0" id="entry_1735394145" dir="auto"></textarea>

<div align="left">
<div dir="ltr"><label for="entry_69751737"><br>Was this tutorial helpful?
</div><br>
<div dir="ltr"></label>

  <table class="tableradio" border=0>
<tr>
<td>
    <input id="group_966319296_1" name="entry.966319296" type="radio" value="Yes" aria-label="Yes">
    <label><br>Yes</label>
</td>
<td>
    <input type="radio" name="entry.966319296" value="No" id="group_966319296_2" aria-label="No">
    <label><br>No</label>
</td>
</tr>

</table>

<p>        <input type="hidden" name="draftResponse" value="[]">
<input type="hidden" name="pageHistory" value="0">

<div dir="ltr">
<input type="submit" name="submit" value="Confirm" class="sbutton">
</div></ol></form>
</p>
<p><br>

<a href="#" onClick='window.location="view-source:" + window.location.href'>View Source</a>

</p>

</div>

</div>
</div>

<div id="dialog" title="Error!">
  <p>Name and Contact Info must be entered.<br>Just type anything. It's just a demo for the tutorial anyways!</p>
</div>

</div>

14,017

Author by

mk117

Updated on July 26, 2022

Comments

mk117 almost 2 years
I've been searching for a way to customize and validate a Google Form, and finally my demo page is online and perfectly working!

I've also created a step-by-step tutorial on how to customize and validate. But all this process took lot of time searching for solutions and snippets of code on google / stackoverflow.

So my question: Is there an easier way or a better coded way to do this? Can the code in my answer be applied to better form templates?

I've read this ::post:: on stackoverflow, before answering my questions. So I guess it's allowed...
- My form demo page: ::link::
- Tutorial page : ::link::
-