Overview

IMO (Input, Manage, Output) is a user generated content management tool that can be used to display forms on Bento and non-Bento sites. IMO allows users to build a form directly in the IMO tool (using only file and text fields) or by using Formstack, a third-party form builder. If you build your form in Formstack, you will automatically ingest the fields created in the original form. After building your form, the IMO console stores code that you can add to your website. In Bento this is done via a component that you would create based on the code provided to you in the IMO. When users submit the form from your site, all user submissions can be accessed from the IMO Console. Admins can manage and edit user and output the submissions to an endpoint.

You can use IMO in two different ways:

  1. Create a form in the IMO console and use the generated code to add it to your Bento site.
  2. Create a form using Formstack, import the form to IMO and use the HTML code from the Formstack site to implement the form on your Bento site.

Getting started

In order to use IMO you will need the following items:

  • a form originally created using IMO directly, or using Formstack, a third-party form builder;
  • a published web page to hold your component (warning)Create this page before you start so it will be ready when it's time to add your component. Learn how to create a Bento page;
  • a published thank you/confirmation web page (warning)Create this page before you start;
  • a module where you can insert the HTML form code IMO generates. In Bento this would be done via a component.

Implementation Option 1: IMO

Building a form directly in IMO Console allows you to control all aspects of your form right from the dashboard. You can build and view your form and view all submissions in one place. 

How to create an IMO form

Figure 1

 

  • In the Form name textbox, type the name of your form (Figure 2.1). This is the name by which you will identify your form in the IMO console. (warning) This is a required field.
  • In the Form referrer URL textbox, type the full URL to your Bento site (Figure 2.2). (warning)This is a required field.
  • In the Thanks URL textbox, type the full URL to the thank you page you created for your form (Figure 2.3). This is the page users will see after they submit a form. (warning) This is a required field. Learn how to create a Bento page
  • Click the Is published? checkbox to make your form live (Figure 2.4). You can do this at any time since your form will not be available until it is marked as live on your site.
  • Click the Auto approve submissions? checkbox if you'd like all incoming submissions to be automatically approved and displayed on your web site (Figure 2.5). If this is not checked, you must manually approve each submission. An approved submission means that the submission information will be displayed on your site. It will not appear on your site until it is approved. 

Editor's Note: If you expect a large number of submissions to come through, you might want to consider checking Auto approve, so all submissions will automatically be visible on your site.

Figure 2


  • Type the first field name in the textbox provided (Figure 3.1). This is the text that will show up in your form's first field. (warning) At least one field is required in order to save your form.
  • Click the Text dropdown menu and click either Text or File. A text field prompts the user to add plain text in the form field. A file field prompts users to attach a file such as a picture or a PDF.
  • Click the Public dropdown menu and click Public or Private. Public makes the user submitted fields visible on your website. Private hides user responses from public view. When private is selected, only the form admin can see the user response in the IMO admin console.
  • Click Add another field to add the rest of your form fields (Figure 3.4). The number of available fields remaining appears in parentheses. (warning) You can add up to 20 form fields.

Figure 3

  • After you have added all of your form fields, you can move them around by clicking and dragging the four-way cross symbol on the left side of the page (Figure 4.1).
  • To delete a field, click the x on the right side of the page (Figure 4.2).
  • When you are finished, click Save and Continue (Figure 4.3).
  • Click Get HTML code (Figure 4.4).

Figure 4

  • The HTML code for your form appears. Click Copy to copy the code (Figure 5.1).
  • Click OK to close the window (Figure 5.2).

Figure 5

  • Open the component you created before you started and in the Name textbox type a name for your component (Figure 6.1). (info) Using the same or similar name as your form name helps to keep things organized.
  • In the Template code section, paste the code you copied in Figure 5 (Figure 6.2).
  • In the Available site selectbox located in the Sites section, click the Bento site to which you want this component available. Click the right-facing arrow between the two selectboxes to move the site to the Chosen sites selectbox on the right (Figure 6.3). (warning) The component will be available to only the sites you select in this step.
  • Click Save and continue editing or Save to save the page (Figure 6.4).

