help-center-cms

Author: admin

  • Customizing form design (colors, fonts, spacing)

    This guide explains how to customize the visual design of your signup form in Sender, including colors, fonts, spacing, borders, and other style settings across all form elements.

    Where to Find This Setting

    In the form builder, click the Design tab in the right-side panel to access all visual customization settings. The Design tab contains expandable sections for every styleable element on your form, including Box settings, Logo settings, Text settings, Input labels, Inputs, Input placeholders, Checkbox, Submit button, Close button, Exit text, Overlay, Shadow, and Image.

    To customize the success view that appears after submission, open the Display dropdown at the top center of the form builder and select Success view. The Design tab updates to show the success view settings, which include Headline and CTA button sections.

    Use the device preview icons in the top-right toolbar to switch between desktop and mobile views at any time.

    Steps to Customize Form Design

    Step 1 — Adjust the form container and background

    Click the Design tab and expand Box settings at the top of the panel. Under PADDING, set the TOP, BOTTOM, LEFT, and RIGHT values to control the inner spacing of your form. Use the link/unlink icons next to PADDING to apply uniform or independent values to each side.

    Under BORDER, set the WIDTH, STYLE dropdown, COLOR picker, and RADIUS to define the form's outer border. Use the BACKGROUND COLOR picker to set a solid background color. To add a background image, expand the BACKGROUND section, click Add, then configure the SIZE, POSITION, and REPEAT dropdowns. The form preview updates as you make changes.

    Step 2 — Customize text styles and fonts

    Expand Text settings to control the typography for each text element on your form. Each text type — title, subtitle, compliance text, and bottom text — has its own toggle, font dropdown, font weight, color picker, font size, line height, and line height unit settings. Use the Display title, Display subtitle, Display compliance text, and Display bottom text toggles to show or hide each text element.

    For each visible text element, select a font from the FONT dropdown, set the FONT WEIGHT, choose a color using the COLOR hex picker, and adjust the FONT SIZE using the +/- controls. Changes appear immediately on the form preview.

    Step 3 — Style input fields and the submit button

    Expand the Inputs section to customize form fields. Set the BORDER WIDTH, BORDER STYLE, BORDER COLOR, and BORDER RADIUS to control field borders. Enable Border only on bottom if you want a minimal underline style. Set the BACKGROUND COLOR, FONT FAMILY, FONT WEIGHT, TEXT COLOR, and FONT SIZE for the typed input text.

    Expand Input placeholders to separately style the placeholder text inside fields, including FONT, FONT WEIGHT, TEXT COLOR, and FONT SIZE.

    Expand Submit button to set the button TEXT, TEXT WHEN SUBMITTING, BACKGROUND COLOR, BORDER RADIUS, FONT FAMILY, FONT WEIGHT, TEXT COLOR, and FONT SIZE. The form preview reflects all changes in real time.

    Step 4 — Configure overlay, shadow, and close button (popup forms)

    For popup forms, expand Overlay to set the OVERLAY COLOR and OVERLAY OPACITY that control the dimmed background behind your popup.

    Expand Shadow to add a box shadow to your form container. Set the COLOR, OPACITY, BLUR RADIUS, SPREAD RADIUS, OFFSET X, and OFFSET Y. Enable the Inset shadow toggle to apply the shadow inside the form box instead of outside.

    Expand Close button to adjust the WIDTH, HEIGHT, OFFSET X, OFFSET Y, ICON SIZE, and ICON COLOR. Under Styles on focus, set the ICON COLOR, BACKGROUND COLOR, and BACKGROUND OPACITY that appear when a user hovers over or focuses on the close button.

    Step 5 — Customize the success view design

    Open the Display dropdown at the top center of the form builder and select Success view. The form preview switches to show the post-submission screen, and the Design tab updates accordingly.

    Expand Headline to set the title and subtitle styles using the same font, weight, color, size, and line height controls as the main form. Use the Display title and Display subtitle toggles to show or hide each text element.

    Expand CTA button and enable Display button to show a call-to-action button on the success view. Set the TEXT, BACKGROUND COLOR, BORDER RADIUS, FONT FAMILY, TEXT COLOR, and FONT SIZE. After finishing, use the device preview icons in the toolbar to verify your design on both desktop and mobile.

    Available Design Settings

    Box settings — Controls the form container's inner spacing (padding for top, bottom, left, right), border (width, style, color, radius), background color, and background image (with size, position, and repeat options).

    Logo settings — Upload or replace a logo image, set alternative text, adjust the logo width as a percentage, and choose left, center, or right alignment.

    Text settings — Separate controls for title, subtitle, compliance text, and bottom text. Each has a display toggle, font family, font weight, color, font size, line height, and line height unit.

    Input labels — Toggle label visibility with Display labels, then set the font, font weight, text color, and font size for field labels.

    Inputs — Controls for input field borders (width, style, color, radius), background color, font family, font weight, text color, font size, and a Border only on bottom toggle.

    Input placeholders — Sets the font, font weight, text color, and font size for placeholder text displayed inside empty input fields.

    Checkbox — Sets the CHECKBOX COLOR for the checked state and the BORDER COLOR for the checkbox outline.

    Submit button — Controls the button label text, submitting-state text, background color, border radius, font family, font weight, text color, and font size.

    Close button — Sets the close icon's width, height, position offsets (X and Y), icon size, icon color, and focus-state styles (icon color, background color, background opacity). Available on popup forms.

    Exit text — Toggle visibility with Display exit text, then set the text label, alignment (left, center, right), font family, font size, and color.

    Overlay — Controls the overlay color and opacity behind popup forms.

    Shadow — Sets the box shadow color, opacity, blur radius, spread radius, horizontal and vertical offsets, and an inset shadow toggle.

    Image — Upload or change the form's side image, with background size, background position, and background repeat settings.

    Success view — Headline — Separate title and subtitle controls with display toggles, font, weight, color, size, line height, and line height unit.

    Success view — CTA button — Toggle button visibility, set the button text, background color, border radius, font family, text color, and font size.

    Branding Tips

    Use consistent colors across form elements — Set the same hex values for your Submit button background color, Checkbox color, and any accent elements to maintain a cohesive brand appearance.

    Match fonts to your website — Select the same font family in Text settings, Inputs, Input placeholders, and Submit button to ensure your form looks like a natural extension of your site.

    Check both preview modes after every change — Use the desktop and mobile preview icons in the toolbar to verify that padding, font sizes, and layout look correct on both screen sizes before saving.

    Style the success view to match your form — Switch to Success view from the Display dropdown and apply the same font, color, and button style settings so the post-submission screen feels consistent with the subscribe form.

    Adjust padding for visual balance — Use the Box settings padding controls to add or reduce spacing around your form content. Unlink padding values when you need more space on specific sides, such as extra top padding above a title.

    Common Issues

    Design changes not appearing on the live form → You may not have saved after making changes. Click Save and continue in the top-right corner of the form builder to apply your updates.

    Form looks different on mobile than on desktop → Some padding and font size values may not scale well on smaller screens. Switch to the mobile preview using the device preview icon in the toolbar and adjust settings as needed.

    Background image not displaying correctly → The SIZE, POSITION, or REPEAT settings under Box settings or Image may need adjustment. Try setting SIZE to Cover and POSITION to Center for most layouts.

    Submit button text is hard to read → The TEXT COLOR and BACKGROUND COLOR in the Submit button section may lack contrast. Choose colors with sufficient contrast between the button fill and the text.

    Close button not visible on the form → The ICON COLOR in the Close button section may match the form background. Change the ICON COLOR to a value that contrasts with your form's background color.

    FAQs

    How do I change the form background color? In the form builder, click the Design tab and expand Box settings. Use the BACKGROUND COLOR picker to select your preferred color. The form preview updates in real time.

    Can I add my logo to the form? Yes. Expand Logo settings under the Design tab and click Add to upload your logo image. You can adjust the WIDTH (%) and ALIGNMENT after uploading.

    How do I change the submit button color and text? Expand the Submit button section under the Design tab. Use the BACKGROUND COLOR picker to change the button fill color and edit the TEXT field to change the button label.

    Can I remove the Sender logo from my form? Check your plan features — Sender branding removal may be available on paid plans. If available, look for a toggle in the Design tab or publishing settings to hide the Sender logo.

    How do I customize the success view that appears after submission? In the form builder, open the Display dropdown at the top center and select Success view. The Design tab updates to show the Headline and CTA button sections, where you can customize the text styles, colors, and button appearance.

    Can I preview my form design on mobile? Yes. Use the device preview icons in the form builder toolbar to switch between desktop and mobile views. The mobile preview displays your form inside a phone mockup so you can check the layout after making design changes.

    How do I change the font on my form? Each text element has its own font dropdown. Expand Text settings to change the title, subtitle, compliance text, and bottom text fonts. Expand Inputs, Input placeholders, and Submit button to change fonts for those elements separately.

    Can I add a border to my form? Yes. Expand Box settings under the Design tab and set the BORDER WIDTH to a value greater than zero. Then choose a STYLE, COLOR, and RADIUS to define the border appearance.

  • Form Troubleshooting

    This guide helps you diagnose and resolve common issues that prevent signup forms from appearing on your website or functioning correctly in Sender.

    Symptoms

    The form does not appear on your website after publishing.

    The form shows as DRAFT in the Forms list and is not live on your site.

    The embedded form container is visible on the page but the form does not render inside it.

    The form appears on desktop but not on mobile, or vice versa.

    Possible Causes

    Form still in DRAFT status — The form has not been published. Forms in DRAFT status are not active and will not display on your website, regardless of whether the JavaScript snippet is installed.

    JavaScript snippet not installed or placed incorrectly — The Sender JavaScript snippet must be present on every page where you want forms to display. If the snippet is missing or placed after the closing </head> tag, forms will not load.

    No triggers enabled in the Behaviour tab — Popup forms require at least one trigger to be active under When to show popup? in the Behaviour tab. If all trigger checkboxes are unchecked, the form has no condition to display.

    Visibility settings excluding the target page or device — The Visibility section in the Behaviour tab may be configured to hide the form on specific pages or device types. If Hide on mobile devices is checked, for example, the form will not appear on mobile screens.

    Embedded form

     element missing or misplaced — For embedded forms, a <div> element with the data-sender-form-id attribute must be placed in the page body where you want the form to appear. If this element is missing, the embedded form has nowhere to render.

    Steps to Resolve

    Step 1 — Confirm the Form Is Published

    Go to Forms in the left sidebar. Check the status badge next to your form name. If it shows DRAFT, the form is not live. Click the settings gear icon to open Publishing settings, then click the Publish button in the top-right corner. The status badge should change from DRAFT to indicate the form is active.

    Step 2 — Verify the JavaScript Snippet Is Installed

    Open Publishing settings for your form and locate the Javascript integration instructions section. Under the JavaScript snippet tab, copy the <script> block.

    On your website, right-click and select View Page Source. Search for cdn.sender.net/accounts_resources/universal.js. The snippet must appear before the closing </head> tag. If it is missing or placed in the <body>, move it to the correct location.

    Step 3 — Check Triggers and Visibility in the Behaviour Tab

    Open the form in the builder and click the Behaviour tab. Under When to show popup?, confirm at least one trigger is enabled — such as After X seconds on page or Show when user scrolls to X %.

    Then expand the Visibility section and check that Hide on desktop, Hide on mobile devices, or Hide on tablet devices are not checked for the device you are testing on. If using Show on specific pages or Hide on specific pages, verify the URL entries under PAGES INCLUDING or EXACT URLS match your test page.

    Step 4 — Verify the Embedded Form

     Placement

    For embedded forms, open Publishing settings and scroll below the JavaScript snippet to find the <div> embed code. It follows this format: <div style="text-align: left" class="sender-form-field" data-sender-form-id="[ID]"></div>.

    Confirm this element is placed in your page's <body> at the exact location where you want the form to appear. If it is missing or placed inside the <head>, the form will not render.

    Step 5 — Check Frequency and Schedule Settings

    In the form builder, open the Behaviour tab and expand Frequency. If Always show is unchecked, the form will only reappear after the configured period (e.g., 30 days) for visitors who previously dismissed it. During testing, enable Always show or clear your browser cookies.

    Next, expand Schedule. If Specific time is selected, verify the START TIME and END TIME cover the current date. If the schedule has expired, switch to Instant or update the time range.

    How to Verify the Fix

    Open your website in an incognito or private browser window and navigate to a page where the form should display. For popup forms, trigger the configured condition (e.g., wait the specified seconds or scroll to the configured percentage). For embedded forms, confirm the form renders inside the target <div> container.

    You can also check the form's Overview page in Sender — the total views counter in Activity summary should begin incrementing as visitors load the page.

    Related Issues

    Subscribers not appearing in the correct group → Open the form builder, go to the Settings tab, and expand the Groups section. Verify that the correct group is selected under ADD SUBSCRIBERS TO THESE GROUPS. If no group is selected, new subscribers will not be assigned to any group.

    Double opt-in confirmation emails not received → Open Publishing settings and check the Double opt-in settings section. If the toggle is enabled, verify the Confirmation email details including the Sender's email address. Ask subscribers to check their spam folder. If confirmation emails are still not delivered, try editing the confirmation email subject line to avoid spam filter triggers.

    reCAPTCHA or confirmation checkbox not functioning → Open the form builder, go to the Settings tab, and check the Options section. Confirm that Use Google reCaptcha or Confirmation checkbox is enabled. If the reCAPTCHA does not load on your live site, verify that the JavaScript snippet is correctly installed and that no browser extensions or content security policies are blocking third-party scripts.

    FAQs

    I fixed the issue but the form still does not appear. What should I try?

    Clear your browser cache and cookies, then reload the page in an incognito window. Form frequency settings use cookies to track whether a visitor has already seen or dismissed the form, so cached data may prevent it from displaying even after the fix is applied.

    Can I test my form without publishing it to all visitors?

    Set Visibility to Show on specific pages in the Behaviour tab and enter a test page URL under EXACT URLS. This limits the form to a single page while you verify it works correctly. Remember to change it back to Always show when you are ready to go live.

    How do I know if the JavaScript snippet is installed correctly?

    Right-click on your website, select View Page Source, and search for cdn.sender.net/accounts_resources/universal.js. If it appears inside a <script> block before the closing </head> tag, the snippet is installed correctly. You only need to install this snippet once, even if you use multiple forms.

    The form works on desktop but not on mobile. Why?

    Open the Behaviour tab in the form builder and expand the Visibility section. If Hide on mobile devices is checked, the form will not appear on mobile screens. Also note that the Show when trying to leave page trigger (exit intent) does not work on mobile devices, as indicated in the builder. If this is your only enabled trigger, the form will never appear on mobile.

    Multiple forms are conflicting on the same page. How do I fix this?

    Use the Visibility settings in each form's Behaviour tab to assign different forms to different pages using Show on specific pages or Hide on specific pages. Avoid having multiple popup forms with overlapping triggers active on the same URL, as only one popup can display at a time and others may be suppressed.

  • Form analytics and performance stats

    This guide explains how to view form analytics, monitor submission activity, and review performance stats for your signup forms in Sender.

    Where to Find This Feature

    In the Sender dashboard, go to Forms in the left sidebar.

    The Forms page displays all your forms in a list. Each row shows the form name, form type badge (such as Pop-up or Embedded form), status badge (such as DRAFT or ACTIVE), and the date it was last edited. The Stats columns on the right side of each row display three key metrics: subscribed (total signups), visitors (total views), and conversion (conversion rate as a percentage). The Actions column provides quick-access icons for editing, opening settings, and a dropdown menu with additional options including Overview.

    For detailed analytics, open the Overview page for any form. You can access it by clicking the dropdown arrow (chevron icon) next to the form in the Actions column and selecting Overview. The Overview page displays the Activity summary, a Daily visitors / signups chart, and a Subscribers table listing every person who submitted the form.

    Steps to Review Form Analytics

    Step 1 — Check stats from the Forms list

    Go to Forms in the left sidebar. The list displays subscribed, visitors, and conversion next to each form. Use these columns to compare performance across all your forms at a glance. To narrow down the list, use the Filter button to show only Embedded forms, Pop-ups, or Spin-to-win forms. Use the Sort button to reorder by Name, Edited at, or Created at in ascending or descending order. You can also type a form name in the Find form by name search field.

    Step 2 — Open the Overview page for detailed metrics

    Click the dropdown arrow in the Actions column next to the form you want to review, then select Overview. The Activity summary section at the top displays three metrics: total signups, total views, and conversion rate. Below that, the Daily visitors / signups chart plots SIGNUPS and VISITORS over a date range so you can identify trends and traffic patterns for that specific form.

    Step 3 — Review individual subscriber data

    Scroll down on the Overview page to the Subscribers section. This table lists every person who submitted the form, with columns for Email address, First Name, Last Name, and Date / time. Use the Find by email search field to locate a specific subscriber. Use the Starting date – Ending date date picker to filter submissions by a specific time range.

    Step 4 — Export subscriber data

    To export the subscriber list from a specific form, use the Export CSV or Export XLSX buttons in the top-right corner of the Subscribers section on the Overview page. The export includes all subscribers who signed up through that form, filtered by any date range you have applied. This is useful for reporting or for reviewing form performance outside of Sender.

    Form Status Reference

    DRAFT — The form has been created but has not been published. It is not visible on your live site and does not collect submissions. You can edit, rename, duplicate, or delete a draft form. To make it live, click Publish on the Overview or Publishing settings page.

    Active (Published) — The form is live and visible to visitors on your website. It collects submissions, and its stats update in real time on the Forms list and the Overview page. You can deactivate a published form to remove it from your live site without deleting it.

    Inactive (Deactivated) — The form has been taken offline and is no longer visible to visitors. All configuration, design, and submission history are preserved. You can reactivate the form at any time to make it live again. Deactivating is a reversible action.

    Management Tips

    Use the Forms list for quick comparisons — The subscribed, visitors, and conversion columns on the Forms list let you compare all your forms side by side without opening each one individually.

    Filter by form type to stay organized — If you manage multiple forms, use the Filter button to display only Pop-ups, Embedded forms, or Spin-to-win forms at a time. This helps you focus on a specific category.

    Sort by date to find recent activity — Use the Sort button and select Edited at (newest to oldest) to bring your most recently updated forms to the top of the list.

    Export data regularly for reporting — Use the Export CSV or Export XLSX buttons on the Overview page to save subscriber data from individual forms. Apply a date range filter before exporting to get data for a specific period.

    Check the Overview page for trends — The Daily visitors / signups chart on the Overview page helps you spot traffic spikes or drops. Review this chart after launching a new campaign or making changes to your site to measure impact.

    Common Issues

    Stats show zero for a form you expected activity on → The form may still be in DRAFT status and has not been published. Check the status badge on the Forms list and click Publish if needed.

    Conversion rate appears unusually low → The form may be receiving visitors but not signups. Open the Overview page and compare total views to total signups. Consider reviewing form design or placement (covered in other help center categories).

    Subscriber list on the Overview page shows "No data found" → No one has submitted the form yet, or the date range filter is too narrow. Clear the date filter or expand the range to see if submissions exist outside the selected period.

    Exported file does not include expected subscribers → Check if a date range filter is active in the Subscribers section before exporting. The export respects any filters you have applied. Remove the date range to export all submissions.

    FAQs

    Where can I see how many submissions a form has received?

    The Forms list displays subscribed, visitors, and conversion stats next to each form. For a more detailed breakdown, click the dropdown arrow next to the form and select Overview to see the Activity summary with total signups, total views, and conversion rate.

    What is the difference between "subscribed" and "visitors" on the Forms list?

    Subscribed counts the number of people who submitted the form. Visitors counts the number of times the form was viewed. The conversion percentage is calculated from these two numbers.

    Can I export the subscriber data from a specific form?

    Yes. Open the form's Overview page by selecting Overview from the dropdown menu in the Actions column. Scroll to the Subscribers section and click Export CSV or Export XLSX. You can apply a date range filter before exporting.

    Can I filter the Forms list to show only one type of form?

    Yes. Click the Filter button above the forms list and select Embedded forms, Pop-ups, or Spin-to-win forms. Select All to return to the full list.

    How do I sort my forms by most recently edited?

    Click the Sort button above the forms list and select Edited at (newest to oldest). You can also sort by name or creation date in ascending or descending order.

    Does deactivating a form delete its stats?

    No. Deactivating a form removes it from your live site but preserves all configuration, design, and submission history. Stats remain visible on the Forms list and the Overview page. You can reactivate the form at any time.

    Can I see which subscribers came from a specific form?

    Yes. Open the form's Overview page and scroll to the Subscribers table. This table lists every person who submitted that specific form, along with their Email address, First Name, Last Name, and the Date / time of submission.

  • GDPR Consent Checkboxes

    This guide explains how to enable and customize the confirmation checkbox on your signup forms in Sender to collect explicit consent from subscribers.

    Where to Find This Setting

    Open any existing form from Forms in the left sidebar, then click the edit icon to enter the form builder. Select the Settings tab in the right-hand panel. The Confirmation checkbox option is located under the Options section, alongside other form-level settings like Use Google reCaptcha and Redirect after submit.

    Steps to Enable and Customize the GDPR Consent Checkbox

    Step 1 — Enable the Confirmation Checkbox

    In the Settings tab, expand the Options section. Check Confirmation checkbox to enable it. Once enabled, two additional fields appear below: Confirmation text and Confirmation text validation message. The form preview updates immediately to show an unchecked checkbox between the form fields and the Submit button, displaying the default consent text.

    Step 2 — Customize the Confirmation Text

    Edit the Confirmation text field to replace the default message ("I would like to receive newsletter and promotions") with your preferred consent statement. This is the text visitors see next to the checkbox on your form. The form preview reflects your changes in real time.

    Write a clear statement that describes what the subscriber is agreeing to receive.

    Step 3 — Customize the Validation Message

    Edit the Confirmation text validation message field to change the error message displayed when a visitor tries to submit the form without checking the consent box. The default message is "This field is required."

    Replace it with a message that prompts the visitor to confirm their consent before submitting.

    Step 4 — Save and Verify

    Click Save and continue to save your changes. Preview the form on both desktop and mobile views using the device toggle icons in the top toolbar. Test the form by attempting to submit it without checking the consent box to confirm the validation message appears as expected.

    How It Protects

    Confirmation checkbox — Adds a required consent checkbox to the form that visitors must check before submitting. The form cannot be submitted until the box is checked, ensuring every subscriber has actively opted in. The consent action is recorded alongside the subscriber record.

    Confirmation text — Displays a customizable consent statement next to the checkbox, making it clear to visitors what they are agreeing to. This allows you to tailor the language to match the type of communications you send.

    Confirmation text validation message — Shows a configurable error message when a visitor attempts to submit without checking the consent box. This prevents accidental submissions and reinforces that consent is required.

    Compliance Tips

    Use specific consent language — Write confirmation text that describes the type of content subscribers will receive (e.g., newsletters, promotional offers), rather than using vague or generic phrasing.

    Combine with reCAPTCHA — Enable Use Google reCaptcha under Options alongside the confirmation checkbox to add both consent collection and bot protection to the same form.

    Pair with double opt-in — Use the confirmation checkbox together with double opt-in on the Publishing settings page to layer explicit consent with email verification for stronger subscriber validation.

    Test after every change — Preview and test your form after editing the confirmation text or validation message to confirm the checkbox displays correctly and validation triggers as expected.

    Common Issues

    Checkbox not visible on the form → Confirmation checkbox is not enabled. Open the Settings tab, expand Options, and check Confirmation checkbox.

    Validation message not appearing → The Confirmation text validation message field may be empty. Enter a message such as "This field is required." to ensure visitors see an error when they skip the checkbox.

    Consent text reverted to default → Changes were not saved before leaving the form builder. Always click Save and continue after editing the Confirmation text or Confirmation text validation message fields.

    Checkbox appears but is not required → This can occur if the form has not been saved after enabling the checkbox. Click Save and continue and re-test the form to confirm validation is active.

    FAQs

    Can I customize what the confirmation checkbox says?

    Yes. In the Settings tab, expand the Options section, check Confirmation checkbox, and edit the Confirmation text field to display your preferred consent message.

    Is the confirmation checkbox required for GDPR compliance?

    Sender provides the Confirmation checkbox tool to help you collect explicit consent. Whether it is legally required depends on your specific situation and jurisdiction. Consult a legal professional for compliance advice specific to your business.

    Where is consent data stored?

    When a subscriber checks the confirmation checkbox and submits the form, the consent action is recorded alongside their subscriber record in Sender.

    Can I use the confirmation checkbox on embedded forms?

    Yes. The Confirmation checkbox setting is available under Options in the Settings tab for both pop-up and embedded form types.

    Does the confirmation checkbox work with reCAPTCHA?

    Yes. You can enable both Confirmation checkbox and Use Google reCaptcha under Options in the Settings tab. The reCAPTCHA verification and consent checkbox function independently on the same form.

  • Connecting Forms to Lists

    This guide explains how to connect a signup form to one or more subscriber groups, map form fields to subscriber profiles, and configure opt-in settings in Sender.

    Where to Find This Setting

    Open the form builder by going to Forms in the left sidebar and clicking the edit (pencil) icon next to any form. In the builder, select the Settings tab in the right panel. The audience connection controls are organized under three collapsible sections: Options, Fields, and Groups. Click any section heading to expand or collapse it.

    For double opt-in configuration, go to the Publishing settings page instead. From the Forms list, click the gear icon next to the form. The Double opt-in settings toggle appears at the top of this page.

    Steps to Connect Your Form

    Step 1 — Select Subscriber Groups

    In the form builder, open the Settings tab and expand the Groups section. Under Add subscribers to these groups, click the Select option dropdown. Choose one or more groups from the list. You can also click Create a new group directly from this dropdown if the group you need does not exist yet.

    Every subscriber who submits this form will be added to all groups you select here.

    Step 2 — Map Form Fields to Subscriber Data

    Expand the Fields section under the Settings tab. The Email field is included by default and cannot be removed. To collect additional data, click Add field and select from available fields such as Last name, Phone number, or Birthday. You can also click Create a new field to add a custom field.

    For each field, edit the Field label and Input placeholder text. Check the Required checkbox on any field to make it mandatory before submission.

    Step 3 — Enable the Confirmation Checkbox for Consent

    Under the Options section in the Settings tab, check Confirmation checkbox. This adds a consent checkbox to your form. Edit the Confirmation text field to customize the message visitors see (the default is "I would like to receive newsletter and promotions"). Adjust the Confirmation text validation message if needed.

    The checkbox must be selected by the visitor before the form can be submitted.

    Step 4 — Configure Double Opt-In

    From the Forms list page, click the gear icon next to your form to open Publishing settings. Toggle on Double opt-in settings at the top of the page.

    Once enabled, a Confirmation email section appears. Click Edit to customize the Email subject, Sender's name, and Sender's email address. Click Save to apply your changes. When active, new subscribers receive a confirmation email and are only added as active after clicking the confirmation link.

    Step 5 — Allow Subscribers to Choose Interest Groups (Optional)

    Back in the form builder under the Settings tab, expand Groups and locate Allow subscribers to choose their interest groups. Click Add group and select a group from the dropdown. The group appears on your form as a checkbox that visitors can select.

    Edit the Group label field in the settings panel to change the text displayed on the form. Repeat to add more groups. Visitors will only be added to the groups they check.

    How Data Flows

    Email and profile fields — When a visitor submits the form, the data entered into each field (email, name, phone number, birthday, or custom fields) is written directly to the corresponding subscriber profile field. The field mapping is automatic based on the field type selected in the Add field dropdown.

    Group assignment — Subscribers are added to every group selected under Add subscribers to these groups. If interest group checkboxes are enabled, the subscriber is also added to whichever groups they selected on the form. Both assignments happen at the same time on submission.

    Double opt-in — When enabled on the Publishing settings page, the subscriber is created with an unconfirmed status after form submission. They receive a confirmation email and become active only after clicking the confirmation link. Automations connected to the form are triggered after confirmation, not at the time of submission.

    Existing subscribers — If a subscriber with the same email address already exists in the selected group, Sender updates their profile with any new field data from the form submission. A duplicate subscriber record is not created.

    Connection Tips

    Always assign at least one group — If no group is selected under Add subscribers to these groups, new signups may not appear where you expect them. Select a group before publishing your form.

    Use interest groups for segmentation — Adding groups under Allow subscribers to choose their interest groups lets visitors self-segment. This keeps your lists organized without requiring separate forms for each audience.

    Test field mapping before publishing — Submit a test entry through your form and check the Subscribers section to verify that all field data (name, phone number, custom fields) appears correctly in the subscriber profile.

    Customize the double opt-in email — Edit the Email subject and Sender's name on the Publishing settings page so the confirmation email matches your brand. A recognizable sender name improves confirmation rates.

    Mark important fields as required — Check the Required checkbox on fields like Phone number or Last name if you need complete data. This prevents submissions with missing information.

    Common Issues

    Subscribers not appearing after form submission → No group is selected under Add subscribers to these groups in the Groups section. Open the form builder, go to the Settings tab, expand Groups, and select at least one group from the dropdown.

    Subscriber shows as unconfirmed or inactive → Double opt-in settings is enabled on the Publishing settings page. The subscriber must click the confirmation link in the email before they appear as active. Check whether they received and opened the confirmation email.

    Custom field data not saving to profiles → The field was not added through the Add field dropdown in the Fields section. Fields added this way are automatically mapped to subscriber profile fields. Verify the field exists under Subscribers → Fields in the left sidebar.

    Interest group checkboxes not showing on the form → No groups have been added under Allow subscribers to choose their interest groups. Click Add group in the Groups section of the Settings tab and select at least one group.

    Confirmation checkbox not visible on the form → The Confirmation checkbox option is not enabled. Expand the Options section in the Settings tab and check Confirmation checkbox.

    FAQs

    Can I connect one form to multiple subscriber groups?

    Yes. In the Settings tab, expand the Groups section and select multiple groups from the Add subscribers to these groups dropdown. New signups will be added to all selected groups simultaneously.

    What happens if an existing subscriber submits the form again?

    If the email address already exists in the selected group, Sender updates the subscriber's profile with any new field data from the form. A duplicate subscriber is not created.

    How does double opt-in work with signup forms?

    When enabled on the Publishing settings page, new subscribers receive a confirmation email after submitting the form. They are only added to your list as active subscribers after clicking the confirmation link.

    Can subscribers choose which groups to join?

    Yes. Under the Groups section in the Settings tab, click the Add group button under Allow subscribers to choose their interest groups. Visitors will see checkboxes on the form for each group you add.

    Where do I find subscribers who signed up through a specific form?

    Go to Subscribers in the left sidebar and filter by the subscriber group connected to the form using the Groups dropdown. You can also check the form's stats on the Forms list page for submission counts.

  • Embedded vs Popup Forms

    This guide explains how to choose between an embedded form and a popup form in Sender, including how each type displays, how their builder settings differ, and how to distribute them.

    Where to Find This Feature

    In the Sender dashboard, go to Forms in the left sidebar. The Forms list shows all your existing forms with their type label (Embedded form or Pop-up) displayed below the form name. To select a form type, click Create a new form in the top-right corner. The New form page presents three form type cards: Embedded form, Popup form, and Spin-to-win wheel. The form type is set at creation and cannot be changed afterward.

    Steps to Choose and Configure the Right Form Type

    Step 1 — Decide Which Form Type Fits Your Use Case

    Choose Embedded form when you want the form to sit directly inside your page content, always visible to visitors without any overlay or trigger. Choose Popup form when you want an overlay that appears based on visitor behavior, such as time on page, scroll position, or exit intent.

    Embedded forms are best for persistent signup placements like sidebars, footers, or in-content sections. Popup forms work best for attention-grabbing, time-sensitive, or behavior-based prompts.

    Step 2 — Create the Form with the Selected Type

    Go to Forms and click Create a new form. Enter a name in the Form name field. Click Create new embedded form or Create new popup under the corresponding card.

    For embedded forms, a layout selection dialog appears with options such as Default and Basic. Select a layout to open the form builder.

    Step 3 — Review Builder Tabs for Your Form Type

    The form builder for an embedded form has two tabs in the right panel: Design and Settings. The Settings tab includes Options (such as Use Google reCaptcha, Confirmation checkbox, Redirect after submit, and Text direction Right to Left), Fields, and Groups.

    A popup form has three tabs: Design, Settings, and Behaviour. The Settings tab is the same for both types. The Behaviour tab is exclusive to popup forms.

    Step 4 — Configure Popup Triggers in the Behaviour Tab

    Open the Behaviour tab in the popup form builder. Under When to show popup?, enable one or more triggers. After X seconds on page displays the popup after a set delay. Show when user scrolls to X % triggers at a scroll depth. Show when trying to leave page fires on exit intent after a minimum wait time (does not work on mobile devices). Show when clicked on element triggers the popup when a visitor clicks a specified page element.

    Step 5 — Set Popup Frequency, Schedule, and Visibility

    Still in the Behaviour tab, expand Frequency to control how often the popup re-appears for visitors who haven't subscribed. Toggle Always show or set a cooldown period in days.

    Under Schedule, choose Instant to activate immediately or Specific time to set a start and end date. Under Visibility, select Always show, Hide on specific pages, or Show on specific pages, and optionally check Hide on desktop, Hide on mobile devices, or Hide on tablet devices.

    Step 6 — Save and Review Publishing Settings

    Click Save and continue in the top-right corner of the form builder. The Publishing settings page opens, displaying the form's type tag (EMBED or POPUP), status (DRAFT or published), Double opt-in settings, Your form URL, the Get your QR code section, and the JavaScript snippet and JavaScript explicit rendering tabs.

    Both form types share the same Publishing settings layout except that embedded forms include an additional HTML <div> placement element alongside the JavaScript snippet.

    Step 7 — Install the JavaScript Snippet on Your Website

    Under the JavaScript snippet tab, copy the <script> block and paste it before the closing </head> tag on your website. You only need to add this snippet once, even if you use multiple forms.

    For embedded forms, also copy the <div> element (with the class="sender-form-field" and data-sender-form-id attributes) and place it in your page HTML where you want the form to appear. Popup forms do not require a placement <div> — the popup overlays the page automatically based on your Behaviour settings.

    Step 8 — Publish the Form

    On the Publishing settings page, click Publish in the top-right corner. The form status changes from DRAFT to active. Visitors on pages where the snippet is installed will now see the form according to its type and configuration.

    Form Type Comparison

    Embedded form — Use when you want a stationary form placed directly in your page content, such as a sidebar, footer, or inline section. The form is always visible and does not overlay the page. The builder includes Design and Settings tabs. Requires both a JavaScript snippet and an HTML <div> element for placement.

    Popup form — Use when you want an overlay form triggered by visitor behavior. The builder includes an additional Behaviour tab with trigger, frequency, schedule, and visibility settings. Only the JavaScript snippet is needed — no <div> placement element is required.

    Spin-to-win wheel — Use when you want a gamified lead capture experience that motivates visitors to sign up with the chance to win a reward. Like the popup, it overlays the page and includes behavior-based trigger settings.

    Distribution Tips

    Use the form URL for non-website sharing — Copy the URL from the Your form URL field on the Publishing settings page to share your form directly via email, social media, or messaging without embedding it on a site.

    Download or share the QR code — In the Get your QR code section, select a size from the dropdown and click Download to save the QR code image. Use it on printed materials, event signage, or any offline channel to direct people to your form.

    Use JavaScript explicit rendering for custom control — Switch to the JavaScript explicit rendering tab on the Publishing settings page to prevent automatic form loading. Add explicit=true and onload=yourCustomCallback parameters to the resource URL, then call senderForms.render() in your code to control exactly when and where the form appears.

    Send the snippet to your developer — If you don't have access to your website code, click Send code snippet at the bottom of the JavaScript snippet tab to email the integration instructions to a team member.

    Install the snippet once for multiple forms — The JavaScript snippet is account-level. Add it to your site once, and all published forms (embedded and popup) tied to your account will load on pages where the snippet is installed, subject to each form's visibility and trigger rules.

    Common Issues

    Embedded form does not appear on the page → The HTML <div> element with class="sender-form-field" and the matching data-sender-form-id attribute is missing or placed incorrectly. Verify that both the <script> block is before the closing </head> tag and the <div> is in the page body where you want the form to render.

    Popup does not trigger on the website → The form is still in DRAFT status. Go to the Publishing settings page and click Publish. Also confirm the JavaScript snippet is installed on the page and check the Behaviour tab to ensure at least one trigger is enabled.

    Popup shows on every page load → The Frequency setting under the Behaviour tab may be set to Always show. Uncheck Always show and set a cooldown period (e.g., 30 days) so the popup only reappears after the specified interval.

    Exit intent trigger does not work on mobile → The Show when trying to leave page trigger does not work on mobile devices. This is a browser limitation noted in the Behaviour tab. Use After X seconds on page or Show when user scrolls to X % as alternative triggers for mobile visitors.

    Cannot change a form's type after creation → The form type is locked at creation. To switch from embedded to popup (or the reverse), use the Duplicate option from the action menu on the Forms list or the Actions dropdown on the Publishing settings page, then create a new form with the desired type and reconfigure the settings.

    FAQs

    What is the difference between an embedded form and a popup?

    An embedded form is placed directly within your page content using an HTML <div> element and is always visible. A popup overlays the page and appears based on trigger rules you define in the Behaviour tab, such as time on page, scroll depth, or exit intent.

    Can I share my form without embedding it on a website?

    Yes. Every published form has a direct form URL you can copy from the Publishing settings page and share via email, social media, or messaging. You can also download or scan the QR code from the same page to share the form offline.

    Can I use the same form on multiple pages?

    Yes. The JavaScript snippet from the Publishing settings page can be added to any page on your website. The form will appear on every page where the snippet is installed, subject to your Visibility settings in the Behaviour tab (for popups) or the <div> placement (for embedded forms).

    Can I change a form's type after creating it?

    No. The form type is set during creation. To switch types, click the dropdown arrow next to the form on the Forms list, select Duplicate, then create a new form with the desired type and reconfigure the settings.

    Does a popup form need an HTML element on the page like an embedded form does?

    No. A popup form only requires the JavaScript snippet in your site's <head> section. It overlays the page automatically based on the trigger rules in the Behaviour tab. Only embedded forms need the additional <div> element with the data-sender-form-id attribute placed in the page body.

    What triggers are available for popup forms?

    The Behaviour tab offers four trigger options: After X seconds on page, Show when user scrolls to X %, Show when trying to leave page (exit intent, desktop only), and Show when clicked on element. You can enable multiple triggers simultaneously.

  • Importing Custom HTML

    This guide explains how to import and use custom HTML code as your full email design in Sender’s Custom HTML email editor.

    Where to Find This Feature

    When creating or editing a campaign, navigate to the Design step. At the top of the design selection page, choose the Custom HTML email tab. This opens a full-screen code editor on the left with a live preview panel on the right. If you have already selected a design type, click Edit design on the Email campaign design page to reopen the editor.

    You can also reach the editor from an existing draft by clicking the edit icon next to the campaign in Email campaigns, then clicking Design in the top navigation bar.

    Steps to Import Custom HTML

    Step 1 — Select the Custom HTML Email Editor

    On the Design step of campaign creation, click the Custom HTML email tab at the top of the page. Sender loads a code editor pre-populated with a starter template that includes a  declaration, a

    -based layout, and a {$unsubscribe_link} merge tag. The live preview panel on the right renders the default template immediately.Step 2 — Paste or Write Your HTMLSelect all the default code in the editor and replace it with your own HTML. Paste your complete email document, starting from  through . The live preview panel updates automatically as you type or paste. Use the + and − controls above the code editor to adjust the font size for readability.Step 3 — Import HTML from a URL (Optional)To pull HTML from an external source, click the Import from URL icon in the top toolbar (the downward arrow icon). In the Enter URL dialog, paste the full URL of your hosted HTML file and click Import. Sender fetches the HTML content from the URL and loads it into the code editor, replacing any existing code.Step 4 — Preview and Verify the OutputCheck the live preview panel on the right side of the editor. Toggle between Desktop and Mobile views using the icons in the top toolbar to verify rendering at both viewport widths. Review the Email size indicator in the upper-right corner — keep your HTML under 102 KB to prevent clipping in Gmail and other email clients.Step 5 — Save and Send a Test EmailClick the Save changes icon in the top toolbar to save your work. Then click Send test email to open the send dialog — enter a recipient address and click Send. Verify the rendering and link behavior in your inbox before proceeding. When ready, click Save and continue to advance to the Recipients step.Code Reference — Required as the first line of your imported HTML. Sender expects a complete HTML document structure with,, and elements.
    layout — Sender’s default template uses nested elements with border=”0″, cellpadding=”0″, cellspacing=”0″, and width=”100%”. This table-based structure renders consistently across Outlook, Gmail, and Apple Mail.{$unsubscribe_link} — Sender’s unsubscribe merge tag. Place it inside an  tag’s href attribute (e.g., Unsubscribe) to generate a working unsubscribe link at send time.

  • Email Client Compatibility

    This guide explains how major email clients render HTML email differently and how to identify, troubleshoot, and work around compatibility issues using Sender's editor and testing tools.

    Where to Test Rendering

    The editor includes three tools for verifying how your email will appear across clients.

    Click the Preview icon (eye) in the top toolbar to open the preview screen. This displays your email in desktop and mobile layouts side by side. The Dark mode preview toggle in the top-right corner of the preview screen simulates how clients with dark mode may invert your colors and backgrounds. The Email size: approx. X KB indicator in the top-left corner of the preview screen shows your current HTML file size — critical for avoiding Gmail clipping.

    Use Send test email in the top toolbar to deliver the email to a real inbox. Enter any email address in the dialog and click Send. This lets you verify rendering in actual email clients, which is essential because the editor preview is a browser-based approximation that does not replicate the rendering engines used by Outlook, Gmail, or Apple Mail.

    Always test in your top 3–5 recipient clients before sending a campaign. The editor preview catches layout and structural issues, but only real-client testing reveals engine-specific rendering differences.

    Steps to Verify and Fix Email Client Compatibility

    Step 1 — Check Email Size and Structure in Preview

    Click the Preview icon in the top toolbar. Review the Email size: approx. X KB indicator. If your HTML exceeds 102 KB, Gmail will clip the email and display a "View entire message" link, hiding content below the cutoff.

    Reduce file size by removing unused sections, consolidating inline styles, and compressing image references. Also verify that your desktop and mobile layouts both display correctly in the side-by-side preview before proceeding.

    Step 2 — Test Dark Mode Rendering

    In the Preview screen, enable the Dark mode preview toggle. Check that text remains legible against inverted backgrounds. Verify that logos and icons with transparency are still visible — dark logos on transparent backgrounds may disappear when the client inverts the background to dark.

    If critical elements lose visibility, add a light-colored background or border directly to those image or text blocks within the editor. Note that this preview is an approximation; actual dark mode behavior varies across clients.

    Step 3 — Verify Rendering in Real Email Clients

    Click Send test email in the top toolbar. Send the email to accounts you control on Gmail, Outlook, and Apple Mail at minimum. Open each test email and compare against the editor preview.

    Look for differences in font rendering, button appearance, background colors, image spacing, and column alignment. If your audience uses Yahoo Mail or Samsung Mail, include those in your test round as well.

    Step 4 — Identify and Fix Client-Specific Issues

    Compare your test results against the known behaviors listed in the Client Rendering Reference below. If Outlook is collapsing your layout, check for unsupported CSS properties like max-width or flexbox. If Gmail is stripping your styles, confirm that all styling is applied inline rather than in a <style> block in the <head>.

    If images appear oversized on Apple Mail retina displays, verify that your images include explicit width and height attributes. Make corrections in the editor or in a Custom HTML block, then repeat the Send test email process to confirm fixes.

    Step 5 — Confirm Final Output Before Sending

    After making all corrections, click Preview one final time to verify file size is under 102 KB, check both light and dark mode views, and confirm the mobile layout is intact.

    Then send a final test email via Send test email to your primary testing inboxes. Only proceed to Save & continue and the Recipients step once rendering is confirmed across your target clients.

    Client Rendering Reference

    Outlook (Windows) — Uses the Microsoft Word rendering engine (WordHTML), which has severely limited CSS support. It does not recognize max-width, margin: 0 auto, background-image on <div> elements, border-radius, padding on <p> or <a> tags, or CSS float. Use <table>-based layouts with inline styles and VML for background images. Set explicit pixel widths on <td> elements instead of percentage widths where precision matters.

    Outlook (Mac/mobile) — Uses the WebKit rendering engine, providing significantly better CSS support than Outlook on Windows. Supports border-radius, background-image, and most modern CSS properties. Emails designed for web-based clients generally render well. However, do not assume consistency between Windows and Mac versions of Outlook.

    Gmail (web) — Strips <style> blocks from the <head> of emails exceeding 8,192 characters and does not support embedded <style> in all cases. Use inline styles for all critical styling. Gmail clips emails with HTML larger than 102 KB. It does not support position, float, or form elements. Check file size in the Preview screen's Email size indicator.

    Gmail (Android/iOS) — Shares Gmail web's rendering pipeline but applies additional constraints on mobile viewport. Supports inline styles but does not support <style> in the <head>. Some media queries may be ignored. Test responsive behavior via Send test email to a Gmail mobile account.

    Apple Mail (macOS/iOS) — Uses the WebKit engine and provides the broadest CSS support of any major email client. Supports <style> blocks, media queries, border-radius, background-image, CSS animations, and web fonts via @import. On retina displays, images without explicit width attributes may render at 2x size. Always set width and height attributes on <img> tags.

    Yahoo Mail — Rewrites CSS class names and can strip or modify <style> blocks unpredictably. Use inline styles as the primary method. Supports background-color and basic padding/margin, but complex selectors may not be applied. Test background images and button styles specifically.

    Samsung Mail — Uses an Android WebView-based engine. Generally supports inline styles and basic CSS well. However, dark mode behavior is aggressive and may invert background colors and images. Ensure sufficient contrast in both light and dark contexts. Test via Send test email on a Samsung device.

    Thunderbird — Uses the Gecko rendering engine with moderate CSS support. Supports <style> blocks and many CSS properties, but lacks support for some modern features like CSS Grid. Generally reliable for table-based layouts with inline styles.

    Compatibility Tips

    Use inline styles as the baseline — Inline styles are the only styling method guaranteed to work across all major email clients. Even if you use a <style> block, always include inline fallbacks for critical properties like color, font-family, font-size, and background-color.

    Set explicit dimensions on images — Always include width and height attributes directly on <img> tags. This prevents oversized rendering on retina displays in Apple Mail and ensures Outlook reserves the correct space even if images are blocked.

    Keep HTML under 102 KB — Monitor the Email size indicator in the Preview screen. Gmail clips emails exceeding this threshold, which hides content and breaks tracking. Remove redundant code, unused sections, and excessive whitespace to stay under the limit.

    Use web-safe font stacks — Custom and Google Fonts are only supported in Apple Mail, iOS Mail, and some versions of Thunderbird. Outlook and Gmail fall back to system fonts. Always define a complete font-family stack ending with a generic family like Arial, Helvetica, sans-serif.

    Test buttons as bulletproof buttons — CSS-styled <a> links may lose padding, border-radius, or background-color in Outlook on Windows. Use table-based button structures with bgcolor on a <td> element for Outlook compatibility, or use a Button block from the editor which generates compatible code.

    Common Issues

    Email is clipped in Gmail → The HTML file size exceeds 102 KB. Check the Email size indicator in the Preview screen and reduce content, remove unused sections, or consolidate inline styles until the size is below 102 KB.

    Buttons appear as plain text links in Outlook → Outlook on Windows does not support padding or border-radius on <a> tags. Use a table-based button structure with bgcolor applied to a wrapping <td>, or use the editor's Button block which generates Outlook-compatible code.

    Background images do not display in Outlook → Outlook on Windows does not support background-image on <div> or <td> elements via standard CSS. Use VML (Vector Markup Language) code in a Custom HTML block to render background images in Outlook while using CSS background-image as a fallback for other clients.

    Fonts change between clients → Custom and Google Fonts render only in clients that support them, such as Apple Mail. Outlook and Gmail substitute the nearest system font. Define a full font-family fallback stack in your Template settings under Headlines and Paragraph to control which system font is used when your preferred font is unavailable.

    Dark mode inverts colors unexpectedly → Email clients with dark mode may invert background colors, swap light text to dark, or alter image backgrounds. Use the Dark mode preview toggle in the Preview screen to check. Avoid transparent backgrounds on logos, and ensure text has sufficient contrast in both light and dark contexts.

    Layout breaks only in Outlook → Outlook on Windows ignores max-width, margin: auto, and CSS-based centering. Replace <div>-based layouts with <table> structures using explicit pixel widths and align="center" attributes for Outlook compatibility.

    Images are oversized on Apple Mail retina screens → Apple Mail renders images at their native resolution on retina displays. If an image is 1200 px wide but displayed at 600 px, it appears full size without explicit constraints. Add width="600" directly on the <img> tag and include style="max-width: 100%" for responsive scaling.

    FAQs

    Why does my email look different in Outlook than in Gmail?

    Outlook on Windows uses the Microsoft Word rendering engine, which has severely limited CSS support compared to browser-based rendering engines. Gmail uses its own pipeline that strips <style> blocks and restricts certain properties. These fundamental engine differences mean the same HTML produces different visual results. Design with both in mind and test in each client via Send test email.

    How do I know if Gmail is clipping my email?

    Gmail clips emails with HTML larger than 102 KB, showing a "View entire message" link at the bottom. Check the Email size: approx. X KB indicator in the editor's Preview screen to monitor your file size before sending.

    Can I make my email render identically in every client?

    No. Email clients use different rendering engines with varying levels of HTML and CSS support. The goal is consistent appearance, not pixel-perfect parity. Test in your top 3–5 recipient clients using Send test email and optimize for those.

    Should I use table-based layouts or div-based layouts?

    Table-based layouts remain the most reliable method for cross-client compatibility, particularly for Outlook on Windows. The Sender drag-and-drop editor generates table-based HTML by default. If you use a Custom HTML block, use <table> structures with inline styles for sections that must render consistently in Outlook.

    Do web fonts work in email?

    Only in a few clients. Apple Mail (macOS/iOS), iOS Mail, and some versions of Thunderbird support web fonts via @font-face or @import. Gmail, Outlook, and Yahoo Mail ignore them and fall back to the font-family stack. Always include web-safe fallback fonts in your declarations.

  • Creating Signup Forms

    This guide walks you through how to create and publish a signup form in Sender for the first time — from naming your form to embedding it on your website.

    Where to Find This Feature

    In the Sender dashboard, go to Forms in the left sidebar.

    On this page, you'll see a list of any existing forms with their type, status, and performance stats. If you haven't created a form yet, you'll see a welcome screen with a Create your first form button. If you already have forms, click Create a new form in the upper-right corner.

    Steps to Create a Signup Form

    Step 1 — Start a New Form

    Click Create your first form on the welcome screen, or click Create a new form in the upper-right corner of the Forms page. You'll be taken to the New form page where you'll see a Form name field and three form type options below it.

    Step 2 — Name Your Form and Choose a Form Type

    Enter a name in the Form name field. This is an internal name to help you identify the form later.

    Below the name field, choose one of the three available form types: Embedded form — a static form that sits directly within your webpage content. Popup form — an overlay that appears on top of your page based on display rules you define. Spin-to-win wheel — an interactive wheel that visitors spin to reveal an offer or incentive.

    Click the orange button below your chosen type (for example, Create new popup) to continue.

    Step 3 — Select a Template

    A template gallery opens with pre-designed layouts for your chosen form type. Browse the available templates or use the Find template by name search bar at the top to locate a specific one. You can also switch between All templates and Themed templates using the filter on the left side.

    Click a template to select it. The form builder opens with your chosen template loaded and ready to customize.

    Step 4 — Customize the Form Design

    In the form builder, click the Design tab on the right-side panel. This is where you adjust the visual appearance of your form. You can expand each section to configure it:

    Box settings — padding, border, background color, and background image. Logo settings — add or change a logo. Text settings — heading and body text styles. Inputs and Input placeholders — style the form fields. Submit button — change the button color, text, and shape. Close button, Overlay, and Shadow — control the popup's surrounding appearance.

    The form preview in the center updates in real time as you make changes.

    Step 5 — Configure Form Fields

    Click the Settings tab, then expand the Fields section. By default, your form includes an Email field and a Name field. Each field has a Field Label and an Input Placeholder you can edit. You can also mark fields as Required using the checkbox.

    To add more fields, click Add field and select from the available options such as Last name, Phone number, or Birthday. You can also click Create a new field to define a custom field.

    Step 6 — Connect to a Subscriber Group

    Still under the Settings tab, expand the Groups section. Under Add subscribers to these groups, click the Select option dropdown and choose a subscriber group. A subscriber group is the list where new signups from this form will be stored.

    You can also use the Add group button under Allow subscribers to choose their interest groups to let visitors pick which groups they want to join.

    Step 7 — Set Display Behaviour

    Click the Behaviour tab to control when and where your form appears. This tab includes four sections:

    When to show popup? — Choose triggers such as showing the form after a set number of seconds on the page, when the user scrolls to a certain percentage, when they try to leave the page, or when they click a specific element. Frequency — Set how often the popup reappears for visitors who haven't subscribed (for example, every 30 days). Check Always show to display it on every visit. Schedule — Choose Instant to activate the form immediately, or Specific time to set a start and end date. Visibility — Choose Always show, Hide on specific pages, or Show on specific pages. You can also hide the form on specific device types using the Hide on desktop, Hide on mobile devices, or Hide on tablet devices checkboxes.

    Step 8 — Save and Publish

    Click Save and continue in the upper-right corner of the form builder. This saves your form and takes you to the Publishing settings page.

    On this page, you'll see your form's status displayed as DRAFT. Review the Double opt-in settings toggle if you want to send confirmation emails to new subscribers. When you're ready, click the Publish button to make your form live. The page also displays your form URL, a QR code, and a JavaScript snippet you can copy and paste into your website's HTML to embed the form.

    What Happens Next

    After publishing, your form becomes active and will appear on your website according to the display rules you configured in the Behaviour tab. You can also share it directly using the form URL shown on the Publishing settings page.

    New signups are automatically added to the subscriber group you selected during setup. You can view your subscribers under the Subscribers section in the dashboard.

    Your form's status updates from DRAFT to active once published. To find and manage your forms at any time, go to Forms in the left sidebar. From the forms list, you can view stats, edit the form, open its settings, or duplicate and rename it using the action menu.

    Common Issues

    Form stays in DRAFT status after saving → Clicking Save and continue saves your form but does not publish it. You must click the Publish button on the Publishing settings page to make your form live.

    Popup does not appear on the website → Verify that the JavaScript snippet from the Publishing settings page is installed on your site before the closing </head> tag. Also check that the form's Visibility settings in the Behaviour tab are not hiding it on the device or page you're testing.

    New signups are not appearing in the expected group → Open the form builder, go to the Settings tab, and expand the Groups section. Confirm that the correct subscriber group is selected under Add subscribers to these groups.

    Form fields are not showing on the live form → Make sure the fields you added under Settings → Fields are saved. Click Save and continue again and republish the form to apply changes.

    FAQs

    What form types are available in Sender?

    Sender offers three form types: Embedded form, Popup form, and Spin-to-win wheel. Embedded forms sit within your page content, popups overlay the page based on trigger rules, and spin-to-win wheels display an interactive wheel visitors can spin to receive an offer.

    Can I add custom fields to my signup form?

    Yes. In the form builder, go to the Settings tab and expand the Fields section. Click Add field, then select an existing field like Last name, Phone number, or Birthday — or click Create a new field to define your own.

    How do I connect my form to a specific subscriber group?

    In the form builder under the Settings tab, expand the Groups section. Use the Select option dropdown under Add subscribers to these groups to choose the group where new signups will be stored.

    Can I embed the form on my website?

    Yes. After saving your form, the Publishing settings page provides a JavaScript snippet you can copy and paste into your website's HTML before the closing </head> tag. You can also use the JavaScript explicit rendering option for more control over where the form appears.

    Can I preview my form on different devices?

    Yes. The form builder toolbar at the top includes device preview icons that let you switch between desktop and mobile views to see how your form will look on different screen sizes.

    How do I edit a form after publishing?

    Go to Forms in the left sidebar. Find your form in the list and click the edit (pencil) icon, or click the settings (gear) icon to go directly to Publishing settings. You can also click Edit on the Publishing settings page to reopen the form builder.

  • Embedded vs Popup Forms

    This guide explains how to choose between an embedded form and a popup form in Sender, including how each type displays, how their builder settings differ, and how to distribute them.

    Where to Find This Feature

    In the Sender dashboard, go to Forms in the left sidebar. The Forms list shows all your existing forms with their type label (Embedded form or Pop-up) displayed below the form name. To select a form type, click Create a new form in the top-right corner. The New form page presents three form type cards: Embedded form, Popup form, and Spin-to-win wheel. The form type is set at creation and cannot be changed afterward.

    Steps to Choose and Configure the Right Form Type

    Step 1 — Decide Which Form Type Fits Your Use Case

    Choose Embedded form when you want the form to sit directly inside your page content, always visible to visitors without any overlay or trigger. Choose Popup form when you want an overlay that appears based on visitor behavior, such as time on page, scroll position, or exit intent.

    Embedded forms are best for persistent signup placements like sidebars, footers, or in-content sections. Popup forms work best for attention-grabbing, time-sensitive, or behavior-based prompts.

    Step 2 — Create the Form with the Selected Type

    Go to Forms and click Create a new form. Enter a name in the Form name field. Click Create new embedded form or Create new popup under the corresponding card.

    For embedded forms, a layout selection dialog appears with options such as Default and Basic. Select a layout to open the form builder.

    Step 3 — Review Builder Tabs for Your Form Type

    The form builder for an embedded form has two tabs in the right panel: Design and Settings. The Settings tab includes Options (such as Use Google reCaptcha, Confirmation checkbox, Redirect after submit, and Text direction Right to Left), Fields, and Groups.

    A popup form has three tabs: Design, Settings, and Behaviour. The Settings tab is the same for both types. The Behaviour tab is exclusive to popup forms.

    Step 4 — Configure Popup Triggers in the Behaviour Tab

    Open the Behaviour tab in the popup form builder. Under When to show popup?, enable one or more triggers. After X seconds on page displays the popup after a set delay. Show when user scrolls to X % triggers at a scroll depth. Show when trying to leave page fires on exit intent after a minimum wait time (does not work on mobile devices). Show when clicked on element triggers the popup when a visitor clicks a specified page element.

    Step 5 — Set Popup Frequency, Schedule, and Visibility

    Still in the Behaviour tab, expand Frequency to control how often the popup re-appears for visitors who haven't subscribed. Toggle Always show or set a cooldown period in days.

    Under Schedule, choose Instant to activate immediately or Specific time to set a start and end date. Under Visibility, select Always show, Hide on specific pages, or Show on specific pages, and optionally check Hide on desktop, Hide on mobile devices, or Hide on tablet devices.

    Step 6 — Save and Review Publishing Settings

    Click Save and continue in the top-right corner of the form builder. The Publishing settings page opens, displaying the form's type tag (EMBED or POPUP), status (DRAFT or published), Double opt-in settings, Your form URL, the Get your QR code section, and the JavaScript snippet and JavaScript explicit rendering tabs.

    Both form types share the same Publishing settings layout except that embedded forms include an additional HTML

     placement element alongside the JavaScript snippet.

    Step 7 — Install the JavaScript Snippet on Your Website

    Under the JavaScript snippet tab, copy the