Introduction

Generate forms with a few clicks of the mouse, save, and then manage the submissions. It's a snap! From the landing page select 'Pre-Designed Form', 'File-to-Form', or 'Text-to-Form' to generate and launch the form wizard. These generation services are also available from inside the Dashboard. These forms can be edited and versioned from the Dashboard. Genie Snap makes it easy and quick to automate self-service requests, orders, and other needs whether business or personal.

Form Wizard Features

Start by Generate Form from File or Text by submitting file or text and a form will generate and open in the editor for customization.

Use Drag and Drop to position elements on the page.

Change Colors, Titles, and Fonts using the palettes.

Add, remove, and edit Form Elements with date, currency, text, phone, email, number, lists, dropdowns, and others setting properties to restrict, format, and enrich.

Automate behavior Across Elements with shared lists and rules that can be used to apply calculations, lookup, conditional show or hide, conditional enable or disable, and others.

Quickstart

• First, use one of the three form generation services.
• Second, the form opens in editor allowing elements, appearance, lists, rules, and other customizations.
• Third, when finished editing, select save and the form will appear in your Dashboard Forms list.
• Fourth, open the form from Dashboard Forms, fill and submit to create a record in your Dashboard Submissions list.

---

Generate and Use Forms

Generate Form

Form Submission Persona Modes

Persona 1: Edit Mode generates a document with edit mode watermark and will not submit a record to the Dashboard. This is useful for testing form interaction.

Persona 2: Unverified Email Address generates a document with unverified email watermark and will submit a record to the Dashboard. This lets the user know that they need to verify their email address.

Persona 3: Normal Mode and Verified Email Address generates a document without watermark and will submit a record to the Dashboard.

Form Deployment and Usage Options

Option 1: Open from Dashboard Forms by selecting the form's name whether active or inactive.

Option 2: Open from Dashboard New Submission Dropdown by selecting the form's name. Forms only appear in New Submission list when activated from Dashboard Forms.

Option 3: Open from Portals that have been configured from Dashboard Portals.

Option 4: Open from Link through Email or Link on Site by sending the link through email or placing the link on a site for clients to select.

Form Wizard

Generation and Editing are controlled by the Form Wizard. Use Form from File or Text-to-Form to produce a form. When generation is complete, form displays in edit mode for customization.

Editor

Editor opens automatically when form generates, or when selecting edit from the Form list. Editor appears with the following customization capabilities that are numbered below.

Editor Standard Features

When a form is generated, element location and data type are best guess by the automated generator. Expect some custom work to tailor the element locations, types, and supporting text such as main title, secondary title, logo, and sections to meet your needs. Customization is easy and forgiving. Just drag and drop elements to different locations, select the edit to adjust properties and use the other customizations to change colors and text.

Rules and List Advanced Features

• Rules and shared lists provide advanced features used to apply calculations, e.g. invoices, orders, etc...
• The lists within the rules are used for shared lists and list lookups. Use rule lists to bind the same list, usually with different columns from the various dropdown lists. Rule lists are also accessed from rules to map a selected row's column values to one or more elements on the page.
  
  Rule lists and element lists are different. Element lists provide grid capability on the form.

Editor Customization

#1 Header displays the logo, main title, and secondary title. The logo, main title, and secondary title are edited in #5. The background and foreground color is edited in #3.

#2 User displays email address or user name if profile has been updated. Select user name to edit profile or select to sign out.

#3 Palette specifies the color pattern, header and footer background color, header and footer foreground color, body background color, element input style, page font, and font size.

#4 Payment and Communication setup form payment, if enabled, and specify client submission response. The remainder of the properties control whether the form sends the submission to this site, or to an alternative end point.

#5 Header specifies the instructions, main title, secondary title, logo, logo tooltip, and URL when a client selects the logo.

#6 Footer specifies URL and text to display for company, privacy, terms of service, disclaimer, and contact. There is also the option to apply footer message.

#7 Document Merge and Attachments to edit client generated document and attachment rules.

• The document originated when 'File-to-Form' or 'Text-to-Form' was used to generate the form.
  • Edit the document by downloading, editing, and then uploading back to the form. Changes are immediate. On the next submission, the generated document will present with the new edits.
  • When an element is added to the form, and also needs to display on the document, use the same download, edit and upload process, and add element to the document.
• Enable attachments, size, number of attachments, and allowed file types to add attachments when using the form.

#8 Rules and Lists allows lists and rules processing across the form. Uploaded lists are available to all dropdown form elements and lookup rules. Use rules with conditional logic to apply calculations, lookups, concatenation, enabling and disabling elements, showing and hiding elements, and other interactions.

#9 Save Edits is used to save the form to the Submission Management environment.

#10 Design Toggle is used to toggle and view the form with and without editor properties.

#11 Instruction is used to provide directions to your clients. Use the header section, #5, to apply instructions.

#12 Insert Text and Image is used to insert text and images labels, sections, and sub headers throughout the body of the form.

#13 Insert and Delete Element Rows is used to insert and delete form element rows.

• Add row and then drag existing elements to the cells.
• Deleting element rows does not delete elements from the merged document that is used for the receipt. If elements have been deleted in error, reconfigure elements with the same name and they will automatically rebind to the merged document.

#14 Edit Element is used to edit input element properties.

• Select Edit Element and apply properties.
• Toggle element type - currency, date, dropdown, email, image, list, number, phone, text area, text box, and URL.
• The markup properties will change based on which element type that is selected.

#15 Delete Element is used to remove the element from the form.

• Deleting an element in cell does not delete the element on the document. If element has been deleted in error, reconfigure elements with the same name and it will automatically rebind to the document.

#16 Expand and Contract Column is used to allow elements to span 1 to 4 cells.

• If expand or contract is selected and that adjacent cell is occupied by an element, it will not overwrite. First move the element out of the cell, and then the cell can be expanded or contracted in that direction.

Integration Button

At the top of each form, users can click a button to pull in external data and have it applied directly to the form's input elements. The button can be customized to use either POST or GET requests, along with variable inputs, headers, and a POST body if needed. You can also customize the mapping so that fields from the external data line up correctly with the form’s inputs by name. A built‑in test area lets you verify that the data pull works as expected before using it live.

The Active checkbox controls whether the integration button is shown on the form.

• In the integration editor, you can configure and test the button without selecting Active.
• When the form is saved or in edit mode, the integration button appears if Active is checked.
• Configurations can be saved to new form versions without selecting Active, allowing edits later.

Inputs support variable assignment, which can be applied to a URL or POST body.

• Input fields appear to the left of the integration button. Add a clear label so users know what to enter.
• Each input is referenced by its position using {{_webGenieIntegrationInput_1}}, {{_webGenieIntegrationInput_2}} or {{_webGenieIntegrationInput_3}}.
• To use an input in a URL, apply it like this: https://somedomain.com?id={{_webGenieIntegrationInput_1}}
• To use an input in a POST body, apply it like this: "id":"{{_webGenieIntegrationInput_1}}" Separate additional key‑value pairs with commas. You can also include POST body values that don’t use input assignments.

Request Type GET or POST determines how the API request is sent.

• GET requests only support input values in the URL, while POST requests support both URL and Post Body assignment inputs.
• Headers and Map work the same way for both GET and POST.

URL Endpoint is the target of the GET or POST request.

• The URL can be up to 1024 characters in length.
• The URL can be constant or support assignment inputs:
  • Constant - https://somedomain.com?id=2245
  • With variable input - https://somedomain.com?id={{_webGenieIntegrationInput_1}}

Button Label and Tooltip displays on form with these settings.

• The label can be up to 25 characters.
• The tooltip can be up to 300 characters.

Headers Keys and Values forms when the GET or POST occurs using these values.

• Headers are limited to 5 key / value pairs that are limited to 1024 characters each.
• This works same as any other http header. Example Key -> Authorization with Value -> [bearertoken] or Key -> Content-Type with Value -> application/json.
• Do not enter with single (') or double (") surrounding the key or value.

Post Body Keys and Values forms when the GET or POST occurs using these values.

• This input is limited to 2000 characters.
• The keys and values must be entered with "key":"value". Separate additional key‑value pairs with commas.
• There are 3 variable input available. Apply these to the body like this "key":"{{_webGenieIntegrationInput_1}}"

Map Result Path is from where the data will be extracted from the API request's result.

• The 'Result Path' can be left blank for results like -> { "field1": "value1", "field2": "value2" } and value will be automatically extracted.
• The 'Result Path' can either be left blank or supplied for nested result sets beginning with 'data' or 'json' like { "data" { "field1": "value1", "field2", "value2" ... }}
• The 'Result Path' must be set for any other request's result like { "[this must be result path]" { "field1": "value1", "field2": "value2" ... }}

Map Key Values from the result to the target elements when user selects integration button.

• This input is limited to 2000 characters.
• The keys and values must be entered with "key":"value". Separate additional key‑value pairs with commas.
• The key is an element name from the form (that input, text area, etc...) and the value is name from the request's result.

---

Test HTTP Request and View Result when integration button is selected.

• POST using Postman endpoint with body and without input mapping:
  • URL = https://postman-echo.com/post
  • Method = POST
  • Headers = "Authorization": "Bearer token123", "Content-Type": "application/json"
  • Post Body = "name": "Alice", "date": "Nov 17"
  • Map Result Path = data
  • Map Key Values = "[Form Element Name]": "name", "[Form Element Name]": "date"
    • Replace [Form Element Name] with an element name from the form.
    • In this request, it is echoing back two values for those field names coming from the integration request where are "name" and "date" in this specific instance.
  • Select the integration button and the result will display in the window.

• POST using Postman endpoint with body and with input mapping:
  • Input Label 1 = Enter Name
  • Input Label 2 = Enter Date
  • URL = https://postman-echo.com/post
  • Method = POST
  • Headers = "Authorization": "Bearer token123", "Content-Type": "application/json"
  • Post Body = "name": "{{_webgenieIntegrationInput_1}}", "date": "{{_webgenieIntegrationInput_2}}"
  • Result Path = data
  • Map Key Values = "[Form Element Name]": "name", "[Form Element Name]": "date"
    • Replace [Form Element Name] with an element name from the form.
    • In this request, it is echoing back two values for those field names coming from the integration request where are "name" and "date" in this specific instance.
  • Select the integration button and the result will display in the window.

• GET using JsonPlaceholder endpoint:
  • URL = https://jsonplaceholder.typicode.com/posts/1
  • Method = GET
  • Map Result Path = leave blank for this request.
  • Map Key Values = "[Form Element Name]": "title", "[Form Element Name]": "body"
    • Replace [Form Element Name] with an element name from the form.
    • In this request, the result is several fields with two of them being "title" and "body".
  • Select the integration button and the result will display in the window.