Skip to main content

Forms customization blocks

Customize the copy and design of your pop-up, landing page, linkin.io & COVID-19 with forms blocks. Simply drag-and-drop to add your brand.

Updated over a week ago

What are form content blocks?

In the forms editors, you can use Form content blocks to effortlessly customize your forms according to your brand's requirements. Simply drag and drop to add and arrange various content form blocks to design forms that capture your audience's attention.

Customize the design and content of your form using drag-and-drop content blocks.

  • Simple content blocks include:

    • Heading block (AI Assist available)

    • Text block (AI Assist available)

    • Form fields block

    • Image block (AI Assist available)

    • Button block

    • Divider block

  • Dynamic blocks include:

    • Logo block – Auto-add your store's logo from your email settings.

πŸ“ Note: If your store logo isn't displaying when you drag-and-drop this logo block, you'll need to update your email brand settings. This will automatically populate your logo and social media links on all your marketing email templates and forms.


Content blocks:

Heading & Text blocks

Create compelling content that entices visitors to share their contact details.

Copy examples:

πŸŽ‰ Special Perks Await:
Sign up now to access exclusive benefits and stay ahead of the game!

πŸ“’ Join the Inner Circle:
Be the first to receive exciting updates, irresistible offers, and so much more!

✨ You can use AI to help you write the copy ✨


1. Drag and drop a heading block or a text block into your form.

Screenshot showing the Form Editor in Marsello, with the option to drag and drop a Heading Block or a Text Block into the sign-up form to customize its content.

2. Double click into that block to open it's Settings. Under Smart Headings, click the Get Suggestions button

Screenshot showing the Settings of a Heading Block in the Marsello Form Editor. Users are instructed to double-click the block to open its settings and then click the Get Suggestions button under Smart Headings for suggested text.

3. Enter a couple of keywords to give the AI some direction on the copy you need

4. Click Get Suggestions

 Screenshot showing the Smart Headings settings in Marsello, where users can enter a few keywords to guide the AI in generating copy suggestions. After entering the keywords, users are instructed to click the Get Suggestions button to receive content ideas.

5. Click Tone to adjust the tone of these suggestions as well to better suit your brand.

6. Click on the suggestion to add the copy to the form

Screenshot showing the Tone setting in Marsello, where users can adjust the tone of the generated content suggestions to better align with their brand. After selecting the preferred tone, users can click on a suggestion to add the copy to their form.

7. Click Save


Form fields block

Form Fields

As a default, the sign-up form fields include Name and Email Address. You can add more fields to your form to collect valuable information about your customers.

⚠️ Important: These name and email address fields are required in order to add the visitor to your POS and/or eCommerce and your Marsello customer databases

1. Click on the form fields to open the form settings

2. Under Form settings, click Add New Field

Screenshot showing the Form Editor in Marsello, where users can click on the form fields to open the form settings. Under Form Settings, the option to Add New Field is highlighted for users to customize their form further.

3. In the drop-down, click the field name or Add field

Screenshot showing a drop-down menu in the Marsello Form Editor, where users can click the desired field name or select Add Field to include additional fields in their form.

4. Edit the field conditions & click the Show Label tick box

  • Field Type: This sets the type of answer the customer can enter, e.g. Date will require the customer to enter the date in the form,

    • Text fields will require them to enter free text into the text box

    • Date fields will require them to enter the date in the form

    • Dropdown fields will require them to select one of the multi-choice options

  • Field Name: This is displayed in the backend of your Marsello App to help you identify the field.

  • Field Label: This is displayed on your form so customers know what information to enter.

  • Show Label tick box: When selected, this will display your Field Label on your form. If not selected, the Field Label will be hidden.

  • Placeholder text: This is displayed to give your customers an example of what they need to enter.

  • Required Field: When selected, this will require the customer to enter the information before they can submit their details.

    • If the customer doesn't enter this information it will error and ask the customer to complete the field.

    • If this field is not required, it will show as optional for the customer to enter.

5. Click Add field to save your new field option

