Step by Step Instructions (For The Non-Techy): How To Add a Form To Your Website

Last week I shared a free tool you can use to add an intake form or application to your website. This week’s email is more technical than my typical email, but don’t get scared off.

Below are step-by-step instructions, that a non-techy can follow, on how to add a form to your website.

Let’s get to it!

Step 1: To get started, go to google.com and sign in. If you don’t have an account, you can create a free one.

Step 2: You will want to create a new spreadsheet and create a form. Look at the screen shots below to see how to add a title, description and questions to your form. If you want to edit, delete or add questions, you can do that as well. Be sure to save your work!

Step 3: Next, you will want to set up notification rules. Notification rules define how you want to receive the form- each time a user submits a form or in a daily digest. For a form, you’ll want to pick “Each Time a User Submits a Form.”

Step 4: Now that you have your form ready and have set-up notification rules, we need to add a piece of coding so that your form gets sent to your email address. To set this up, click on Tools, Script editor and follow the instructions in the red boxes below.

The following code can be copied and pasted into the code editor as follows.

function sendFormByEmail(e) {
// Remember to replace XYZ with your own email address
var email = "XYZ";
// Optional but change the following variable
// to have a custom subject for Google Docs emails
var subject = "Google Docs Form Submitted";
// The variable e holds all the form values in an array.
// Loop through the array and append values to the body.
var message = "";
for(var field in e.namedValues) {
message += field + ' :: ' + e.namedValues.toString() + "nn";
}
// This is the MailApp service of Google Apps Script
// that sends the email. You can also use GmailApp here. MailApp.sendEmail(email, subject, message);
// Watch the following video for details
// http://youtu.be/z6klwUxRwQI
// By Amit Agarwal - www.labnol.org}

Step 5: Be sure to add your own email address in the field below!

Step 6: Now that you know the responses from a submitted form are going to your email address, you are going to put them together with a Trigger. Adding a new trigger allows the form to be sent to you once it is submitted. As seen below, you can add a Project name, add the trigger, and authorize.

Step 7: Google will want to ask for access to use the script associated with your email address. First, it will ask you to Authorize and then it will ask you to Grant Access. And you want to say YES.

Step 8: You’re almost done! Now, return to the spreadsheet that you created in the beginning. You’re going to want the code to embed this form on to your website. It’s easy. Simply click on Form and Embed Form in a Webpage.

Step 9: Hi-light the code, click on copy and presto- insert the code onto the back end of your webpage, where you want the form to go.

Be sure to test it for yourself to make sure you receive the answers in your in-box.

Congratulations! You have just learned how to add a form to your website!

Now you can use forms for a strategy session, health history, or as a questionnaire. Try it out and let me know how it works for you.

Warmly,
Amy