Embed a Frevvo Form

Overview

There are many ways to share forms, one of which is embedding them on an external website or in Answers. In the following document we will describe a few ways to embed a form and what options there are while doing so. 

Ways to share a form

To share a form, navigate to the form of choice and click the Share button.

A dialog window will appear that has server options.

1. Embedded Form - Embed a for with auto resizing
2. Embedded Form Link - Embedded link (without script block)
3. Link (Email/Web page) - Link to email or include on a webpage (loaded page will have the form centered)
4. Full Page/Popup - Full HTML of the form with included Script block that can be used to published as an individual html page on a web server
5. Just the iframe - Script to create an iframe to your size specifications (auto resize is disabled)
6. Raw form link - allows users to append URL Parameters without any default parameters

Create a link to the form

If you wish to send the form via email or an other communication. It is best to use the Link (Email/Web page) option in the share dialog. This will redirect the user to the frevvo forms server with the styles you have committed in that form.

Embed using JavaScript

If you wish to embed the form in a web page it is best to use the Embedded From option in the share dialog. This will require embedding a script block on a web page, which will render the form in an iframe when the page loads.

The default width of the iframe can be set under the properties of the form in frevvo. See Set width of iframe.

Embed in Answers

To embed a form in Answers we have create a convenient macro to assist. 

1. While editing a page click the Plus button from the toolbar and then choose other macros
   
2. in the Search Type Frevvo and Choose Insert Frevvo Form
   
3. In frevvo find the Embedded Form Link and paste it in the Frevvo Form Macro Dialog
   
4. Click Insert and preview or publish the page

Set width of iframe

To set the width of the form in an iframe you can choose on of the two options.

Set the form width in the form properties in frevvo.

1. Click Edit on the form of choice
   
2. Click the properties tab from the left navigation and then the style tab
   
3. Set the width from the preset sizes or use a custom size

Use URL parameters to set the height and width of the iframe

1. append to the URL's query string the following to adjust the height and width. Note: resizing must be set to false, and the iframe will not auto resize and may now include scroll bars.

   1. Using the Embedded Form option in the share dialog a script block like the following will appear

      <script xmlns="http://www.w3.org/1999/xhtml" src="https://its-forms-dev.syr.edu:443/frevvo/web/tn/ITS/u/cf925084-40a0-4339-a69f-4ec7ed2009ee/app/_t5h9wAqREeifVISMFRu6NQ/formtype/_EsjWsAqfEeifVISMFRu6NQ/embed?id=w427aa&container=true&resize=true" type="text/javascript"></script>

   2. The src="..." section is the url, within the URL you will see a section after the word "embed?" the text after is the query string.

   3. Find the resize=true section of the url and change it to resize=false

   4. Append at the end of the url and additonal & and then the following

      1.  &width=400px&height=1000px

      2. <script xmlns="http://www.w3.org/1999/xhtml" src="https://its-forms-dev.syr.edu:443/frevvo/web/tn/ITS/u/cf925084-40a0-4339-a69f-4ec7ed2009ee/app/_t5h9wAqREeifVISMFRu6NQ/formtype/_EsjWsAqfEeifVISMFRu6NQ/embed?id=w427aa&container=true&resize=false&width=400px&height=1000px" type="text/javascript"></script>

      3. You may also need to add "&scrolling" to allow scrolling.

URL parameters

Frevvo curated URL Parameters Documentation

The parameters can be used to adjust many aspects of the form including style, iframe Id, preset data, language locale, cancel URL, unsaved warning, or even allow the user to continue a form from when they left off.

Data

Frevvo curated data URL parameter documentation

This is a URL parameter that allows the form to be pre-populated with information designated in json format.

The following data parameter is linked to each field name designated while designing and prefills the areas with the provided information.

Example:

?_data=(EMail2787:'joe@gmail.com',Name:'Joe',Desc:'Please send details',Q:'20')