Using Forms with Gutenberg

The plugin includes a native Gutenberg block for embedding signup forms in the WordPress block editor.

Adding the Block

1. Open a page or post in the block editor
2. Click the + inserter (or type /)
3. Search for “SSE Signup Form” or browse the Widgets category
4. Add the block to your page

Selecting a Form

When you first add the block, you’ll see a placeholder with a dropdown that says “Select a form”. Choose from any active form you’ve created under SSE Emails > Forms.

You can also change the selected form at any time via the block sidebar (Inspector Controls):

1. Select the block on the page
2. In the right sidebar, under Form Settings, use the “Select Form” dropdown

Once a form is selected, you’ll see a live server-side preview of the form directly in the editor — matching exactly how it will look on the frontend.

How List Assignment Works

Lists are configured on the form, not on the block.

When you create or edit a form under SSE Emails > Forms, there’s a “Linked Lists” section where you check which lists that form subscribes people to. The Gutenberg block simply displays a form — it inherits all of that form’s settings including:

• Which lists subscribers are added to
• Which fields are shown (email, first name, last name)
• The style preset and custom colors
• The success message
• Button text

This means:

• To change which list a form adds subscribers to, edit the form at SSE Emails > Forms > Edit, not in the block editor
• To use different lists on different pages, create separate forms (each linked to different lists) and use the appropriate form in each block
• The block’s only setting is which form to display

Example: Different Forms for Different Pages

Say you have a “Newsletter” list and a “Product Updates” list:

1. Create Form A — name it “Newsletter Signup”, link it to the Newsletter list
2. Create Form B — name it “Product Updates Signup”, link it to the Product Updates list
3. On your blog page, add the SSE block and select Form A
4. On your shop page, add the SSE block and select Form B

You can also link a single form to multiple lists. If Form A is linked to both Newsletter and Product Updates, anyone who subscribes through Form A joins both lists.

Block Alignment

The block supports Wide and Full alignment options via the block toolbar, so it can span the full width of your content area or page.

Using Multiple Forms on One Page

You can add multiple SSE Signup Form blocks to the same page. Each operates independently — different forms, different lists, separate submission handling. There’s no conflict.

Popup Forms in Gutenberg

Popup forms don’t need to be added via the block editor — they inject themselves automatically via the popup settings configured on the form. However, a form can be both an inline block and a popup. If you configure a form as a popup and also embed it as a block, it will appear inline on the page and also pop up according to its trigger settings.

If you want popup-only behaviour, don’t embed the form as a block — just configure it as a popup under SSE Emails > Forms > Edit > Popup Settings.

Shortcode Alternative

If you prefer shortcodes or are working in the Classic Editor, you can always use:

    

        

            
            
            

                
            
        

        
            Let me in!
            
        

        
        

            
        

        
        

        

    

    

        

            
        
        
We'll contact you soon!
    

Replace 1 with your form’s ID. The shortcode renders the exact same form as the Gutenberg block.

Troubleshooting

Block shows “Select a form” but the dropdown is empty You haven’t created any active forms yet. Go to SSE Emails > Forms > Add New first.

Preview looks different from the frontend The editor preview uses server-side rendering and should match closely. Minor differences can occur due to theme styles in the editor. The frontend rendering is authoritative.

Form doesn’t appear on the page Check that the form’s status is set to Active under SSE Emails > Forms. Inactive forms render as empty.