Figure 6

  • Go to the main Pages screen of your Bento site and click the page you created to hold your IMO form (Figure 7.1). (warning) Be sure the page is published (Figure 7.2).

Figure 7

  • In the Extra Page Content section, click the Available Components dropdown menu and click Custom Component (Figure 8.1).
  • Click Add Component (Figure 8.2).

Figure 8

  • Click the Available Components dropdown menu and click the component you created in Figure 6 (Figure 9).
  • Click Save (Figure 9.2).

Figure 9

  • A preview of your form appears (Figure 10.1).
  • Click Preview site in the top right corner to view your form in a browser (Figure 10.2).

Figure 10

  • The form appears as users will see it on your site. They can simply fill out the fields (Figure 11).

Figure 11

  • After a user clicks Submit on your form, they are taken to the Thank you page you created and added to the Thanks URL field in Figure 2.3 (Figure 12).

Figure 12

Figure 13

  • All user submissions appear on the page (Figure 13.1).
  • Click Approve to make the submissions viewable on your Bento site. You can see the status of each submission in the Approved/Unapproved column (Figure 13.2).
  • In the actions column, click the edit box to edit the submission or click the x to delete the submission (Figure 13.3).

Figure 14

Implementation Option 2: Using Formstack

You can use Formstack, a third-party form building tool, to create a form and import it into IMO. Formstack will generate the code you need, however, unlike building a form right in the IMO console, you must go to the Formstack site to make edits to your form and re-import it into IMO each time.

How to Import from Formstack

Figure 1

  • If you have an account, type your username and password and click Login (Figure 2.1).
  • If you do not have an account, Create Account located in the bottom left side of the screen (Figure 2.2).

Figure 2

  • Click Forms located in the top navigation bar (Figure 3).

Figure 3

  • Click New Form on the right side of the screen (Figure 4).

Figure 4

  • Click Untitled Form to edit the name of your form (Figure 5).

Figure 5

  • Type the title you want to give to your form and click the Save icon to the right of the name (Figure 7).

Figure 6

  • Begin building your form by dragging the fields you want to include in your form from the left side of the page to the form box (Figure 7).

The form saves automatically.

Figure 7

(click image to enlarge)


  • When finished, click Publish (Figure 8).

The form saves automatically.

Figure 8

  • In the address bar on your browser, copy the string of numbers at the end of the URL (Figure 9).

Figure 9

Figure 10

  • Paste the numerical string from Formstack into the Form id: textbox (Figure 11.1).
  • Click Import (Figure 11.2).

Figure 11

  • The form appears but all fields are READ-ONLY. To edit your form you must go back to www.formstack.com, make the changes, then re-import it as shown in Figures 10 and 11. 
  • Click Save and Continue (Figure 12.1). 
  • Click Get HTML code (Figure 12.2). (warning) This link is disabled until you save your form.

Figure 12

  • Copy the code by clicking Copy (Figure 13.1). 
  • Click OK (Figure 13.2).

Figure 13

  • Go to your Bento site's dashboard and in the Custom Components section, click Add located on the right hand side of the page (Figure 14).

Figure 14

  • In the Name textbox, type a name for your component (Figure 15.1).
  • In the Template code textbox, paste the HTML code you copied from IMO in Figure 14 (Figure 15.2).
  • In the Sites selectbox, click the site to which the component should be available (Figure 15.3).
  • Click the right-facing arrow (Figure 15.4) to move the selected site to the Chosen sites selectbox (Figure 15.5).
  • Click Save or Save and continue editing (Figure 15.6).

Figure 15

  • Navigate to the Pages section of your Bento site and open the page you had created for your IMO form (Figure 16).

Figure 16

  • In the Extra Page Content section, click the Available Components dropdown menu and click Custom Component (Figure 17.1).
  • Click Add Component (Figure 17.2).

Figure 17

  • Click the Available Components dropdown menu and click the name of the component you created in Figure 16 (Figure 18.1).
  • Click Save (Figure 18.2).

Figure 18

  • Click Preview site to view the form in a browser (Figure 19).

Figure 19

  • Your form appears in the browser (Figure 20).

Figure 20