Build feedback and support request forms

Last Update: Sep 2024 • Est. Read Time: 4 MIN
To check plan availability, see the pricing page.

Forms are a simple way for your customers to provide feedback or request support from you. You can build a form in Kustomer using a visual builder that allows you to select from a list of commonly used attributes and form components and then customize them to best suit your needs. This ensures that you receive all of the necessary information upfront, minimizing any back-and-forth between you and your customer and enabling you to provide a better response to their question.

If you have multiple brands configured, you can create individual forms for each one of your knowledge bases.

Who can access this feature?
User typesAdmins can create forms.


In this article

Create a form

Use the visual form builder to quickly build a form and add it to your site. You can also use the Code editor to manually create a form. Since forms are created using the Conversation klass, the Email, Subject, and Preview fields are automatically added for you as required fields and cannot be deleted. You can add additional fields to customize your forms to suit your needs. There are no limit to how many fields you can add.

To build a form using the Visual editor:

  1. Go to Settings> Knowledge Base > Forms.
  2. Select Add Form.
  3. Select Visual to use the drag-and-drop visual editor or Code to create a form manually.

    Note: Once you start building a form, you cannot change the type of editor you are using.

  4. Enter the following information:
    • Brand is the brand for which you are creating the form. 
    • Internal form name is the internal name of the form that you'll see on the Forms page.
    • Slug is the URL identifier for the form.
      In this example, we will build a Contact Us form. 
  5. Select Add form.
    • The left pane on the Form Builder editor shows all of your active standard and custom attributes, as well as components that can be added to the form. You can switch between available attributes by selecting an object from the drop-down menu.
    • The center space in the editor is where you will build and customize the form to best suit your needs. Here, you can add all of the necessary attributes and components your customers will see when submitting a form. 
    • The Form Settings pane on the right shows all of the general settings that you can customize for your form, such as the button text. When you select a field in the editor, this pane changes to show all of the available settings for that specific block and is where you can visually customize them further. See Customize component blocks for more details.
  6. Continue to add fields as necessary. 
  7. Select Save Changes.

Understand blocks

A block is essentially a row in your form that contains attributes or other component information, such as a radio button. You can add attributes and components to a block by dragging and dropping to the editor from the left pane.

You can also select the Add field or + to open a menu that lists all the available attributes, components, and styling.

Note: Attributes can only be used once. Those already used will appear in a gray box and visually indicate that they are no longer available.

Customize component blocks

You can customize some component blocks by selecting them to view their individual options in the Field Settings panel on the right. For example, here, you can either delete the block from the form or customize the text displayed in the form.

The following options are available for all components:

  • Required lets you specify that information for this field or question must be entered before a user can submit the form.
  • Overwrite Data lets you determine if the information entered for the field will overwrite the data currently in Kustomer. For example, if you turn on this setting for the Phone attribute, the number entered here will replace the existing phone number for the matching customer.

Note: The options in the Field Settings panel will change depending on what type of component is currently selected.

You can also use snippets to add translated content to your forms. For more information, see Reuse text with snippets.

Once you make your changes, the visual settings are automatically applied in the editor. You can also see the styling by selecting View live.

Note: Any changes to your forms are auto-saved and no previous versions are cached. It is important to note this prior to making new changes to your form.

Update your stylesheet

You will need to update your form.css file so that forms display correctly.

  1. Go to Settings> Knowledge Base Themes.
  2. Select Edit for your custom theme and select Create new draft.
  3. Open the form.css file and copy and paste the following block of code into it.
    /*
      ==============================
      Columns
      ==============================
    */
    
    .form-row {
      width: 100%;
      display: flex;
    }
    
    .form-row-full .form-column {
      width: 100%;
    }
    
    .form-row-half .form-column {
      width: 50%;
    }
     If you are using the default theme, this will be added automatically.
  4. Select Save.

Use the code editor

You can modify the form through code to remove or add certain fields, depending on how you would like it to look. 

To see the code, select the View code tab that is located at the bottom of the visual editor.

If you want to make changes, select Convert to code. If you are sure you want to switch to the code view, enter CONVERT in the box and select the option confirming you want to make this change.

Note: Once you convert the visual editor to code, you cannot undo this change.