Skip to main content

Edit subscription form items

Abstract

Learn how to design a layout for your subscription form using items.

Moosend lets you design a subscription form in the subscription form editor. You can choose between the predefined templates in the template library. The template structure contains one or more slots and supports specific items such as image, spacer, text, form, and timer. The Items tab shows the default items in their corresponding slots. You can edit, move, and delete items in your selected template. You cannot add new items that are not available on the form.

Edit an image item

To edit an image item:

  1. In the editing area, click the image to display the Image settings in the right-hand pane.

  2. You can change the following settings:

    • Change the background color, border width and color, alignment, padding, image height and width, and border radius.

    • Set a URL link and enter an alternative text (Alt text) to be displayed if the image cannot be displayed.

    • Crop your image and adjust its size.

    • Change or remove your image.

  3. To resize the image manually, click ResizeImage.png in the image corner and drag it to increase or decrease its size in the container.

Edit a text item

To edit a text item:

  1. In the editing area, click the text item to display the Text settings in the right-hand pane.

  2. You can change the background color, border width, color, radius, and padding.

  3. If you want to use custom fonts, add a custom font in the editor settings and use it in your subscription form.

  4. Click the Text field to enter your text.

    Tip

    Use the AI writer to generate text suggestions, add emojis, and much more.

  5. In the text toolbar, you can use the editing options, as well as:

    • Upload a file - click File to upload a file. Drag a file into the field or browse to add a new file, or select a recent file from the list. To remove a file, click Remove_file_icon.png.

      Note

      You can upload a file of maximum 20MB.

    • Check spelling - click Spellcheck.png to set the dictionary language for spell check.

    • Edit the source code - click Icon_SourceCode.png to open a dialog where you can edit the HTML source code of your text. You can use this, for example, when you manually change the font weight.

    • Insert a link - select the part of the text that you want to use as a link. Click Icon_Link.png and fill out the details in the Insert/Edit Link dialog.

    Note

    When pasting text, we recommend that you paste in plain text format (use CTRL+Shift+V) to avoid any problems displaying the text properly or fixing unwanted formatting.

Edit a spacer item

The spacer item adds space or a line between items on your subscription form.

To edit a spacer item:

  1. In the editing area, click the spacer item to display the Spacer settings in the right-hand pane.

  2. You can change the background color, shadow settings, height (in pixels), and border settings.

Edit a form item

To edit a form item:

  1. In the editing area, click the form item to display the Form settings in the right-hand pane.

  2. You can change the background color, shadow settings, form width, type, alignment, border color, and padding.

  3. Additionally, you can set:

    • On Submit - select the action you want to launch when a visitor subscribes to your list.

    • Select Mailing List - select the mailing list you want to use for your form.

      Note

      If you make any changes to the selected email list's custom fields, the form does not automatically reflect the changes. You must re-select the email list for the form item to get the updates.

    • Edit Custom Fields - click to use existing custom fields or create new custom fields.

  4. In the Field Styles, Label Styles, Placeholder Styles, and Button Styles drop-down menus, specify the appropriate styles.

  5. To let a customer spin a wheel to get a coupon code in return for submitting their email address, in the Wheel of fortune drop-down menu, select the Enable wheel check box, and set the padding and wheel size.

  6. Click Edit slices and in the Slices dialog define the type, label, coupon code, color, and probability. Then click Save.

  7. To protect your site from spam and abuse, expand ReCaptcha Settings and select the Enable ReCaptcha check box, then set the appropriate alignment and margins.

  8. In the GDPR Checkbox drop-down menu, in the Label field, edit the default message and, in the Legal text field, add a legal text.

Edit a timer item

Countdown timers add a timer item to the email template that shows how much time remains for the recipient to respond. This can help to add urgency to a subscription form.

To edit a timer item:

  1. Click the timer item to display the Timer settings in the editor's right-hand pane and specify the display details of your timer. You can set the following:

    • Theme - the options are Plain and Boxes. The Boxes theme adds adjustable boxes inside the timer (days, hours, minutes, seconds). You can select a box color, box radius, border color, and border width.

    • Expiration Date - choose the date and time for your timer to expire.

      Note

      The timer expiration date and time is based on your time zone and expires at the same time for all users. For example, if you set your timer to expire in 5 hours, it expires for everyone, regardless of their time zone, in 5 hours.

    • Font Family - choose the font types for the label letters and counter numbers of the timer.

    • Label Color - choose a color for the labels under each counter.

    • Timer Color - choose a color for the numbers on the counters.

  2. Click Generate Timer.

Move an item

To move an item:

  1. In the editing area of the subscription form editor, hover your mouse over an item to display the Actions menu:

  2. Click Move Icon_MoveElement.png and drag the item to a different row in the editing area.

Delete an item

You can delete items from a subscription form.

To delete an item:

  • On the Items tab, clear the item check box. The item is removed from your design.

Or

  • In the editing area, click the item you want to delete, then in the Actions menu, click Remove Icon_DeleteElement.png.

Note

After you have deleted an item, you can add it again. To add it, select the item check box.