Google Form Customization & Validation

In this tutorial, I'll be showing how to Customize a Google Form, and validate it using javascript. The scripting also includes a custom thankyou page for redirection on success.


1_form


2_view_live_form

3_view_page_source

 

4_copy_source

 


    <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='';">
	

 onfocus="if (this.value=='Your Email or Phone No.') this.value='';" 


	<form action=" https://docs.google.com/forms/d/U$3y0uR0WNg00GL3f0RmC0D3/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">    

 <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/U$3y0uR0WNg00GL3f0RmC0D3/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;">


<form name="myForm" action="https://docs.google.com/forms/d/U$3y0uR0WNg00GL3f0RmC0D3/formResponse" method="POST" target="hidden_iframe" onsubmit="return validateForm()"> 

	<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> 
	

var x=document.forms["myForm"]["entry.1178504574"].value;


<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>
	

 <div id="dialog" title="Error!"> <p>Name and Contact Info must be entered.</p> </div> 

 if (x==null || x=="" || x=="Enter Full Name" || y==null || y=="" || y=="Your Email or Phone No.") { $(function() { $( "#dialog" ).dialog( "open" ); }); return false; } 



SOURCE CODE
<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>