Skip to main content
Forms

Discover KiteSuite's powerful form feature, enabling easy creation, customization, and integrations.

Gaurav Aery avatar
Written by Gaurav Aery
Updated over 3 months ago

1. Forms:

All users can benefit from the KiteSuite form feature, users can simply create a form from the left menu section upon selecting the “Forms” option. KiteSuite form include following features:

1.1. Create Form:

When the user go the the form page on the this page it will show two buttons (Center and top right) “Create Form” clicking on the button user will redirected to the next page where they can select how they like to create their form, there are two options for users to create a form “Start from scratch” and “Use template”.

Create Form

1.2. Start from Scratch:

Upon selecting the start from scratch button the user will ask to enter the form name, users can enter form as per their choice. And Upload Logo button from there user can upload an image file from their computer to set as logo. Once the logo and form names are added users can click on the create button to start with or can click on the back button if they don't wish to continue or want to create a form with another option.

Start from Scratch

1.3. Browse Templates.

Form template listing: When users start to create the form with template, it will redirect users to the template listing page. From the listing user can search a template by entering template name or can go to a specific category to use a right template.

Users have an option to preview the form where it will show the form's description, form name, and image. Form can be created directly from the listing page or from the preview page by clicking on the “Use template” button.

2. Form Fields:

2.1. Task Fields:

Task fields are combinations for project template fields and custom fields created into the project. Tasks fields can be utilized to easily get form responses into the designated field upon saving forms responses.

2.2. Basic (Form) fields:

These fields are form specific fields which can only be used in the form and all responses submitted for these fields are shown into the item page below the item description content just above the comment section.

Basic Fields

3. Build Form:

Users can simply drag-drop fields from the left bar to the form and edit field name, description, and the additional text. Users can also set conditions on the form fields like as following:

3.1. Required:

If this field is enabled users are required to fill the form in order to submit the form response.

3.2. Hidden:

If users enable hide for any of the form’s fields, in this case these fields would not be available for the user to see while submitting a form response.

3.3. Read Only:

If read only is enabled for any form’s field in this case users can only read the data but cannot manipulate the same.

3.4. Shrink:

If shrink is enabled in this case form field length will be shrink to half of its size. And user can fit two filed in a single row

3.5. Label Alignments:

Users can easily align fields labels to top, left, or right, as per their preference to keep form attractive and user friendly.

Label Alignments

4. Settings:

From the settings screen the user can manage form response settings. Users have following options into the settings screen:

4.1. Title:

From here users can edit the form's title.

Title

4.2. Toggle button

To allow users to edit form responses after submission.

4.3. Single/multiple response:

Select if users are allowed to submit multiple responses or a single response is allowed.

4.4. Form availability setting:

User can disable, enable, Set for disable date, Set response limit to disable form, Set both date and response limit to disable the form.

5. Preview:

This button allows users to see the form how it will on the customer end and make changes if they are not satisfied with the look or content before publishing the form.

Preview

6. Publish Form:

Upon publishing the form the form will become available for all users and they can access it by the form URL. From the publish screen the form link can be “copied” to share with others. Where users can be redirected to the form and submit their responses from there.

Publish Form

7. Third party embed options:

In the form there is an option for users to embed the KiteSuite forms just using the provided code snippet provided for the following platforms.

Third Party Embed
  • IFrame: User can preview

  • Wordpress

  • Feedback Button

  • Pop-Up

  • Light-Box

  • Source Code

Preview: In the all above options users have an option to preview the form so that it helps them understand how it will look on the selected website.

Customize the form: A customize button is available in (Feedback and light box embed options), from where user can customize the following:

  • Form Heading Title

  • From Dimensions (Height and Width)

  • Title Bar Style: Title with background color, With no background color,

  • Title background color update option

  • Title text color update option

  • Show a checkbox, to ask users, if they like to open the form on page load (Do you like to open the form on page load?)

On selecting the chosen platform it should show the code to embed and copy button so that users can easily use the code simply clicking on a single button.

8. Integrations:

Integrations

KiteSuite forms provides users an option to easy integration with following to efficiently save form responses in the respective platforms.

