Skip to main content

Secondary navigation:

Google Forms in CQ

CQ Forms have been replaced by Google Forms

Google Forms are now being used instead of the CQ Form component in order to address security issues. Google forms have much better stability and functionality and are more resistant to spam attacks where tens of thousands of submissions are sent to a form.
For more information on this, please email websupport@bc.edu.

How to Create a Google Form and Embed it inside CQ:

  1. Decide what Google account should own the form. If you have a generic email account for your office it probably makes sense to use that rather than your personal BC google account. (That said it is possible to transfer ownership after the fact.)

  2. Log into BC Google Apps and go to Google Drive. Decide in Drive where you want to put the form and the data it will produce. Hint: you may want to make a new folder to hold all your Google Forms so that they stay together.

  3. Go to the Create Menu and choose Form. This gets you into the process which is well documented at:
    https://support.google.com/docs/answer/87809?hl=en

  4. Creating a form also creates automatically a spreadsheet where the results land as the form is submitted. Basically you create one item at a time and it is very fast and easy for the normal types of form elements.

  5. Once your form is built, you want to get the embed code from the Form menu on the spreadsheet.  This is the code you'll use to put the form into a CQ page of your choice. To get the embed code:
    1. With your form open, click on the File menu and chose “Embed”
    2. Copy the code and set the dimensions, use 500 pixels width for CQ.
      (see images below)

  6. On the page, add a BC HTML component to the page where you want the form to appear and paste the embed code into that component.

  7. You may have to change the height and width options in the code so that the form stays within the fixed width of the content area of your CQ page (500px) and so that the iframe height is tall enough to avoid adding a scroll bar. Preview the page by hitting the Preview icon on the Sidekick and then reload the page in Firefox ERS.  Activate the page

  8. Test the form. Check the results on the responses spreadsheet.

  9. Set up the notification feature on the responses spreadsheet. Log into the account that should receive the notifications (can be different from the account that created the form), open the spreadsheet go to the Tools menu and chose Notification Rules. Define from the options given how you want to be notified.  You can log into multiple different gmail accounts and repeat this if multiple people need to be notified. Each person needs to first have been given access to the responses spreadsheet using the Share options.

  10. Test again and make sure you are getting the emails notifying you of new responses.

screenshot of Google forms drop down menu
screenshot of Google embed code dialouge box


You may have to adjust the height number in the embed code so that your entire form appears without using the scroll bar.

For example, the number is red (for this example) may need to be adjusted:

/*<iframe src="https://docs.google.com/forms/d/1sikKfCcqsT5QCLbp58PrfXo7LCffZQCKWDdPKfAKcYI/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0"></iframe>*/