Sharing and embedding forms

When you're ready to start gathering submissions, there are a few ways you can share your form:

  • Embedding the entire form in a webpage: each form has its own embed code, which you can use to integrate the form into your library website or another webpage.
    • Got LibGuides? You can easily embed a form using the LibWizard content item -- no need to copy and paste code!
  • Embedding a button widget in a webpage: rather than embed the entire form inside of a page, you can embed a button widget that will launch the form inside of a modal window.
  • Visiting the form's URL: each form also has its own standalone URL, which you can use to view it directly in your browser. This is great for sharing a link to a form in an email -- especially if you have given your form a friendly URL.

There are two ways you can find your form's embed code and URL: from the workpad (when editing your form); and from the Forms page itself.


Viewing a form's sharing options

Via the workpad

  1. Edit your form.
  2. Click on the Share/URL button above the workpad.

The Share/URL button above the workpad 

Via the Forms page

  1. Click on Forms in the command bar.
  2. For the form you want to share, click on the Form Code (</>) icon in the URL/Code column.

Viewing a form's embed code from the Forms page 


Sharing options

Direct / Friendly URL

Each form has its own unique, customizable URL which you can share with patrons. By default, this URL consists of a unique ID number that isn't very memorable (known as the Direct URL). However, you can replace that number with your own custom URL slug, referred to as a Friendly URL.

To easily view and copy your form's current URL, look no further than the Direct URL/Friendly URL field in the Form widget code window.

The Friendly URL link

Embedded in page

You can embed the entire content of your form inside of an another webpage. When using this option, you will be provided with some embed code to insert into your page's HTML. Wherever you place the code is where your form will display on the page.

When a user visits a page with your embedded form, it will display inside of an <iframe> element, using the height and width in your Form Options > Look and Feel settings. (Please note: if you have enabled the LIbAuth Authentication access control for your form, your authentication log-in page may not be allowed to display inside of <iframe> elements. As a result, the embedded widget may not display.)

To copy the embed code for your form:

  1. In the Form Widget Code window, go to the Embedded tab.
  2. If your form currently has a page header or banner, you can choose to exclude it from the embedded widget by selecting the Do NOT Display Banner Header checkbox.
  3. Click inside the blue text area containing your widget's HTML code. This will automatically copy it to your clipboard.

Options under the Embedded tab

Popup via Button

As an alternative to embedding the entire form within a page, you can embed a button that launches it inside of a window. When using this option, you will be provided with some embed code to insert into your page's HTML.

When a user clicks the button, a modal window will appear over the current page. Your form will display inside of an <iframe> element within that window, using the height and width in your Form Options > Look and Feel settings. (Please note: if you have enabled the LIbAuth Authentication access control for your form, your authentication log-in page may not be allowed to display inside of <iframe> elements. As a result, the form may not display inside of the window.)

To copy the embed code for the button widget:

  1. In the Form Widget Code window, click on the Popup via Button tab.
  2. If your form currently has a page header or banner, you can choose to exclude it from the widget by selecting the Do NOT Display Banner Header checkbox.
  3. For the Type of Button, select which style of widget you want to create:
    • Button in the page: this will create a button that you can place within your page's content. Wherever you insert your widget's code in the page is where the button will appear.
    • Tab on the side of the screen: this will create a tab that floats along the edge of the window, regardless of where you insert your widget's code.
  4. To customize the button's label, use the Button Text field.
  5. If you selected Tab on the side of the screen, you can customize the side and position of the widget on the screen.
    • To display the button on either side of the window, select Left or Right as the Button Location. Then, use the Button Vertical Position to set how far from the top of the page (in pixels or a percentage) the button will display.
      • For example, a value of 50% will be halfway down the side.
      • Decreasing the value will move it closer to the top, while increasing it will move it closer to the bottom.
    • To display the button along the top or bottom, select Top or Bottom as the Button Location. Then, use the Button Horizontal Position to set how far from the left of the page (in pixels or a percentage) the button will display.
      • For example, a value of 50% will be halfway across the page.
      • Decreasing the value will move it closer to the left, while increasing it will move it closer to the right.
  6. To customize the text color of the button, click inside the Button Text Color field and use the color picker to choose a new one. Or, enter the HEX code value of the color you'd like to use.
  7. To customize the backgroung color of the button, click inside the Button Background Color field and use the color picker to choose a new one. Or, enter the HEX code value of the color you'd like to use.
  8. Click inside the blue text area containing your widget's HTML code. This will automatically copy it to your clipboard.

Options under the Popup via Button tab

Related Articles