DEV Community: Utkarsh Dhiman

Custom Frontend for Google Form

Utkarsh Dhiman — Sat, 30 Jan 2021 12:28:15 +0000

Google form is one of the easiest ways to collect data. The collected data is preorganized and can be analyzed using various tools and add-ons.

Prequisite

You should be familiar with HTML forms at least. Having knowledge of JavaScript and fetch API will be great.

Need of custom front-end

There may be cases when you need a consistent design for your website. Although you can always create your form with a server and database but embedding Google form in your website can be much easier and economical.

Implementation

The very first requirement is to turn off the 'Require sign-in' sub-options in form settings.

Open your Google Form using the sharable link to extract the necessary information, it can be tricky at times.

Open Browser DevTools (F12 or Ctrl+Shift+i for chrome)
Extracting Form Action URL
search for <form

get the action attribute of form. It looks like https://docs.google.com/forms/u/0/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse
Extracting name attribute(s)
Search for <input in DevTools, you may find many input fields look for the one that looks like this. entry.294341084

Input fields for inputs like radio button etc. are not present initially you have to select any option which will create a corresponding hidden input element otherwise, simply remove the \_sentinel form entry.100000084\_sentinel without checking radio button.

Custom front-end can be created in either of the following ways.

Only HTML forms: Easy way
Fetch API + HTML forms: Better way

Only HTML form

Create an HTML form, set its action attribute to previously extracted action URL and method attribute should be POST.
Set name attributes to corresponding input(s).

<form method="post" id="form" action="https://docs.google.com/forms/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse">
    <label for="inp1">Write something</label>
    <input type="text" name="entry.294341084" id="inp1">
    <input type="submit" value="Submit">
</form>

That's it add CSS to make it beautiful.

With this approach, on submission, you will be redirected to the Google Forms acknowledgment page. -_- not so cool. You can avoid this by using fetch API.

Fetch API + HTML form

Create a Form, can be same as above. Prevent default behaviour of form so as to use fetch API using javascript. You have to set Method to post, the header should be "Content-Type": "application/json". You may or may not set mode to no-cors it will throw an error on cors mode but will work anyway.

let url = "https://docs.google.com/forms/d/e/1FAIpQLSfAnJAbfTl23gNM6gAbU1gAXo03N9I6pf5LJbo3Ptmex5nqUg/formResponse"; //action url
let form = document.querySelector("#form"); //form element

form.addEventListener("submit", (e)=>{
    e.preventDefault();//prevent default behaviour

    fetch(url,{
        method: "POST",
        mode: "no-cors",
        header:{
            'Content-Type': 'application/json'
            },
        body: getInputData()
    })
    .then(data=>{
        console.log(data);
        alert("Form Submitted");
    })
    .catch(err=>console.error(err)); //promise based
});

//populating input data
function getInputData(){
    let dataToPost = new FormData(); //formdata API

    //fill name attributes to corresponding values
    dataToPost.append("entry.294341084", document.querySelector("#inp1").value);

    return dataToPost;
}

The response from fetch post request is not satisfactory, but it doesn't matter since it works. ;P

The advantage of using this approach over HTML forms is you have full control, the user won't be redirected to Google Form's acknowledgement page.

Checkout a working example here.

Considerations

Custom Front End for the google forms can only be used to collect data.
It will work only if ‘Require Sign-In’ is turned off in Google form settings.
For Radio buttons, checkboxes etc. only exact values will be accepted, even a small spelling mistake will discard the answer for that particular question.
Tricky and Time-Consuming
Partial Response by the user if not handled properly, so frontend design should also validate user responses.
Sections in google form can be submitted by a single post request.
Images can also be posted using this approach.

It may be a time-consuming task to create a custom frontend for a google form, but results can be worth the effort.

Regular Expressions - not so regular!

Utkarsh Dhiman — Sun, 17 May 2020 15:13:16 +0000

Modifiers (or flags)
Brackets
Meta Characters
Quantifiers
Miscellaneous
Real World applications
Summary

