Subscription Form

Subscription Form

Welcome to the “Subscription Form” documentation. Looking to integrate a subscription form into your website? Our block is designed to collect valuable subscriber information effectively. In this guide, we'll show you how to use the editor to customize your subscription form block.

Step 1 : Open the Editor
Step2 : Edit Subscription Form Content
Step 3 : Customize Form's Style and Colors
Step 4 : Adjust the Layout
Step 5: Preview





Step 1 : Open the Editor


1. Go to Subscription template.
2. Click on "Edit" after choosing your template.

class="flex justify-center items-start h-auto w-auto" alt="">



Step 2 : Edit Subscription Form Content


1. To customize the subscription form's content, simply click the "Edit Form" button.

class="flex justify-center items-start h-auto w-auto" alt="">



2. In the "Form Editor" tab, you can modify the header and email inputs to your liking.
To add more inputs, click on the “+” icon or the "Add Input" button, then select your choice from the pop-up that appears. You can also modify the placeholder text.
To remove an input, simply click on the delete icon.

class="flex justify-center items-start h-auto w-auto" alt="">

class="flex justify-center items-start h-auto w-auto" alt="">



3. To create a two-section subscription form, click on the menu icon and activate the inline toggle.

class="flex justify-center items-start h-auto w-auto" alt="">



4. In the mail input menu, you have the option to customize its settings and validation as needed:


class="flex justify-center items-start h-auto w-auto" alt="">



  •  For the validation, You can make it required or optional, and provide messages for both required and email format validation.
  •  In the settings, you can assign a name that's visible only to you, used as an ID. Additionally, you can choose to show or hide the input label and help text. 


    • class="flex justify-center items-start h-auto w-auto" alt="">



    5. When it comes to the button, you can choose its placement.


    class="flex justify-center items-start h-auto w-auto" alt="">



    6. Then, you can edit the thank you page text.

    class="flex justify-center items-start h-auto w-auto" alt="">



    7. Once you're done, add your conditions. Then click "Close" to exit the popup and proceed to other configurations.

    To learn more about the conditions, simply check out our Form Conditions Documentation.

    class="flex justify-center items-start h-auto w-auto" alt="">



    Step 3: Customize Form's Style and Colors


    1. Within this panel, you have the ability to modify the form's style. You can choose whether it should be right-to-left or not, adjust its rounded, and even reposition the button as needed.
    You will also choose colors that harmonize with your website.


    class="flex justify-center items-start h-auto w-auto" alt="">



              

    Step 4 : Adjust the Layout


    In the Layout panel, you can adjust how your layout looks and behaves. You have control over things like size, rounding, width, popup position, adding an overlay, choosing how it's displayed, and even adding animations.

    class="flex justify-center items-start h-auto w-auto" alt="">



  • To switch from the section view to the popup view, just activate the popup and the closable toggle. After that, you can select its position on the page.

    • class="flex justify-center items-start h-auto w-auto" alt="">



  •  The overlay only functions within the popup when the horizontal position is set to the middle and the vertical position is set to the center.


    • class="flex justify-center items-start h-auto w-80" alt="">




    Step 5 : Preview


    Lastly, you can click on “Preview” to see how your popup or section subscription form looks on both desktop and mobile devices. After this, you can proceed to the next step.

    class="flex justify-center items-start h-auto w-auto" alt="">

    For further information on configuring triggers, please navigate to the Block Triggers section.