Create Google Forms Popups directly on your Shopify Store!

FormPopper & Google Forms

There are 3 steps to creating your Google forms popup in FormPopper:

  1. Initial Setup: Create your google form, install FormPopper
  2. Copy your google form link
  3. Create your widget
    1. Option 1 - Use an Autowidget
    2. Option 2 - Create a Sitewide Widget
    3. Option 3 - Manually embed a Widget

1. Initial setup

  1. Create your Google Form: Head over to google forms, signup if you haven't already and create a form! (See getting started with google forms if you need help getting started).
  2. Install FormPopper and start your 2 week free trial: Visit the FormPopper App Store page, click add App, then follow the prompts to install & start free trial.

2. Copy your google form link

  1. Open Google Form Editor: Open your Google Forms Dashboard and click on the form you would like to add.
  2. Make sure your Google Form is public: Click "Settings" (at the top of your form), and in the sub-menu "Responses", ensure that 
    1. "Collect email address" is set to DO NOT COLLECT (you can still ask for email address in the form)
    2. All fields under "Requires Sign-in" are in OFF position
  3. Click the "Send" button (top right hand corner).
  4. Check that your Google Form is embed enabled:
    1. Click "< >" icon next to "send via" options and ensure that it offers an "<iframe src=....." code. If so, your Google Form is embed enabled.
    2. If you receive a message "This form cannot be embedded because...", you will need to adjust the requirement in your Google Form before proceeding.
  5. Select  link icon option next to "send via".
  6. Ensure "shorten url" is UNTICKED
  7. Finally, copy the link

3 - Create your Popup Widget

Option 1 - Use the FormPopper's Autowidget feature

If you add a normal Google Form link manually to your Shopify website*, and have FormPopper installed, it will automatically turn it into a popup link. For example, if you were to:

  1. Perform steps 1 and 2 above: install FormPopper, create a Google Form and copy it's link
  2. Create a normal Google Forms link on your Shopify store: For example, using the link you just copied in step 2 above, you could create a link in your main menu using Shopify's instructions here.

Now when a visitor goes to your page, waits for it to finish loading, and clicks the link - A popup will appear!

*Most locations supported, however checkout pages are NOT supported

Option 2 - Create a Sitewide Widget in FormPopper

  1. Perform steps 1 and 2 above: Install FormPopper, create a Google Form and copy it's link.
  2. Open the FormPopper Dashboard: From your Shopify Dashboard, click "Apps" in the main menu, find FormPopper, and click on it.
  3. Create a new Widget: On the FormPopper homepage, find the "Add new widget" section. Paste in your Google Form's link code and click add widget. After a moment, the new widget should appear below.
  4. Enable the Widget Sitewide: Click on the widget you just created to be taken to the widget details page. Click "Enable Sitewide" and the sitewide button will be created!
  5. Adjust Sitewide Widget Settings (Optional): Click "edit sitewide settings" to be taken to the settings page. Adjust to your preferred text, colour and button location and click update settings.

Option 3 - Create an Embedded Link / Button

Please Note: To create an advanced link, you need to be able to paste the full widget code - for most users this will be possible in pages, product descriptions and blog posts. Experienced developers may also feel comfortable pasting directly into the theme code.

If you want advanced features, like hiding the link until the popup is ready, or using a button style instead of a link, then an advanced link is the way to go:

  1. Perform steps 1 and 2 above: Install FormPopper, create a Google Form and copy it's link.
  2. Open the FormPopper Dashboard: From your Shopify Dashboard, click "Apps" in the main menu, find FormPopper, and click on it.
  3. Create a new Widget: On the FormPopper homepage, find the "Add new widget" section. Paste in your Google Form link code and click add widget. After a moment, the new widget should appear below.
  4. Copy the Widget code: Click on the widget you just created to be taken to the widget details page. Find "Manually embedded widget" (at the bottom of the page) and click on it. Choose your preferred style, text, and copy the widget embed code.
  5. Paste the Widget code at the location of your choice: For example, To paste in a page or blog post:
    1. Open your page / blog post
    2. Switch text editor to "HTML view": This is done by clicking the "<>" icon.
    3. Paste your popup link in your preferred location.
    4. Save your changes to the page.