| Panel | ||
|---|---|---|
| ||
|
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
...
| Excerpt |
|---|
To share a form, navigate to the form of choice and click |
...
the Share |
...
button.
A dialog window will appear that has server options.
|
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.
- While editing a page click the Plus button from the toolbar and then choose other macros
- in the Search Type Frevvo and Choose Insert Frevvo Form
- In frevvo find the Embedded Form Link and paste it in the Frevvo Form Macro Dialog
- 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.
- Click Edit on the form of choice
- Click the properties tab from the left navigation and then the style tab
- Set the width from the preset sizes or use a custom size
Use URL parameters to set the height and width of the iframe
- 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.
Using the Embedded Form option in the share dialog a script block like the following will appear
Code Block <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>
The src="..." section contains the form URL. Within the URL you will see a text after "embed?" This text is the query string.
- Find the resize=true section of the query string and change it to resize=false
Append at the end of the query string an additional & and then the following. Each query string parameter requires separation by using an ampersand (&).
&width=400px&height=1000px
Code Block <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>
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
...