πŸ“ Note: If you'd like to remove a field option from your form, you can click Delete and then Update Field to remove this field from your form.

 Screenshot showing the Field Settings in the Marsello Form Editor, where users can edit field conditions. Key options include Field Type (to set how customers will answer, such as Date, Text, or Dropdown), Field Name (for internal use in the backend), Field Label (displayed on the form for customers), and the Show Label checkbox (to display or hide the label). Additional options include Placeholder Text for examples and the Required Field checkbox, which makes the field mandatory for submission.

Submit button

You can also update the call-to-action button text in your Form content settings.


1. In the form settings, scroll down to the heading Button

2. Under Text, enter your preferred call-to-action text

Screenshot showing the Form Settings in Marsello, where users can update the call-to-action button text. Under the Button heading, users can scroll down to the Text field and enter their preferred call-to-action text to customize the button label.

3. Under Color, update your button to align with your brand. Click on the color picker box and enter your Hex Color Code or RGBA brand color

Screenshot showing the Button Color Settings in Marsello. Users can click on the color picker box under Color to update the button color, and then enter their Hex Color Code or RGBA brand color to align the button with their brand’s color scheme.

4. Update your additional button options:

  • Alignments: Where you'd like the button to sit on your form

  • Width: How wide the button is on your form

  • Font Size: Increase the font size within your button

  • Border: Adjust the border of your button

  • Rounded Border: Increasing this will make the button round

  • Padding: Increasing this will increase the space within the button i.e. will make the button bigger

  • Margin: Increasing this will increase the space around the button

As you make changes to your button settings you can see them in the form preview on the left.

 Screenshot showing the Button Settings in the Marsello Form Editor, where users can update additional button options. These options include Alignments (button position on the form), Width (button width), Font Size (button text size), Border (button border adjustments), Rounded Border (to create a round button), Padding (space inside the button to make it larger), and Margin (space around the button). Users can see real-time changes in the form preview on the left as they adjust these settings.

5. Click Save


Image block

Add an image to further brand your form and entices visitors to share their contact details.


1. Drag-and-drop an image block into your form. Click into the image block to open the settings

 Screenshot showing the Form Editor in Marsello, where users can drag and drop an image block into their form to add a branded image. Once the image block is added, users can click into it to open the image settings and customize the image placement.

πŸ“Έ Image best practices:
​

πŸŽ‰ Special Perks Await:
Sign up now to access exclusive benefits and stay ahead of the game!

πŸ“’ Join the Inner Circle:
Be the first to receive exciting updates, irresistible offers, and so much more!

2. [Optional] You can make additional edits to the image


You can use the image editor to resize, crop, or apply effects to your image.

1. Click on the Image content block in your email template.


2. In the Content column on the right, under the Image section, click Apply Effects

Screenshot showing the Image Editor in Marsello, where users can resize, crop, or apply effects to their image. Users can click on the Image content block in their email template, then in the Content column, under the Image section, click the Apply Effects button to customize the image further.

3. The Image Editor will automatically open:

Screenshot showing the Image Editor in Marsello, which automatically opens when users click to edit an image. The editor provides options to resize, crop, and apply effects to the image for further customization.

4. In the Image editor you can adjust the following settings:

  • Filter

  • Resize – Update the size of the image in your form

  • Crop

  • Transform

  • Draw

  • Text

  • Shapes

  • Stickers

  • Frames

  • Corners

  • Background To add in any further image customizations such as a specific URL or alternative text double-click into the image block and use the editor form to make those adjustments.

  • Merge

How to edit your image using the image

✨ You can use AI to help you write the copy ✨ editor

1. Click into image blocks to open Settings

2. Under Magic Images, click the Generate images button

Screenshot showing how to open image block settings in Marsello. Users can click into the image block to open its settings, then under Magic Images, click the Generate Images button to automatically create images for their content.

3. Enter a couple of keywords to give the AI some direction on the copy you need

4. Click Generate images. This will pull up a few suggestions of images you can use for your email campaign.

Screenshot showing how to provide keywords to guide the AI in generating images. Users can enter a couple of keywords to give direction on the required copy, then click Generate Images. This action will present a selection of image suggestions for use in their email campaign.

5. Click on the image you wish to use to add it to your form.

6. Click Save


Merchants also searched for: adjud, fomn, fopnt, fopn

Did this answer your question?