---
title: Feedback Form
slug: feedback-form
docTags: 
createdAt: 2024-05-14T14:23:18.994Z
---

## Overview

This block allows us to integrate the Hyper Portal forms into your website so that your visitors can communicate with you by filling out some fields and press the Submit button.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ybtKTpxIVSJ0iMQFcgo9v_image.png" size="44" width="343" height="53" position="center" caption="Feedback Form block - Page structure" alt="Feedback Form block - Page structure" darkWidth="343" darkHeight="53" showCaption="true"}

## Sample Feedback Form Block

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/bOnh3tGIc5rMWcNlsNgd__image.png" size="50" width="474" height="557" position="center" caption="Feedback Form - Preview" alt="Feedback Form - Preview" darkWidth="474" darkHeight="557" showCaption="true"}

## Settings

You can connect any Hyper Portal form to this block, all you need is to know the form's ID. 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/G3DnTlxMm88Gf2HSPqrre_feedback-form-id.jpg" size="52" width="392" height="410" position="center" caption="Feedback Form - Hyper Portal Form ID" alt="Feedback Form - Hyper Portal Form ID" darkWidth="392" darkHeight="410" showCaption="true"}

### Find Form id

To find the Form id, navigate in HyperPortal to : Templates > Forms.

![Feedback Form - Form id](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ROA9ngCk99tDA2jPSSNOG_image.png "Feedback Form - Form id")

Click on the "**pencil**" icon to view/edit the form specifications.

The form is visible as a .json file, to find the form id, navigate to the bottom of the file and find "**definitionId**".  This is the id you need to fill out in de block id field.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/pzf0xL41X-SruCNsRAlZv_image.png" size="44" width="284" height="84" position="center" caption="Feedback Form block - definitionId settings" alt="Feedback Form block - definitionId settings" showCaption="true"}

### Background color

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/kxOejAQ8ZmWKfjZM3q2vq_image.png" size="50" width="331" height="78" position="center" showCaption="false"}

Set the background color of this block/section.

### Font color

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/tnpWDybrljJrkPYyitZuS_image.png" size="50" width="335" height="70" position="center" showCaption="false"}

Set the text color here.  Titles, subtitles and content will all use the same color setting

### Post Submit redirect button text

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/7ZhAYE927sxWA8iEF2AOw_image.png" size="50" width="339" height="77" position="center" caption="Feedback Form block - Button text" alt="Feedback Form block - Button text" showCaption="true"}

This is the text which will be displayed on the Submit button

### Post submit redirect button style

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/KJu1GDRlMwAAEb9lAED6g_image.png" size="50" width="343" height="334" position="center" showCaption="false"}

Pick any of the 6 available button styles

### Post submit redirect URL

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/2gRX-0HgRZrFyd8JNCIWR_image.png" size="50" width="345" height="83" position="center" showCaption="false"}

### Post submit close (redirect) automatic

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/8ICkWWHuFRA6zzCwFaZQb_image.png" size="50" width="340" height="168" position="center" showCaption="false"}

Set this to redirect automatically after form completion, add timeout in seconds.



## Text

This text is displayed in the left column

### Prefix

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/MImiQGURaMyu1rN834PmS_image.png" size="50" width="319" height="75" position="center" showCaption="false"}

Small prefixx/title shown above the main title

### Form title

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/jkzJJPdKWLtlNfLqZzcC6_image.png" size="50" width="322" height="75" position="center" showCaption="false"}

This is main title 

### Form description

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/QK41TY-plaUD3EXHhU00y_image.png" size="50" width="323" height="165" position="center" showCaption="false"}

This is the main content, visible underneath Prefix & Title

### Success Title

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/9k4nqtbrRmXEyZ4At_lex_image.png" size="50" width="326" height="79" position="center" showCaption="false"}

This is the title that will be displayed after succesfull form submit

### Success message

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/TsIKUdQDWpUP7DFcWWuPF_image.png" size="50" width="320" height="77" position="center" showCaption="false"}

This is the text/content that will be displayed underneath the title, after form submission

### Submit button text

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/b1twPP_Bd_JKb9Za3VhJR_image.png" size="50" width="327" height="74" position="center" showCaption="false"}

This is the text visible on the submit button.

### Required field text

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/6RqvGfHqaGodhxoeqAX4n_image.png" size="50" width="326" height="81" position="center" showCaption="false"}

This is the text that will be shown when a required field is not filled out

### Submit failed message

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/gLelID0_4MwFyeZA4DtYZ_image.png" size="50" width="326" height="81" position="center" showCaption="false"}

This text is shown when form submission failed.

### Title error message

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/EEIgNCUSKS0FWBoSwaZho_image.png" size="50" width="331" height="78" position="center" showCaption="false"}

This title is shown above the Failed Submiy message



## Buttons

### Description buttons align

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/X6mrh_QaUx83QW3Rd7MxI_image.png" size="50" width="342" height="219" position="center" showCaption="false"}

Align button description to the Left, Centre or Right

### Description buttons align direction

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ea5Citotvq9lW16Y43RTR_image.png" size="50" width="335" height="164" position="center" showCaption="false"}

Choose to display the button description Horizontal or Vertical

### Description Buttons

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/hAKivumtX_EI0OfpnvTI8_image.png" size="50" width="335" height="387" position="center" showCaption="false"}

Click "**+ Add**" to add a new button.   Pick any of the 6 available **button styles**, add **description text** to be displayed on the button and add an **internal** or** external url**.

Add as many buttons as needed.

In case you need help with setting up your form, please don't hesitate to **contact** our **support** team.