Create a Form with our New Form Editor

The MailPoet 3 Form Editor uses the WordPress Block Editor (Gutenberg).

Quick links:

Form 

Block 

  • Adding a block
  • Creating a custom field
  • Editing a block
  • Removing a block
  • Removing a custom field

  • Form

    Settings

    • Select the list your subscribers will be added to when subscribing through this form;
    • Chose if they're going to see a message after subscribing or be redirected to a new page.


    Styles

    In the Styles tab, you can customize how your form will look like by changing the settings for:

    • Background Color
    • Background Image
    • Font Color
    • Font Size
    • Font Family
    • Input Padding
    • Border Size
    • Border Radius
    • Border Color
    • Alignment
    • Form Padding
    • Success Message Color
    • Error Message Color
    • Close Button Style

    Form Placement

    You can choose to display the form:

    When selecting the form option, you'll be able to see its settings where you can set it to be displayed on all pages and/or all pages and products, or only on specific pages and/or posts from a specific category/tag.

    For specific instructions on how to set up Pop-up and Slide-in forms, please check out this article.

    For the "Shortcode & other" option, you can choose to:

    • Add the form as a Gutenberg block or a shortcode to your pages and/or posts;
    • Add the form as a widget;
    • Get the PHP code to integrate it with your theme or the iFrame version if you want to use it on an external website.

    Custom CSS

    You can style your form components with Cascading Style Sheets (CSS.) When saving your form, all the styles added in this panel will also be saved - there is no need to add these styles to your own theme's stylesheet. 

    MailPoet does not provide support for styling subscription forms. If you need help styling a form, we recommend finding a professional at Fiverr.

    Block

    Adding a block

    Just click on the " +" icon to open the popup with the options to search for a block and manage default and custom fields.

    When expanding a panel ( i.e. Fields), you'll see all the block options for it.

    If you've already created a form using the new editor, you'll see also a panel for the Most used blocks.

    By clicking on an option, it will be automatically added to your form editor as a new block. 

    To see ALL the fields (including custom fields created), you should click on the "Browse all" button and a sidebar will be displayed with all the fields available to be added to your form:


    Creating a custom field

    To create a custom field, you should click on the "+" icon to add a block > Browse all > scroll down to the "Custom fields" section and click on the "Create custom field" option:

    Please note that all custom fields will be visible to your subscribers on the Manage Subscription page.

    If you're using a 3rd-party form plugin, make sure you don't have any custom field created with the MailPoet form editor set up as "mandatory" that is not included in your 3rd-party form. Otherwise, the subscription process and integration may not work as expected. In this case, you should be able to remove the custom field from the plugin by following these steps.


    Editing a block

    When selecting a block, you can edit its settings in the  Block tab on your form editor's sidebar.

    There you have the option to customize the field's Settings, Styles, and add custom CSS via the Advanced tab.

    You can move your blocks up and down by using the arrow buttons.


    Removing a block

    To remove it from the form, simply select the block and click on the 3 dots icon.


    Removing a custom field

    To completely delete a custom field from all forms, you have to first add it to form and then click on the " Delete this custom field" link in the Custom field settings.

    Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.