Easy Integration
  • Google Sheet

  • Google Drive

  • Google Calendar

  • Dropbox

  • Onedrive

  • Salesforce

  • Mailchimps

Link Account:

Users can simply select an integration type and enable it by providing the respective platform's credentials. Once the integration is complete users can proceed further adding the details how they like to save form data into the selected platform.

Edit/Delete Integration:

Anyone who has form permissions can make changes into the integration and can delete the previous integration or add new.

9. Conditional Logic:

Users should have the option to create conditional logic into the form to gather detailed project requirements and automate certain actions according to set rules by the form admin.

9.1. According to KiteSuite Fields Data:

If users select any of the item fields:

Status: (Show all the added field name here where user can select any field)

User should have option is (Is Equal To, Is Not Equal To, Contains, Does not Contain, Starts With, Doesn't Start With, Ends With, Doesn't End With, Is empty, Is filled, Greater than, Less than).

Target: Weather to target a value or other field. (If a Value user can enter an input value, in another field it will show a list of all the form fields where the user can select any).

9.2. Show Hide Fields:

Upon selecting the "Show/Hide Field" feature, I should be presented with options to define the condition under which the field visibility will change.

It will show all the added field name here where user can select any field

State: Users should select any of the given options (Is Equal To, Is Not Equal To, Contains, Does not Contain, Starts With, Doesn't Start With, Ends With, Doesn't End With, Is empty, Is filled, Greater than, Less than).

Target: Weather to target a value or other field. (If a Value user can enter an input value, in another field it will show a list of all the forms where users can select any).

(If, state, Target are the>> input fields and multiple input logic can be added to do a certain task).

If more than one input box is added, it should show an extra action button where the user can select if they want all or any of the input fields to be true to perform the given task.

Do: Here users can choose what they should do (Hide, Show, Hide multiple, Show multiple).

Fields: If selected, a single user should be able to select any of the five fields of the form multiple if the selected user can select more than one field.

Note: Multiple actions can be performed as per the selected option with "+" icon to add more fields into the option what all want it to do.

Save: Upon saving the change the action should perform as per the added condition.

There should be an option for users to edit the conditions as per their preferences.

Users should also be able to manage the added conditional logic by accessing the settings, allowing for actions such as deleting, cloning, or disabling the condition for the form.

9.3. Require/Not Required Field:

Follow the same steps as show hide fields here user will have an option to do the following:

Select an option to define conditions under which field requirements or input formats will change. The condition should include the ability to select any existing field from the form.

Users should be able to specify the state of the condition, such as "Is Empty/ Is filled" to trigger actions based on the field's current status.

Users should have the option to set conditions based on the selection made in another field. (It includes: Require Don’t Require Require Multiple Don’t Require Multiple)

If any of the specified conditions are met, users should be able to define actions to setting a mask or changing the requirement status of a field.

(For example, if the "Phone Number" field is empty, the "Date" field or change the requirement status of the "to other" field.)

Required Field

10. Theme options:

From theme setting users can utilize predefined theme options to use into forms to make it more appealing and user friendly.

Users can select the "Themes" section theme option under “Form design”.

Users should have the option to select from pre-built themes labeled as "White Theme" and "Black Theme".

All themes are distinct in text color options that are suitable for the chosen theme background (e.g., light text for dark backgrounds, dark text for light backgrounds).

Users can select from a variety of themes.After selecting a theme, the form design automatically updates to reflect the chosen theme's colors and background. Users can preview the form with the selected theme before finalizing their choice. Users have an option to switch between different pre-built themes at any time while creating or updating the form.

11. File upload options:

All users have an option to set conditions on file upload options whether to accept single or multiple docs so that they can easily manage and accept responses.

Users should see a clearly visible toggle button on clicking on the file upload field in the form and the button should be aligned with the toggle buttons added into the KiteSuite application. By default it is set to accept multiple files and users can set it to receive a single button simply by clicking on the button.

All users have an option to allow the form's file/image field to accept single or multiple docs so that I can easily manage and accept responses as per my preference.

12. Thank you page:

There is an option for users to add a thank you page after form response is submitted, users have an option to add, edit the thank you page and update UI as per their preference.

