Genie Snap
Form Editor Guide

Genie Snap® Form Editor Guide

Introduction

Every form Genie Snap generates opens in the editor, where you adjust it before saving it to your dashboard. The editor is also available later from Dashboard Forms, and each save can create a new version.

  • Layout: drag elements to new positions, add and delete rows, and widen an element across up to 4 cells.
  • Elements: change an element's type (date, currency, text, phone, email, number, list, dropdown, and others) and its properties to restrict and format input.
  • Appearance: set colors, titles, fonts, logo, and footer links.
  • Behavior: use shared lists and rules for calculations, lookups, showing or hiding elements, and enabling or disabling them.
  • Document and attachments: update the document template generated with the form, and decide which attachments clients can add.
  • Integration button: let users pull data from another system into the form.

Before You Start

Generate a form first, using Build From Text (Text-to-Workflow) or Build From a File (File-to-Workflow), from the site or from Dashboard Forms. The editor opens in a new browser tab when generation finishes.

How to generate a form, how the test and live submission modes differ, and the ways to share a saved form are covered in the main documentation: Generate and Use, Submission Mode, and Deployment.

The Editor

The editor opens automatically after a form is generated, or when you select Edit Form from the Dashboard Forms list. The numbered areas in the image below are described under Editor Controls.

The form editor with its controls numbered 1 to 16

After Generation

Each element's position and type come from the tags in your text or file, so a fully tagged source needs little rework. Fields detected from untagged text may need their type or position adjusted, and you'll usually want to set the main title, secondary title, logo, and section labels. Drag elements to move them, and select Edit Element to change their properties.

Rules and Lists

  • Rules apply calculations (for example, invoice and order totals), lookups, joining text, and showing, hiding, enabling, or disabling elements.
  • Rule lists are shared lists. Bind one list to several dropdowns, each showing a different column, or use a rule to copy the selected row's column values into elements on the form.
  • Rule lists and element lists are different. An element list is a grid on the form where users enter rows.

Editor Controls

#1 Header shows the logo, main title, and secondary title. Edit them in #5; set the colors in #3.

#2 User shows your email address, or your name once your profile is complete. Select it to edit your profile, or select Sign out to sign out.

#3 Palette sets the color pattern, header and footer colors, body background, input style, font, and font size.

#4 Payment and Communication sets up in-form payment (if enabled), the response clients see after submitting, and whether submissions go to this site or to another endpoint.

#5 Header Settings sets the instructions, main title, secondary title, logo, logo tooltip, and the link the logo opens.

#6 Footer sets the text and links for company, privacy, terms of service, disclaimer, and contact, plus an optional footer message.

#7 Document and Attachments manages the document generated from each submission and the attachments clients can add.

  • The document template was created with the form. To change it, download it, edit it, and upload it back. The next submission uses the new version.
  • If you add an element to the form that should also appear in the document, add it to the document the same way.
  • Turn on attachments and set the size limit, number of files, and allowed file types.

#8 Rules and Lists manages the rules and lists described above. Uploaded lists are available to every dropdown and lookup rule on the form.

#9 Save Edits saves the form to your dashboard, where its submissions are managed.

#10 Design Toggle shows the form with or without the editor controls.

#11 Instructions show directions to your clients. Set them in #5.

#12 Insert Text and Image adds labels, section headings, and images anywhere in the form.

#13 Insert and Delete Rows adds or removes rows of elements.

  • Add a row, then drag existing elements into its cells.
  • Deleting a row doesn't remove its elements from the document. If you delete an element by mistake, recreate it with the same name and it reconnects to the document.

#14 Edit Element changes an element's properties.

  • Change the element type: currency, date, dropdown, email, image, list, number, phone, text area, text box, or URL.
  • The properties shown change with the type you choose.

#15 Delete Element removes an element from the form.

  • The element stays in the document. To restore it, recreate it with the same name and it reconnects.

#16 Expand and Contract lets an element span 1 to 4 cells.

  • An element won't expand into a cell that's already occupied. Move the other element first.

Integration Button

The button appears at the top of the form. It sends a GET or POST request, with optional user inputs, headers, and a POST body, and copies fields from the response into form elements by name. A built-in test area lets you check the request before turning the button on. See Test below for working examples.

Active controls whether the button is shown on the form.

  • You can configure and test the button without making it active.
  • When Active is checked, the button appears in edit mode and on the saved form.
  • An inactive configuration is still saved with new form versions, so you can finish it later.

Inputs are up to three values the user types before selecting the button.

  • Inputs appear to the left of the button. Give each a clear label.
  • Refer to them as {{_webGenieIntegrationInput_1}}, {{_webGenieIntegrationInput_2}}, and {{_webGenieIntegrationInput_3}}.
  • In a URL: https://somedomain.com?id={{_webGenieIntegrationInput_1}}
  • In a POST body: "id":"{{_webGenieIntegrationInput_1}}". Separate pairs with commas; pairs without inputs are allowed too.

Request Type is GET or POST.

  • GET uses inputs in the URL only. POST can use them in the URL and the body.
  • Headers and Map work the same for both.

URL is the request's endpoint, up to 1024 characters.

  • Fixed: https://somedomain.com?id=2245
  • With an input: https://somedomain.com?id={{_webGenieIntegrationInput_1}}

Button Label and Tooltip are what users see.

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

Headers are sent with the request.

  • Up to 5 key/value pairs, each up to 1024 characters.
  • They work like any HTTP header, for example Authorization with Bearer [token], or Content-Type with application/json.
  • Don't wrap the key or value in single or double quotes.

Post Body is sent with POST requests.

  • Up to 2000 characters, entered as "key":"value" pairs separated by commas.
  • Inputs go in like this: "key":"{{_webGenieIntegrationInput_1}}"

Map: Result Path is where in the response the fields are found.

  • Leave it blank when the fields are at the top level: { "field1": "value1", "field2": "value2" }
  • Leave it blank or enter data or json when the fields are under one of those: { "data": { "field1": "value1", "field2": "value2" } }
  • Enter the property name for anything else: { "result": { "field1": "value1" } } needs result.

Map: Key Values copy response fields into form elements.

  • Up to 2000 characters, entered as "key":"value" pairs separated by commas.
  • The key is the form element's name; the value is the field name in the response.

Test sends the request and shows the response when you select the button.

POST with a body, no inputs (Postman Echo)

  • 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" (the service echoes back name and date)

POST with a body and inputs (Postman Echo)

  • 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}}"
  • Map Result Path = data
  • Map Key Values = "[Form Element Name]": "name", "[Form Element Name]": "date"

GET (JSONPlaceholder)

  • URL = https://jsonplaceholder.typicode.com/posts/1
  • Method = GET
  • Map Result Path = leave blank
  • Map Key Values = "[Form Element Name]": "title", "[Form Element Name]": "body" (the response includes title and body)