# Introduction

A Gutenberg form builder

![Form builder in Gutenberg](/files/-MVpvtnUrEYma5tCHRTp)

Formello is a **lightweight form builder block** for WordPress.

It provides an easy to use **Gutenberg block** to create form right inside the editor, in a simple and easy to use way. You can easily create forms directly on your post or page. No shortcode needed, no complex interface, no external dependencies.

Formello can be easily integrate in any theme with minimal effort. Its lightweight CSS (2kb) add few rules to simply display your form and give some options (label on side, bolded label, label position...). Your form will match the theme style, so you must do no configuration at all.

Formello will give you out of the box validation, both server side and frontend, spam protection with Google reCaptcha(v2 and v3 invisible) and honeypot protection.

You will start collect feedback and lead in less than 5 minutes, storing your data in a secure way and provide an easy to use notification for your user and for you.

### More

* [Support](https://wordpress.org/support/plugin/formello/)
* [Official site](https://formello.net)
* [WordPress repository](https://wordpress.org/plugins/formello/)


# Installation

You can install Formello in two ways: from inside WordPress or manually uploading the zip file.

### Install from WordPress

From your Dashboard, go to **Plugins > Add New**.

![](/files/-MVrqg5OVdbtDcR_64cq)

Ypu can now input on the search box on the right "**Formello**" and click on "install" button.

Once you activate the plugin you will see a new **form block** inside the editor.

![](/files/-MW3n3tuENXHj9_bSoqH)

### Uploading a zip

If you prefer, you can download the **.zip** file from the [official site](https://formello.net) or from the WordPress repository by clicking [here](https://wordpress.org/plugins/formello/).

Then you need to upload to your site. From your admin dashboard go to **Plugins > New** and click on **Upload Plugin**.

![](/files/-MVrqAeAyeuvUJ09jSNT)

Choose the zip file you have downloaded and click on **Install Now** button.

![](/files/-MVrqEiFobe92ZpbZAnr)


# Usage

Learn how to create your first Formello form in WordPress

Once installed Formello, you will see a new menu on your dashboard.

![Formello menu](/files/-MkNB0wxqfilW-j799mu)

From this menu you can manage all your forms, create new ones, manage settings, view submissions and addons.

![Formello Submenu](/files/-MkNBrdr8dew89nXf9ci)

To start reating a y goes to "Add new" and a new empty screen will be created. From there you can simply choose  the form block from **block inserter** or typing `/form` in the editor.

Once a new form is added you have multiple choices:

* start with a blank form
* choose one of the form presets
* open library where you can choose from a variety of forms for multiple use cases.

![Add form from inserter](/files/-MkNFCMmIz1xhSI7gIZe)

Once you have your form in place, you can manage options or arrange and create fields. There are several blocks with many options:

* [Form](/usage/form): manage form actions, form general settings and display options.
* Input field: manage options for different input type (text, email, number, tel, date, range).
* Select field: allows you to create a dropdown select for choices or even multiselect.
* Textarea: allows you to display a large inpute field.


# Form

Usage of form block

To select form options you need to select the form block. There are different ways to select form block: the simplest is to click the form icon near input block.

![Select form block](/files/-MkXDVHL0B9LeVO5rJ4M)

Once you selected a form you will see in right panel all the available options.

![Form options](/files/-MkXEGj4JZ48DJKJ_Ise)

You can choose to store submissions, that will be available in [forms submissions page](/admin/submissions).

If you want to enable reCaptha you can simply switch the toggle on.

You can choose to hide form after submission. 

You can provide message for success and error. In case no one is provided, the default ones will be displayed.

![Advanced form options](/files/-MkXF-uX7MOb7mcwJhRs)

In the advanced form options you can choose to display label on field side, to show bolded label or enable debug.


# Input field

Input field block

Each input field is a block that has its own options. 

The most common are displayed directly on block controls. You can simply enable or disable the required setting or choose to hide the label.

![Input options](/files/-MkXHKhPZopJVAQIWggL)

All other settings are in the right panel.

You can choose all html valid attribute for each fields. You can see all available attribute here: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text>.

### Basic settings

![Field basic settings](/files/vm0G0R2WPS42ZxhL8osH)

Each field has a basic settings panel. Here you can add:

* **Name**: the name of the form as it will be displayed on submission views
* **Value**: a default value to populate the field
* **Placeholder**: a short hint that describes the expected value of an input field
* **Required**: choose if the field must be filled
* **Enable description**: show additional description

This settings may be different for each field.

### Advanced Settings

![Advanced settings](/files/WFlXFh4GjqjtdoPjZUHb)

In advanced fields settings you will find all additional settings for each fields.

If you want show a custom validation message, you can set it in advanced options. This will override the default ones in [global settings](/admin/settings).&#x20;

You can also add custom CSS class that will be applied to the div container of the field and you can use it in your CSS if you want customize them.


# Button

This block let you create an html button.

You can choose background and text color, choose from 5 different icon and set the position(left, right, center, wide).


# Admin area


# Forms

Page with all your forms

In this page you will see all your forms.

Forms are custom post type that can be published, drafted or deleted and even trashed as normal posts.

This is a centralized page reporting all your forms to help you stay well organized.

![Table of all forms](/files/-MkNGRwfcsvITaSH8R9x)


# Submissions

Page to view all submissions

In the submissions page you can see all submissions sent. An useful badge will display all new submissions.

![Form submissions table](/files/-MkO87DGbIlJg31szXyk)

Clicking on the form name you will see detail page. On the detail page you will have a table that summarize your form submissions.

![Submissions detail table](/files/-MkOB-8iWXfDW5Vzh8-3)

On the admin bar you will see the badge with all new submissions.

There's also a filter on the table to get only the unread submissions. A circle icon will mark all unread submissions.

The table come with **sorting and pagination** to navigate through the records. Also a search box to match a specific submission.

You can also **mark a record with a star** if it's very important and want make it more visible.

![Submission marks](/files/-MkODl6n-nA9WaRaOdQS)

Each submission has its own detail page with all fields and some useful additional data.

![Submission detail page](/files/-MkOEJAi4aehRJmltjuv)


# Settings

The settings page

In this page you can set up all the general form settings.

This involve the **FREE LICENSE** that let you have access to all addons.

You can set **reCaptcha version** with relative site key and secret key.&#x20;

In the messages section you can set up all validation messages for each fields, that can be also overrided by field options.

In the integrations tab you can set up Addon settings.


# Addons

Formello comes with a bunch of addons that expand its functionality.


# Popper

Popup builder

This addon helps you create awesome popup in less than a minute.

Once installed a new menu will appear on the right. From there you can create and manage your popup.

![Popper menu](/files/-MlKhkqZNWcGYz3gai1G)

Once created a new popup you will be prompted to a guided block creation.

![](/files/-MlKii_Faa3inbK2S5s-)

On the inspector controls you will see a Popup tab.&#x20;

Here you can manage the rules to display the popup.

![Popup settings](/files/-MlKjgJu6U9PjMQfzYCn)

By clicking on the big button on the right, a modal will appear. Here you can choose where will be displayed your popup.&#x20;

You can choose where to include your popup and also where to exclude.

So you can enable popup on entire site, for example, but exclude on archive page. This is useful also to display different popup for different post/pages/products and go on.

![Choose display rules](/files/-MlKlUDAV7sSTWDB8fLp)

We have some example popup ready made to create with a simple one-click process.

You can use one of this as starting point and then edit as you want using all blocks as you prefer.

You can add button or also embed a [Formello form](https://formello.net).

![Popup with image on left](/files/-MlKm_i6b-38k9WwS5Jy)

### Popup behaviour

![Popup behaviour](/files/-MlKpTC9QU7yHeD6OwjF)

By clicking on Popper block icon you will see on inspector controls all behaviour settings.

![Popper block settings](/files/-MlKqFHbD1flflMAWoB0)

#### Appearance behaviour

On the appearance section you can choose when a popup should appear.

Available options are:

* Timer: this will display a popup after specified amount of time in seconds.
* On anchor click: will display a popup if you click on selected anchor name. The anchor can be applied to butons in Gutenberg. If the anchor match, the popup will show.
* On target visibility: the popup will appear when the element with the selected anchor will be visible in the viewport.
* On scroll: the popup will appear after the amount of scroll will be reached.
* On exit intent: the popup will appear when mouse go outside of the window. At the moment this will work only on desktop.

#### Close behaviour

You can choose also when a popup will be closed. Available options are:

* Show close button.
* Close popup when clicked outside.
* Close on anchor click: you can add a button with an anchor to close popup.
* Dismiss for recurrent visitors: you can choose how often a popup will be displayed to a visitor.

You have some settings also to change popup appearance, choose icon size, overlay opacity and border radius.


# Inserter

Automagically insert form on posts/pages


# Exporter

Export to Excel

With this addon you can export your form submissions to a file Excel.

The usage is pretty simple.

Once activated the addon, you will see a new link under submissions page title, as shown in the image below.

![The export link](/files/-Mj8N6FXoE2QZCCCJdpD)

By clicking the link you will be prompted to the file download.&#x20;


# Web Hooks


# Mailchimp

Addon to perform Mailchimp action


# GetResponse


# SendinBlue


# MailPoet


# Introduzione

Formello è un plugin per WordPress che ti permette di creare dei form in maniera veloce e visuale grazie alla sua integrazione all'interno dell'editor Gutenberg.

Con Formello puoi creare i tuoi form direttamente all'interno dei tuoi articoli o delle tue pagine, senza quindi interrompere il tuo flusso di lavoro.

Non c'è nessuna strana interfaccia esterna, ma è perfettamente integrato in WordPress. Non avrai bisogno di creare strani shortcode per inserire i tuoi form all'interno del tuo layout.

{% hint style="info" %}
Uno shortcode è comunque disponibile nel caso tu preferisca disabilitare Gutenberg e continuare ad usare il vecchio editor.
{% endhint %}

Non include dipendenze esterne come jQuery e fornisce una validazione sia lato frontend che backend.

Formello può essere facilmente integrato in qualsiasi tema con il minimo sforzo. Il suo CSS leggero (2kb) aggiunge poche regole per visualizzare semplicemente il modulo e fornire alcune opzioni di base (etichetta laterale, etichetta in grassetto, posizione dell'etichetta).&#x20;

Puoi comunque sempre scegliere di modificare gli stili dei form usando le impostazioni di Gutenberg.

Formello vi fornirà una validazione immediata, sia lato server che frontend, una protezione antispam con Google reCaptcha (v2 e v3 invisibile) o hCaptcha e una protezione honeypot.&#x20;

Inizierete a raccogliere feedback e lead in meno di 5 minuti su WordPress, memorizzando i vostri dati in modo sicuro e fornendo una notifica facile da usare per i vostri utenti e per voi.


# Come installare

È possibile installare il plugin in diversi modi. Il metodo più semplice è direttamente dalla dashboard di WordPress.

### Installazione tramite la dashboard dei plugin

* Accedere alla pagina **Plugin → Aggiungi** nuovo nella dashboard di WordPress.
* Cerca "Formello". Quando appare il plugin, seleziona "Installa" e poi "Attiva".
* Formello è ora attivo e funzionante!

### Caricare i file manualmente

Puoi scaricare lo zip contenente i file del plugin dal [repository WordPress](https://wordpress.org/plugins/formello/).

* Scarica lo zip contenente i file.
* Vai nella tua dashboard WordPress e clicca su **Plugin → Aggiungi un nuovo plugin**
* Clicca su **Carica plugin**
* Scegli lo zip scaricato nel passaggio precedente e conferma

### Installare Formello Pro

Se hai acquistato **Formello Pro**, dovresti aver ricevuto un'e-mail di conferma con la ricevuta di acquisto, il nome utente, il link per il download e la chiave di licenza del prodotto.

Fare clic sul link contenuto nell'e-mail per scaricare Formello Pro. I download e le chiavi di licenza sono sempre disponibili anche nella pagina del proprio account.

In alternativa, è possibile scaricare i file del plugin dalla [pagina degli ordini di Lemon Squeezy](https://app.lemonsqueezy.com/my-orders) e caricarli manualmente.

* Scaricare il file .zip del plugin dalla [pagina degli ordini](https://app.lemonsqueezy.com/my-orders).
* Accedere alla pagina **Plugin → Aggiungi nuovo** nella dashboard di WordPress.
* Nella parte superiore della pagina, fare clic sul pulsante "Aggiungi nuovo".
* Nella pagina successiva, fate clic sul pulsante "Carica plugin".
* Fate clic sul pulsante "Scegli file" e navigate fino a dove avete scaricato `formello-pro.zip` sul vostro computer.
* Fare clic sul pulsante "Installa ora" per installare Formello Pro.
* Nella pagina successiva, trovare Formello Pro nell'elenco dei plugin installati e fare clic sul link "Attiva".

Formello Pro è ora attivo e funzionante!

Una volta che il plugin Formello Pro è stato installato e attivato, si consiglia di consultare la [Guida introduttiva](broken://pages/A4FXTqjnEkk1JSbaEsco) per ulteriori informazioni sull'impostazione e l'utilizzo ottimali del plugin.


# Amministrazione

### Gestire i forms

Una volta installato Formello, troverai un menu aggiuntivo a sinistra.

Cliccando sulla voce Moduli avrai accesso ad una pagina con una tabella dove sono elencati tutti i tuoi form.

<figure><img src="/files/hscPmo679RJcnH2m5IaW" alt=""><figcaption></figcaption></figure>

In alto troverai un pulsante per aggiungere il tuo primo form.

La tabella può essere filtrata cercando per il titolo del form, per stato, oppure puoi usare le intestazioni delle colonne per ordinare in ordine crescente o decrescente.

A lato del titolo del form può essere presente un badge con un numero che sta ad indicare il numero di invii non ancora letti.

A destra invece sono presenti delle icone che ti permettono di cancellare o di visualizzare gli invii per uno specifico form.

In alto a destra puoi anche scegliere quali colonne rendere visibili.

{% hint style="info" %}
Al momento non è possibile salvare le preferenze riguardo alla visualizzazione delle colonne. Ma questo sarà possibile non appena verrà integrato Gutenberg 1.17.0 in WordPress.
{% endhint %}

### Impostazioni

Da questa pagina puoi gestire le impostazioni di Formello.

Le sezioni sono autoesplicative:

* Puoi impostare la tua licenza se hai acquistato Formello Pro
* Inserire le chiavi captcha. Al momento sono supportati reCaptha e hCaptcha
* Modificare i messaggi di default per la validazione
* Abilitare il logging. Abilita solo in caso di problemi.
* Gestire gli addons di Formello Pro

### Strumenti

In questa sezione sono disponibili una serie di strumenti utili per gestire Formello.

Nella versione base puoi resettare le impostazioni, esportare ed importare i forms. Utile nel caso tu gestisca molti siti.&#x20;


# Form

Blocco Form Gutenberg

Il blocco form è il blocco base da cui puoi gestire le azioni, scegliere di salvare o meno gli invii, aggiungere captcha e altro.&#x20;

<figure><img src="/files/mSxCVGmB91vnArek1FeP" alt=""><figcaption><p>Blocco Form Gutenberg</p></figcaption></figure>

Subito dopo aver inserito il form ti verrà chiesto di scegliere tra alcuni preset oppure dalla libreria dei template di form.

Puoi anche scegliere di partire da un form completamente vuoto.

Dai controlli del blocco puoi scegliere un template, che andrà a sostituire il tuo attuale form, oppure puoi aggiungere delle azioni al form.

Nella versione base, l'unica azione disponibile è l'invio di una email. Puoi aggiungere anche più di una azione allo stesso form.

Nel pannello a destra potrai scegliere alcune opzioni come attivare il captcha o decidere di salvare i dati inviati nel database.

Nella sezione **Avanzate** ci sono delle impostazioni che necessitano di alcune spiegazioni.

#### Indicatore di campo obbligatorio

È il testo che apparirà a lato dei campi obbligatori e sarà di colore rosso. Puoi modificare il colore aggiungendo una regola `CSS` al tuo tema.

Puoi anche scegliere di non inserire nulla. Di default è un asterisco.

#### Autocomplete

Aggiunge l'attributo [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) al form. Questa impostazione può essere ignorata dai browser.

#### Disable ajax

Formello invia i form tramite chiamate asincrone, ma per il debug potresti scegliere di disabilitare questa impostazione.

#### Abilita il debug

MOstra solo agli utenti amministratori tutte le impostazioni del form, i dati inviati, le azioni da effettuare e il risultato.


# Campi input

Blocchi input Gutenberg