> For the complete documentation index, see [llms.txt](https://kb.craftformswp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.craftformswp.com/documentation/form-building/create-form/blocks.md). # Blocks Custom CraftForms Gutenberg blocks ### Overview There are composite blocks (they have "Field" in their name) and simple blocks. A composite block is made of several blocks, usually a label, the input and an error message. You can select and style each of them on its own. A simple block is a single block. Use one when you don't need a label or an error message, for example a hidden text input. When you edit a form, the inserter offers all CraftForms blocks plus a few core blocks (paragraph, heading, image, list, separator, spacer, group, quote). On other pages and posts, only **Catalog Search** and **CraftForms Order Summary** can be inserted: everywhere else you place the whole form. ### The full list of blocks Blocks marked `PRO` need CraftForms PRO. On the free version they show "(PRO)" after their name, and a form that contains one can't be used: visitors see a message instead of the form. **Form** | Block | What it's for | | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | | [Form (CraftForms)](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/form-block) | The form itself: holds all other blocks. It's added for you when you create a form. | **Fields** | Block | What it's for | | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | [Text Input Field](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/text-input-field) | One line of text: text, email, number, password, phone, URL or hidden. | | [Textarea Field](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/textarea-field) | Several lines of text. | | [Select Field](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/select-field) | A dropdown. | | [Radio Field](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/radio-field) | Pick one option, as radio buttons, cards or swatches. | | [Checkboxes Field](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/checkboxes-field) | Pick several options. | | [Booking Datepicker Field](/documentation/form-building/create-form/blocks/booking-datepicker-field.md) `PRO` | A booking calendar for date ranges, single dates or time slots. | | [Range Slider Field](/documentation/form-building/create-form/blocks/range-slider-field.md) `PRO` | A slider with one or two handles. | | [Color Picker Field](/documentation/form-building/create-form/blocks/color-picker-field.md) `PRO` | A colour picker with swatches. | | [File Upload Field](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/file-upload-field) `PRO` | Lets visitors upload files. | | [Signature Field](/documentation/form-building/create-form/blocks/signature-field.md) | A pad to draw a signature. The signature is saved as an image and can go in PDFs and emails. | | [Repeater Field](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/repeater-field) `PRO` | A group of fields visitors can add again and again, like one row per guest. | **Simple blocks** | Block | What it's for | | ------------------- | ------------------------------------------------------------------------ | | Text Input (Simple) | A text input without label or error message, for example a hidden field. | | Label (Simple) | A text label. | The other simple blocks, like Select (Simple), Textarea and the option blocks, can only be added inside their field. **Buttons and messages** | Block | What it's for | | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Submit Button](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/submit-button) | Sends the form. | | Add to Cart | For WooCommerce product forms: adds a Quantity field and an **Add to Cart** button in one row, which wraps on narrow screens. Once inserted, it turns into a group with those two blocks, which you can edit. Needs PRO and WooCommerce to add products to the cart. | | [Notification](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/notification) | Shows the success or error message after sending, as a toast or inline. | | [InfoBlock](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/infoblock) | Shows live content from the form, like a field value or a price. | **Payments and bookings** | Block | What it's for | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | [CraftForms Payment](https://kb.craftformswp.com/documentation/form-building/create-form/blocks/payment-block) `PRO` | Takes online payments with the form. | | [CraftForms Order Summary](/documentation/ecommerce/orders/order-summary.md) `PRO` | Shows an order on the "thank you" page: status, total, booking dates. Can be placed on any page. | | [Catalog Search](/documentation/ecommerce/catalog/catalog-search.md) `PRO` | Lets visitors pick dates and see which of your booking items are free. Can be placed on any page. | **Interactive elements** Elements that react live to the visitor's choices. See [Interactive Elements](/documentation/form-building/create-form/blocks/interactive-elements.md). | Block | What it's for | | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- | | [Product Image](/documentation/form-building/create-form/blocks/interactive-elements/product-image.md) | Shows the image that matches the chosen options, with thumbnails and zoom. | | [Chart](/documentation/form-building/create-form/blocks/interactive-elements/chart.md) `PRO` | A live pie or donut chart of field values. | | [Value Presets](/documentation/form-building/create-form/blocks/interactive-elements/value-presets.md) `PRO` | Buttons that fill several fields at once, like a "Weekend Package". | | [Ambient Scene](/documentation/form-building/create-form/blocks/interactive-elements/ambient-scene.md) `PRO` | A scene whose areas change with the chosen options. | | [Image Cropper](/documentation/form-building/create-form/blocks/interactive-elements/image-cropper.md) `PRO` | Lets visitors crop, flip and filter an image. | | [Layered Image](/documentation/form-building/create-form/blocks/interactive-elements/layered-image.md) `PRO` | Stacks image layers that change with the chosen options. | | [Picture Frame](/documentation/form-building/create-form/blocks/interactive-elements/picture-frame.md) `PRO` | Draws a frame and mount around a picture. | Blocks for email and PDF templates, like Order Items and All Form Data, are covered in [Email Template Blocks](https://kb.craftformswp.com/documentation/email-templates/create-email-template/email-template-blocks). The QR code and barcode block for PDFs has its own page: [QR Code / Barcode](/documentation/pdf-templates/create-pdf-template/qr-code-barcode.md). ### Help popup next to a label A field can have a **?** button next to its label that opens a short explanation in a popup: what a measurement means, how to choose a fabric, a link to a size guide. 1. Select the field (or its Label block). 2. In the block settings, open **Help popup** and write the text in **Content**. Basic HTML works: links, bold, lists and images. 3. Save the form. The **?** shows next to the label in the editor and on the page. Visitors click the **?** to open the popup and close it with the **×**, the Esc key or a click anywhere else. In browsers that support it, the popup opens next to the button; in others it opens in the middle of the screen. Fields inside a Repeater get their own popup in every row. To remove the button, empty the **Content** box. ### Select placeholder A Select field with no **Default Value** starts on an empty choice, "— Select —". To show your own text instead, like "Choose a colour", fill in **Placeholder** under the default value. The placeholder can't be sent as an answer, so a required Select still asks the visitor to choose. ### Form Field <-> Variable This is an extremely important concept: each form field is represented by a variable, which can be used in [Smart Variables](https://kb.craftformswp.com/documentation/form-building/create-form/form-settings-post-context/smart-variables), the [Price Formula](https://kb.craftformswp.com/documentation/form-building/create-form/form-settings-post-context/price-formula) and InfoBlock to display the field's value. ![A field's name in the block settings and in its error message block](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2F4U4W5rXJaPAXpcPoSy71%2FSCR-20260326-lmbf.png?alt=media\&token=9f504702-3009-48f1-89df-84450991a501) In the screenshot above, the selected block has the field name "**pages**", and the error message block uses it in "{{error.**pages**}}". The same name "**pages**" can be used in the price formula or in Smart Variables expressions, like in this example: ![The field name used in a price formula](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FMqdOIULL0lp33USwAKhf%2FSCR-20260326-lnox.png?alt=media\&token=15031bc2-759e-41ed-93e2-c041f2d370d0) **Field names are the most important setting of form field blocks. They must be unique within the form.**