Form Builder | Axero Documentation

Overview

Form Builder is a powerful tool that allows you to create custom forms for collecting information from users. Forms can be configured to create content items (such as articles, blogs, wiki pages, ideas, and cases) when submitted, send email notifications, and include conditional logic that shows or hides questions based on user responses.

The Form Builder interface consists of two main components:

• Form Builder - The administrative interface where you design and configure your forms

• Form Viewer - The end-user interface where respondents fill out and submit the form

With Form Builder, you can create forms ranging from simple feedback surveys to complex intake forms with branching logic, file uploads, and automated content creation.

Accessing Form Builder

To begin creating a form, navigate to Form Builder (e.g., https://siteurl.com/formbuilder) and select Create New Form.

You will see the main editing interface with a left panel for questions and a right panel for form configuration.

Creating a Form

The right panel contains all the form configuration options including settings, content destination, templates, tags, email notifications, and advanced settings.

Form Settings

Configure the basic settings for your form:

• Form Title - Enter a descriptive title for your form. This title will be displayed to users at the top of the form.

• Description - Add optional description text that explains the purpose of the form or provides instructions to respondents.

Content Destination

Configure where form submissions will be saved:

1. Select a Space from the dropdown to choose where content will be created

2. Once a space is selected, choose a Content Type:

   • Article - Creates an article in the selected space
   • Blog - Creates a blog post
   • Wiki - Creates a wiki page
   • Idea - Creates an idea submission
   • Case - Creates a support case

3. Select a Category to organize the created content (available for Article, Blog, and Wiki types)

4. For Case content type, select a Project to associate the case with

5. For Idea content type, select an Idea Stage for the submission

Content Title and Summary Templates

Use templates to dynamically set the title and summary of created content using tokens:

Content Title Template - Defines the title of the created content. If left empty, defaults to: New Form Submission - {form.name} - {user.displayName} - {date.submitted}

Content Summary Template - Defines the summary/excerpt of the created content (available for Article, Blog, and Wiki types). If left empty, the Content Title will be used as the summary.

Available Tokens:

• {form.name} - The form's title
• {user.displayName} - The submitting user's display name
• {date.submitted} - The submission date (e.g., "January 1, 2025")
• {question1.answer} - The answer to the first question
• {question2.answer} - The answer to the second question (and so on)

Example: Support Request from {user.displayName} - {question1.answer}

Tags

Add tags that will be automatically applied to content created from form submissions:

1. Type a tag name in the Tags field

2. Press Enter or Space to add the tag

3. Search for existing tags or create new ones

Dynamic Tags: You can use tokens to create dynamic tags that include form data:

• {form.name} - The form's title
• {user.displayName} - The submitting user's display name
• {date.submitted} - The submission date
• {question1.answer}, {question2.answer}, etc. - Question answers

Example: Adding {question1.answer} as a tag will automatically tag the content with whatever the user entered for the first question.

Email Notifications

Configure email notifications to be sent when the form is submitted:

1. Click + Add email notification in the Email Notifications section

2. Enter a Subject for the email

3. Compose the Body of the email using the rich text editor

4. Add Recipients by searching for and selecting users

5. Optionally configure Conditions to send the email only when certain form responses meet criteria (uses the same condition logic as Conditional Visibility)

6. Click Save to add the notification

Available Tokens for Email Subject and Body:

• {form.name} - The form's title
• {form.submission} - The complete formatted submission HTML
• {form.submissionJson} - The submission data as JSON
• {user.displayName} - The submitting user's display name
• {user.email} - The submitting user's email address
• {date.submitted} - The submission date and time
• {question1.answer}, {question2.answer}, etc. - Individual question answers

To edit or delete an existing email notification, click on it in the list and use the modal that appears.

Additional Recipients

Case content type only: Add users who will receive notifications when a case is created from the form submission. Search for users by name and click to add them to the recipients list.

Advanced Settings

Click Advanced Settings to expand additional configuration options for power users. These settings allow you to add custom JavaScript code that runs when the form is viewed or submitted.

Custom Viewer Script

The Custom Viewer Script runs when the form loads in the Form Viewer. Use this to customize form behavior, dynamically show/hide questions, or modify the form based on user context.

Available Variables:

• formData - Object containing current form answers
• questions - Array of question configuration objects
• config - Full form configuration
• formElement - The form's HTML element
• CF_USERID - The current user's ID (platform variable)
• CF_USER_DISPLAY_NAME - The current user's display name
• CF_SPACEID - The ID of the current space

Example 1: Hide a question based on user role

// Check if user has admin role and hide question if not
fetch('/api/users/' + CF_USERID + '/roles')
  .then(function(response) { return response.json(); })
  .then(function(data) {
    var isAdmin = data.ResponseData.some(function(role) {
      return role.RoleName === 'Administrators';
    });
    if (!isAdmin) {
      var adminQuestion = document.querySelector('[data-question-id="question3"]');
      if (adminQuestion) {
        adminQuestion.style.display = 'none';
      }
    }
  });

Example 2: Filter dropdown options based on user roles

Show only the role options that match the current user's assigned roles:

fetch('/api/users/' + CF_USERID + '/roles')
  .then(function(response) { return response.json(); })
  .then(function(data) {
    var userRoles = (data.ResponseData || []).map(function(role) {
      return role.RoleName.toLowerCase();
    });

    var select = document.getElementById('question1');
    if (!select) return;

    Array.from(select.options).forEach(function(option) {
      if (option.value === '') return;

      var hasRole = userRoles.indexOf(option.value.toLowerCase()) !== -1;

      if (!hasRole) {
        option.remove();
      }
    });
  });

Custom Submission Script

The Custom Submission Script runs when the form is submitted, before the content is created. Use this to modify form data, format the submission HTML, or perform additional processing.

Available Variables:

• formData - Object containing all question answers (e.g., formData.question1)
• questions - Array of question objects with id, label, type, etc.
• config - Full form configuration object
• generateSubmissionHtml() - Function that returns the default formatted HTML
• formData._submissionHtml - Set this to override the submission HTML output
• CF_USERID - The current user's ID (platform variable)
• CF_USER_DISPLAY_NAME - The current user's display name
• CF_SPACEID - The ID of the current space

Example 1: Center and Style All Content

Makes questions italic and 20px, answers 16px, all centered:

formData._submissionHtml = '<div style="text-align: center;">';

questions.forEach(function(q) {
  if (formData[q.id]) {
    formData._submissionHtml += '<p style="font-size: 20px; font-style: italic; margin: 0 0 5px 0;">' + q.label + '</p>';
    formData._submissionHtml += '<p style="font-size: 16px; margin: 0 0 20px 0;">' + formData[q.id] + '</p>';
  }
});

formData._submissionHtml += '</div>';

Example 2: Modify Default Formatting

Takes the default HTML and makes simple style changes:

var html = generateSubmissionHtml();

// Make questions larger and italic
html = html.replace(/font-size: 14px/g, 'font-size: 18px');
html = html.replace(/font-weight: 600/g, 'font-weight: 600; font-style: italic');

// Center the content
html = html.replace(/line-height: 1.6;/g, 'line-height: 1.6; text-align: center;');

formData._submissionHtml = html;

Example 3: Custom Table Layout

Displays questions and answers in a clean table format:

formData._submissionHtml = '<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif;">';
formData._submissionHtml += '<thead><tr style="background: #f3f4f6;"><th style="padding: 12px; text-align: left; border-bottom: 2px solid #e5e7eb;">Question</th><th style="padding: 12px; text-align: left; border-bottom: 2px solid #e5e7eb;">Answer</th></tr></thead>';
formData._submissionHtml += '<tbody>';

questions.forEach(function(q) {
  if (formData[q.id]) {
    formData._submissionHtml += '<tr>';
    formData._submissionHtml += '<td style="padding: 10px; border-bottom: 1px solid #e5e7eb; font-weight: 600;">' + q.label + '</td>';
    formData._submissionHtml += '<td style="padding: 10px; border-bottom: 1px solid #e5e7eb;">' + formData[q.id] + '</td>';
    formData._submissionHtml += '</tr>';
  }
});

formData._submissionHtml += '</tbody></table>';

Example 4: Populate Values via API

Populate an answer to a question based on an API call (e.g., dynamically fill a user's roles):

// Fetch user roles and populate question1 with comma-separated role names
var userId = CF_USERID;

// Make synchronous-style async call using Promise
var rolesPromise = fetch('/api/users/' + userId + '/roles')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    if (!data.IsError && data.ResponseData && data.ResponseData.length > 0) {
      // Extract role names and join with commas
      var roleNames = data.ResponseData.map(function(role) {
        return role.RoleName;
      }).join(', ');

      // Set question1 value in formData
      formData.question1 = roleNames;
    } else {
      formData.question1 = '';
    }
    return formData;
  })
  .catch(function(error) {
    console.error('Error fetching user roles:', error);
    formData.question1 = '';
    return formData;
  });