When the thank-you page is enabled, users can customize the content and UI of the page to keep the message relevant.

The thank-you page customization options includes the following:

Icon or body image: Users can add text, images, links, to personalize the message. Adjust the layout, colors, fonts, and other visual elements to match the branding or style preferences for each form.

Thank You Page

In the Initial case the default from pre-designed thank-you page is shown and users can custom design the page using the built- in editor.

Users have an option to update the thank-you page content or design at any point after form creation, with changes being applied seamlessly without disrupting existing form submissions.

13. Powered by KiteSuite:

All KiteSuite forms will include a powered by KiteSuite text below the form. And to remove this message users should have an active paid plan.

14. Layout options:

Users have an option to set custom form sizes as per their preference. Following fields, users can update from the advanced design feature by selecting the layout option.

Set custom Width (In PX):

Users should be able to set width easily by specifying its size in pixels with incremental and decrement icons.

Set custom Vertical Padding (In px):

Users should have an option to set spacing above and below the easy form field.

Set Horizontal Padding (In px):

Users can set spacing on the left and right sides, and the form fields should fit in the form with left-right spaces.

Input area Width (In PX):

Users can set input area width to easily manage the form.

Form corners: Users can choose from different options (Rounded, fully rounded, rectangular) how they like to keep their form's layout.

Line Layout:

Users can select the option to set "Line spacing, Horizontal and vertical padding spacing" to easily control the space between text and elements.

Line spacing:

Range selector where users can select spacing between different form fields from (0-40 px). The spacing between form fields should update accordingly in real-time.

Vertical padding:

Users can select the option to increase or decrease the space between fields top and bottom edges.

Horizontal padding:

Users can select the option to adjust spacing to all forms fields left and right edges.

Create New Page:

Users can select the option to add more pages into the form by clicking on the add page button below the previous page. There is an option for users to move fields from one page to another. Other functionality will work the same as the default page.

15. Form Background design:

Page image and form background image include 3 different options with 9 conditions:

Options:

Repeat, Fixed, Covered, Conditions

Background Image Fixed, Cover, No Repeat:

In this case, the background image remains fixed and covers the full page while the form scrolls.

Background Image Fixed, Cover, Repeat:

The background image remains fixed, covering the entire form without repeating but if the area is too large it wants to repeat and the area will remain solid color.

Background Image Fixed, No Cover, No Repeat: Fixed image only covers the actual size of the image not the entire form.

Background Image Fixed, No Cover, Repeat: The background image remains fixed to its actual size and repeats multiple times to fill the remaining space.

Background Image Not fixed (Scroll)

Cover, No Repeat: The background image scrolls with the form and covers the entire form area without repetition.

Background Image Scroll, Cover, Repeat: The background image scrolls with the form and covers the entire form area while repeating the image.

Background Image Scroll, No Cover, No Repeat: The background image scrolls with the form, doesn't cover the entire form and will remain static (won't repeat).

Background Image Scroll, No Cover, Repeat: The background image will repeat multiple times, scrolls with the form, doesn't cover the entire form.

No Fixed Background Image, No Cover, No Repeat: In this case, background image will scroll and it doesn't cover the entire form area and not repeat.

16. Advance Design

Users can set custom sizes of forms as per their preference.

Advance Design

Set custom Width (In PX):

Users can set width easily by specifying its size in pixels with incremental and decrement icons.

Set custom Vertical Padding (In px):

Users can set spacing above and below the easy form field.

Set Horizontal Padding (In px):

Users can set spacing on the left and right sides, how the form fields should fit in the form with left-right spaces.

Input area Width (In PX):

Users can set input area width to easily manage the form.

Form corners:

Users can choose from different options (Rounded, fully rounded, rectangular) how they like to keep their form's layout.

Line Layout:

Users can set "Line spacing, Horizontal and vertical padding spacing" to easily control the space between text and elements.

Line spacing: Range selector where users have an option to select spacing between different form fields from (0-40 px). The spacing between form fields should update accordingly in real-time.

Vertical padding: Users have the option to increase or decrease the space between fields top and bottom edges.

Horizontal padding: Users should have an option to adjust spacing to all forms fields left and right edges.

Create New Page:

Users have an option to add more pages into the form by clicking on the add page button below the previous page. There is an option to move fields from one page to another. Other functionality will work the same as the default page.

17. Payment:

Users should have an option to integrate forms with PayPal, Stripe, and Authroize.net to easily receive payments to sell products, services, and accept donations.

Users can accept payments and integrate their forms with PayPal, Stripe, Authrize.net. It includes the payment options including credit/debit cards and PayPal account transfer, and direct bank transfer. In the Form Builder, users can select the required payment gateway to integrate among the payment options. To connect with their required provider, users should find a connect button to enter their payment providers credentials.

Users can choose a preferred currency for transactions, with automatic conversion handled if necessary. Payment types supported include product sales, subscriptions, fixed amounts, and donations. Within Payment Settings, users should be able to toggle between Test Mode and Live Mode to simulate transactions or accept live payments.

Users should have the option to customize the customer email type for PayPal notifications.

Users should be able to toggle options such as multiple product selection, displaying the total price on the form, and choosing authorization-only mode.

For order fulfillment, users should have the option to select pickup or shipment. If shipment is selected users are required to enter the shipping address.

Users should be able to select the checkout language from the drop-down. Users should be able to choose between using decimal points or commas for numerical inputs.

Users should be able to choose whether to send PayPal-generated receipts to customers. If selling products or subscriptions, users should be able to add product or subscription items.

Product:

Create Product: For each payment option, users should have the option to add a product image (optional).

Users can add, edit, and delete product names and images. Users have an option to set quantities with increase and decrease icons.Users also have an option to set currency for each product and can add colors options for products for each product. Size option is also available where users can add sizes (e.g., T-shirt sizes, shoe sizes) and quantities for each product.

Product

Setting:

Single Column, double columns, three columns.

Toggle buttons to:

Enable Minimum Order Amount (To set the minimum order amount.

Enable Search:

To easy search product in form by its name

Enable Sort:

Allow your users to sort products on the form according to their name or price.

Enable Categories:

Separate products into different categories>> if enabled in this case users can create different categories by entering names into the input field. There is + button on click it will show all the product name from there user can assigned theme to selected category.

Delete button:

To delete the category.

Coupon:

To create coupons: From here user can add coupon name, set Limit, and setting expiry data (if selected there will be an option for user to add date from calendar), or coupon use limit(How many times a coupon can be applied)>> if this one is selected user can enter numeric value

Discount type selection: By percentage (if selected user can enter percentage) or fixed amount (if selected user can enter amount in the selected currency).

Discount available on: From here users can select any or all from those they want to provide the discount.

Apply discount to: Product, shipping, or subtotal. On clicking on the save button the coupon will be created. It will show in card with the following details:

Coupon name with discount type Product name, Expiry date or number.

Users have the option to edit the coupon: Users can also disable, duplicate, or delete the coupon. Users have an option to create multiple coupons as per their choices.

Shipping toggle:

If shipping is available on the products or not. If yes: It will include the following details. Including charge based on, per product or per transaction.

Per Product:

If product is selected show three columns with option to enable weight value (product name, primary cost, additional cost) if weight value is enabled show an additional column (product name, primary cost, additional cost, weight in KG (for all the other countries except USA and for USA it is in LBS).

Per transaction:

If per transaction is selected, users have an option to add a flat charge for the shipping amount. Users can update the text shipping option text.

Tax:

Base tax rate (user can enter tax in percentage between 1 to 100%).

Exempted Products:

Show all product list from there user have option to select any of the given product where they don't apply tax. Set tax option according to user location (User can selected based on country or by locality). If a country is selected in this case it will show a country list where users can add tax for each country individually. If location is selected: In this case it will show three columns with Address, amount

Invoice:

Toggle button to enable/disable invoice option and If enabled it will have the following options : Business name, Phone number, Email, Address, Additional Note

Logo:

Upload image option to add company log into the invoice.

Preview:

User also have an option to preview the invoice

Attachment to email:

Toggle to email attachment. If this option is selected here, users can add email addresses.

Generate Invoice number:

It will create an extra field into the form to add invoice number.

Did this answer your question?