Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
titleTable of Contents

Table of Contents

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.

...

Image Added

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

...

share dialog windowImage Added

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.

Share link dialogImage RemovedShare link dialogImage Added

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
    add macro drop downImage Removedadd macro drop downImage Added
  2. in the Search Type Frevvo and Choose Insert Frevvo Form
    Insert Frevvo form macroImage RemovedInsert Frevvo form macroImage Added
  3. In frevvo find the Embedded Form Link and paste it in the Frevvo Form Macro Dialog
    Frevvo Form Macro DialogImage RemovedFrevvo Form Macro DialogImage Added
  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
    Form with edit button highlighedImage RemovedForm with edit button highlighedImage Added
  2. Click the properties tab from the left navigation and then the style tab
    form properties and style section selectedImage Removedform properties and style section selectedImage Added
  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

      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>
    2. The src="..." section is the url, within contains the form URL. Within the URL you will see a section text after the word "embed?" the This text after is the query string.

    3. Find the resize=true section of the url query string and change it to resize=false
    4. Append at the end of the url and additonal query string an additional & and then the following. Each query string parameter requires separation by using an ampersand (&).

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

      2. 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>
      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

...

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

data parameter prefilling fieldsImage Modified