// Return the promise so the form waits for it
rolesPromise;

Adding Questions

The Questions panel on the left side of the interface allows you to add and manage form questions.

1. Click the + Add Question button to add a new question

2. Enter the question label in the text field

3. Optionally add help text that will appear as a tooltip next to the question

4. Select the question type from the dropdown menu

5. Configure question-specific settings as needed

Use the arrow buttons next to each question to reorder them, or click the X button to delete a question.

Question Types

Form Builder supports the following question types:

Question Settings

Each question has the following settings:

• Required - Toggle on to make the question mandatory. Users must answer required questions before submitting the form.

• Show Conditionally - Toggle on to show this question only when certain conditions are met (see Conditional Visibility)

• Help Text - Optional instructional text that appears as a question mark icon next to the label. Users can hover over it to see the help text.

Additional settings for specific question types:

• File Upload:

  • Allowed File Types - Comma-separated list of file extensions (e.g., .pdf,.doc,.docx)
  • Maximum Number of Files - Limit how many files can be uploaded

• Checkbox Group:

  • Maximum Number of Selections - Limit how many options users can select

• Number Scale:

  • Min Value - The lowest number in the scale (default: 1)
  • Max Value - The highest number in the scale (default: 5, maximum: 100)

Options for Selection Questions

For Dropdown, Radio, and Checkbox Group question types, you need to define the available options:

1. Click Show details or select the question to view the options editor

2. For each option, enter:

   • Label - The text displayed to users
   • Value - The internal value saved when this option is selected (auto-generated from label if left blank)

3. Click + Add option to add more options

4. Use the arrow buttons to reorder options or the X button to remove an option

Conditional Visibility

Conditional visibility allows you to show or hide questions based on how users answer previous questions. This creates dynamic forms that adapt to user responses.

Setting Up Conditions

1. Select the question you want to conditionally show

2. Toggle on Show conditionally

3. The condition editor will appear below the question

4. Select a Prior question - Only questions that appear before the current question can be used as conditions

5. Select an Operator to define how the condition is evaluated

6. Enter or select a Value to compare against

7. Optionally, click + Add condition to add additional conditions. When using multiple conditions, choose whether All conditions must be met (AND logic) or if Any condition being met is sufficient (OR logic). See Multiple Conditions for more details.

Condition Operators

Different operators are available depending on the question type being evaluated:

For Text, Long Text, and Email questions:

• equals - Exact match
• does not equal - Not an exact match
• contains - Answer contains the specified text
• does not contain - Answer does not contain the specified text
• is empty - No answer provided
• is not empty - Any answer provided
• matches pattern - Answer matches a regular expression pattern

For Number and Number Scale questions:

• equals / does not equal
• greater than / greater than or equal to
• less than / less than or equal to
• between / not between - Requires two values for the range
• is empty / is not empty

For Dropdown and Radio questions:

• equals - Selected option matches
• does not equal - Selected option does not match

For Checkbox Group questions:

• contains - The specified option is among those selected
• does not contain - The specified option is not among those selected
• is empty / is not empty

For Date questions:

• equals / does not equal
• before / before or on
• after / after or on
• between / not between

For File Upload questions:

• contains a file - A file has been uploaded
• does not contain a file - No file has been uploaded

Multiple Conditions

You can add multiple conditions to control when a question is shown:

1. Click + Add condition to add another condition

2. Configure the new condition with question, operator, and value

3. Use the Match toggle to choose the logic:

   • All (AND) - The question shows only when ALL conditions are met
   • Any (OR) - The question shows when ANY condition is met

4. Click Remove next to a condition to delete it

Saving and Publishing

After configuring your form:

1. Review your form configuration

2. Click Save Form to save the form and remain in the Form Builder interface

3. Alternatively, click the dropdown arrow next to Save Form and select Save and View to save the form and immediately navigate to preview it as users will see it