Introduction

Regular Expressions aka RegEx. or RegExp. are powerful tools widely used for pattern matching within strings. They are supported by almost all programming languages. However choice of language plays a key role in deciding the usage and syntax of the same. Here, I'll be using JavaScript. A Website regex101 will let you use regular expressions even without the knowledge of programming language.

What does it look like?

This code will make sense as you proceed further.

How to use regular expressions

It depends majorly upon the language. In JavaScript there are various functions for the same eg: match(), test() and search() are widely used. In MySQL keyword LIKE, REGEXP or operator ~ (aka post-fix operator) are used for searching.

Kneel before the god ;P by memegenerator

Regular Expressions usually have

Quantifiers, Operators, Modifiers (or Flags).

Modifiers

Modifier	Description
'g'	for global search i.e. It won't stop searching after first match and will return all the matches.
'i'	for case in-sensitive search
'm'	for multi-line search (the regexp should be surrounded by ^ and $)

Brackets

Brackets	Description
[abc]	look for any one character between the square brackets(like an OR operator in programming languages)
[a-z]	includes all lower-case alphabets
[A-Z]	includes all upper-case alphabets
[A-z]	includes both upper-case and lower-case alphabets
[0-9]	includes all numerals
[^abc]	Will look for everything other than a,b,c (^ represents inverse here only in square-brackets otherwise it represent anchor operator)
(p\|q)	It is known as grouping operator, it divides the expression within sub-groups. It also saves the index of subgroup starting from 1-9 (which is used by back-reference operator)

Meta characters

Meta-character	Description
.	Finds a single character, except newline or line terminator
\w	Finds a word character it include [A-Za-z0-9_]
\W	Finds a non-word character
\d	Finds a digit
\D	Finds a non-digit character
\s	Finds a white-space character
\S	Finds a character that is not white-space
\b	Finds a match only at the beginning or end of a word, beginning like this: \bHI, end like this: HI\b
\B	Finds a match, where \b doesn't
\n	Finds a line feed character
\f	Finds a form feed character
\r	Finds a carriage return character
\t	Finds a tab character

Quantifiers

Quantifiers	Description (n here is anything you want to match)
n{2}	match only 2 instances of n
n{1,5}	match at least 1 at most 5 instances of n
n{1,}	match at least 1 instance of n
n+	Shorthand to match 1 or more instances of n
n*	Shorthand to match 0 or more instances of n
n?	Shorthand to match 0 or 1 instances of n

Miscellaneous

Meme on escape-sequence by xkcd

'|' operator can be used to separate sub groups.
'\1' operator(aka back-reference operator) is used to refer to previous subgroup of that index 1 in this case.
There is no concatenation operator as such. Things written together are already concatenated.
Some symbols that are used in expressions can't be used directly. '\' (backslash) is used to escape-sequence.
Multiple bracket sets can be used like [a-z] and [0-9] can be combined in following way [a-z0-9] without '|' and space.
^ and $ are used at beginning and end respectively however when ^ is used as [^\w]+ it is used to invert the selection. In this case no word will be selected i.e. only symbols and white spaces will be selected.

Let's see some interesting examples

To validate an email, username and password

Values are screened by RegExp. for security purpose. By Quickmeme

Real-world application of RegEx.

Forms: Usernames, Email addresses, passwords etc. are validated through RegEx. expressions. as seen above.
Search: RegEx. are used to search for files and within files. Sometimes replacement is followed by search.
Replace: With new updates in languages newer syntax come into play and sometimes older syntax are depreciated. Therefore changing each line of code would be a miserable. To ease the process there are programs that can convert syntax without damaging the functioning of original code.
Data Extraction: RegEx. are used in SQL (a language that makes queries to database) to look for records matching some criteria.

Saved the day. Source Xkcd

Summary

With Regular expression in your tool box, you can manipulate strings like pro!
Otherwise your life would be much more difficult than it need to be. Learn more at W3school
or here