Tutorial - Adding Google Form Questionnaire to receipt page

Owned by Hunter Schaeffer
Last updated: Jan 28, 2020
3 min read

About

Questionnaires and surveys are valuable tools for gathering information from your customers.

This tutorial details the steps to add a short questionnaire or survey into your receipt page of your storefront using Google Forms. (*Google Forms requires a google account to create the forms.)

To learn more about using Google Forms, checkout this Google Forms Video Tutorial.

Steps to Adding the Form to your Receipt page

Now that you have your Google Form, let’s add it to the form to your storefront.

To add it to the receipt page, we will first create a snippet template called “receipt-survey.vm” in the snippets folder in your storefront file manager.

NAVIGATE:
Main Menu → Storefronts → (Choose Storefront Host) → (Storefront Menu) File Manager

In the file manager, use the “Quick Search” to search for ‘snippets’ (without the quotes) and the search results will appear without you needing to hit ‘enter'. You’ll see the current theme snippet directories highlighted in green”, like this:

You’ll see two separate highlighted ‘snippets’ folders for your active theme, we will create our new snippet template for our survey in the ‘snippets’ folder in the “Theme”rather than the ‘Core’.

Click ‘snippets’ to open the snippets folder into the file manager.

We will create our snippet template here, by clicking the ‘new file’ button in the file manager menu:

Next, we will retrieve the embed code for the Google Form we created.

Navigate to your Google Forms dashboard.

 

  1. Select the form you created.

  2. Click the ‘Send’ button

     

  3. In the pop-up window click the embed button then click the ‘copy’ button

     

  4. Then paste it into the ‘receipt_survey.vm’ file.

Save the file after inserting the form.

 

Now that we have a survey template, we need to parse it into our receipt page template.

Parsing survey into the receipt page

Now we are ready to parse our survey into the receipt.vm template.

From the storefronts file manager, type ‘receipt.vm' into the quick search field then click on the highlighted 'receipt.vm’ (in the Names column):

Now we will parse our survey template into the receipt page template, using a parse statement:

## Adding Google Form to Receipt #parse('/system/checkout/receipt_survey.vm') ## End Google Form to Receipt

Make sure to add comments to easily identify this customization, in order to make the theme upgrades as seamless as possible.

Adding conditional logic to display the survey based on an item or items in the checkout

You may wish to have the survey displayed in the receipt only when certain items are purchased.

We can do this by wrapping the parse statement in the receipt.vm with a IF statement.

That code snippet looks like this:

## Adding Google Form to Receipt #if($order.ifPurchased("ITEM_ID")) #parse('/system/checkout/receipt_survey.vm') #end ## End Google Form to Receipt

With the conditional if statement, we're checking the Order object for a particular item has been purchased.

Make sure to replace ITEM_ID with the actual itemID of your item (leave the double quotes).

If you have multiple items that should be a trigger for this conditional logic, separate each itemID with a comma!

 

 

 

Related Documentation

https://ultracart.atlassian.net/wiki/spaces/ucdoc/pages/1376355

https://ultracart.atlassian.net/wiki/spaces/ucdoc/pages/1377777