Managing Forms

From the Form Builder home screen, you can manage your existing forms using the actions menu (three dots) next to each form:

• View responses - Opens a view showing all submissions for the form. This option is available when the form is configured to create content.

• Copy form - Creates a duplicate of the form with all its questions and settings. The copy will be named with "Copy of" prefix.

• Edit form - Opens the form in the editor to modify questions, settings, or configuration. 

• Delete form - Permanently removes the form. You will be prompted to confirm before deletion. This action cannot be undone.

Form Viewer

The Form Viewer is the interface that end users interact with when filling out forms. Creating or cloning a form creates a page builder page in the designated Space where end users will access the form.

Filling Out Forms

When users access a page with a form:

• The form title and description are displayed at the top

• Required questions are marked with a red asterisk (*)

• Questions with help text display a question mark icon that shows additional information on hover

• Conditional questions appear automatically when their conditions are met

Field interactions:

• Text and Long Text - Type directly in the field
• Email - Enter a valid email address (format is validated)
• Number - Only numeric values are accepted
• Dropdown - Click to open and select an option
• Radio - Click one option to select it
• Checkbox Group - Click to check/uncheck multiple options
• Date - Select month, day, and year from the dropdown menus
• Number Scale - Click a number button to select a rating
• File Upload - Click the upload area or drag and drop files
• Featured Image - Click or drag to upload an image (accepts .jpeg, .jpg, .png, .gif)

Submitting Forms

1. Fill out all required fields (marked with *)

2. Review your responses

3. Click the Submit button at the bottom of the form

If any required fields are missing or validation fails:

• The fields will be highlighted with an error state
• Error messages will appear below the affected fields
• Correct the errors and click Submit again

On successful submission:

• A success message is displayed
• Content is created in the specified space
• If configured, email notifications are sent to specified recipients
• A link to the created content is provided

AI Form Assistant

Form Builder includes an AI-powered assistant that can automatically generate questions based on your description, saving you time when creating forms.

Generating Questions with AI

To generate questions using AI:

1. Click the AI Form Assistant card when starting a new form, or click the ✨ Generate with AI button below the questions list

2. In the modal that appears, describe the questions you need in plain language. For example:

   • "I need a business card request form with fields for name, job title, email, phone number, and quantity needed"
   • "Create an employee onboarding form asking for personal information, emergency contacts, and equipment preferences"
   • "Build a customer feedback survey with satisfaction ratings and comment fields"

3. Click Generate and wait for the AI to create your questions

4. Review the generated questions. Each question shows its label and type (text, email, dropdown, etc.)

5. Select which questions to add by clicking on them, or click Select all to choose all generated questions

6. Click Add Selected to add the chosen questions to your form

Modifying Questions with AI

Once you have questions in your form, you can use AI to modify them:

1. Click the ✏️ Modify with AI button below the questions list (this button appears after you have at least one question)

2. Describe the changes you want to make. For example:

   • "Change the first question to ask for full name instead of first name"
   • "Make the email field optional"
   • "Add a phone number field after the email question"
   • "Remove the date of birth question"
   • "Change all text fields to be required"

3. Click Modify and review the proposed changes

4. Select which modified questions to apply and click Add Selected

Real-World Usage Scenarios

Combine logic, templates, and notifications to build sophisticated automation. Here are two high-impact implementations:

Scenario 1: IT Asset Request Workflow

Capture technical details dynamically while ensuring clean case organization.

• Configuration: Add a Dropdown for "Asset Type" (Laptop, Mobile, Peripheral).
• Logic: Set Conditional Visibility on a "System Specs" field to show only if "Asset Type" equals "Laptop."
• Automation: Set the Content Title Template to [Asset Request] - {question1.answer} - {user.displayName} to ensure IT cases are instantly searchable.

Scenario 2: Critical Feedback Trigger

Proactively identify unsatisfied users with automatic escalation.

• Configuration: Use a Number Scale (1-10) for satisfaction scoring.
• Email Notification: Configure a notification condition to trigger only when the score is Less than 5.
• Logic: Route the critical feedback email directly to your Customer Success team, while positive scores are simply archived as wiki entries.

Glossary of Tokens and Variables

Use this quick reference for all dynamic tokens and script variables available in Form Builder.