Making a Form with Google Forms
You’ll need to make a form using Google Forms to get the required variable information, and to set up the Google Sheets spreadsheet where responses will be saved. Start by going to the Google Forms page and log in with your Google account.
Under the start a new form section, select blank to create a new form. Enter your form title and description at the top of the form, and name your form in the top left corner of the page. Normally, the title and description would be shown to the user on the form page that Google creates for you, but since we want to host the form with custom styling and no Google branding, they’ll just serve to identify your form when you’re managing it using Google Forms. You can set a title and description on your final form just like you would with any other custom form that you make.
Repeat this process to create any other fields that you want to use on your form. Once you’ve gotten all of your form fields created, switch from the questions pane to the responses pane and you can turn on email notifications and set a destination spreadsheet where responses will be saved in Google Sheets.
Now that you’ve created your form and set it up in Google Forms, we’ll proceed to collect the necessary information to create a self-hosted version of the form. Click the eye icon in the top right corner of the Google Forms page to open up a preview of the form you created. This is the Google hosted version of your form, complete with mandatory Google branding.
Getting the Required URL and Element Names
You will need the URL for your form and the name for each of the fields in your form. You can find these by viewing the source code of the preview page for your form. To find the form URL, search for “formResponse” without the quotes in the form preview source code and you’ll see a URL like, https://docs.google.com/forms/d/e/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/formResponse with the X characters being letters and numbers that are unique to the URL for your form. To find the field names, search for “entry_” without the quotes in the form preview source code and find all of the names, like “entry.1234567891”, for every form field that you made. There will be one unique name for each form field in your form. Once you have these details, you’re ready to plug them into whatever form design you want. We’ll walk through a basic example in the next section.
Setting Up Your Form
<form action="https://docs.google.com/forms/d/e/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/formResponse" method="POST"> First Name:<br> <input type="text" name="entry.1234567890" value="" required /> <br> Last Name:<br> <input type="text" name="entry.1234567891" value="" required /> <br> Email Address:<br> <input type="email" name="entry.1234567892" value="" required /> <br> Phone Number:<br> <input type="text" name="entry.1234567893" value="" required /> <br> Message:<br> <textarea name="entry.1234567894" required></textarea> <br><br> <input type="submit" value="Submit"> </form>