Blocks

The Greyd Forms plugin comes with many blocks to let you build flexible, dynamic forms in the block editor. Learn how each block works, what it can do, and how to customize it for your forms.

Dynamic form values

In most text fields of the Greyd Forms blocks there’s a button in the block toolbar called Dynamic form values. It’s the one right in front of the bold styling, showing two circles inside the outer circle. If you click on this button and it invertes the color and you click into the label again, it shows a selection of all available fields in your form. If added, it will show the value of the field in that label.

Screenshot of Dynamic form values button clicked and field selection shown, explained in the paragraphs above and below.

The dynamic form values are heavily used in the Mathematical field block, where you can create custom calculations based on values entered through a form. In our form patterns, you can find the “Mathematical Annuities Calculator” pattern to look at as an example of how to use dynamic form values.

More in this section

  • Checkbox

    The Checkbox block in Greyd Forms allows you to add a single checkbox element to your form. Once inserted, you can directly edit the label text within the editor. For the label, default styling options (bold, italic, other inline styles) are available. You can also set links or triggers. Settings Within the General settings, you […]

    Read more

  • Conditional fields

    The Conditional fields block in Greyd Forms allows you to create dynamic form behavior by conditionally displaying or hiding content based on user input. This block serves as a wrapper for other form blocks. Any content placed inside it will appear or disappear live on the frontend, depending on the form values entered by the […]

    Read more

  • Dropdown

    The Dropdown block in Greyd Forms allows you to insert a dropdown field into a form. After placing the block, you can immediately edit the label and placeholder text directly within the editor. While there are no styling options for the placeholder, the label text can be set to bold, italic or other inline styles, […]

    Read more

  • Hidden field

    The Hidden field block in Greyd Forms allows you to transmit values invisibly through a form. These values are not displayed in the frontend but can be used for backend processing or integrations. This is especially useful for tracking data like campaign parameters or quiz results. Settings In the General section, you can change the […]

    Read more

  • Image panels

    The Image panels block in Greyd Forms allows you to add selectable image tiles to a form. These function similarly to radio buttons. Each tile includes an image and a label and is organized using a parent-child structure, where the parent block manages overall field behavior, and each child block represents an individual selectable panel. […]

    Read more

  • Input field

    The Input field block in Greyd Forms allows you to insert a general input field into your form. It supports various input types such as text, email, link, date, and number. Once added to the form, the block provides a flexible set of configuration and styling options for adapting it to a wide range of […]

    Read more

  • Live survey

    The Live Survey block in Greyd Forms enables you to embed a real-time survey into a form. It functions as a block variation of the radio buttons block and uses a parent-child structure. In the frontend, users can select an option and immediately see a visual progress or results bar reflecting how others have voted. […]

    Read more

  • Mathematical field

    The Mathematical field block in Greyd Forms allows you to perform advanced calculations within your forms. It supports both static values and dynamic input from other fields, making it ideal for use cases such as cost estimations, score calculations, or conversions. After inserting the block into the editor, you can immediately build your desired formula […]

    Read more

  • Multistep container

    The Multistep container block in Greyd Forms allows you to create multistep forms within your layout. It uses a parent-child architecture where each step of the form is represented by a child block. You can easily add or remove steps directly in the editor. Each step can contain any type of field or block, giving […]

    Read more

  • Password

    The password field is used in forms where users can be created or registered. It is only relevant when the form operates in a mode that allows user management. Settings Under the General section, you can change the automatically populated field name that will be used when the form is submitted. Additionally, there is an […]

    Read more

  • Radio buttons

    The Radio buttons block in Greyd Forms allows you to add a group of selectable options to a form. After inserting the block into the editor, you can immediately modify the label text directly within the interface. This block has a parent-child structure. The parent block defines the group settings, while each individual option is […]

    Read more

  • reCAPTCHA

    The reCAPTCHA block in Greyd Forms integrates a Google reCAPTCHA into the frontend of your form to help prevent spam submissions. Before using the block, a reCAPTCHA site key must be added under Forms → Settings. If no site key is defined, a warning message will appear in the editor indicating that the reCAPTCHA cannot […]

    Read more

  • Slider

    The Slider block in Greyd Forms allows users to select a numeric value by dragging a handle along a visual scale. After inserting the block into a form, you can directly edit the labels that appear before and/or after the slider in the editor interface. Settings In the General section, you can customize the automatically […]

    Read more

  • Submit button

    The Submit button block in Greyd Forms allows you to insert a submit button into your form. After placing the block, you can directly edit the label within the editor, if you want it to be different from “Submit” or the translation of the website’s language, if that is available. Settings Under the Size section, […]

    Read more

  • Upload

    The Upload block in Greyd Forms allows you to insert a file upload input field into your form. After inserting the block, you can edit both the label and the placeholder text directly within the editor interface. Settings Under the General section, you can adjust the automatically prepopulated field name that will be submitted with […]

    Read more

Last updated: