All Collections
Marketing
Forms
Forms customization blocks
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-dropto 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. Click into the text and heading blocks to open Settings

2. Under Smart Headings, click the See the Magic button

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

4. Click Get Suggestions

Get_Form_Suggestions.png

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

Suggestions.png

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

Group_1_-_2023-03-03T212235.517.png

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

Group_1_-_2023-03-03T212713.509.png

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.

Group_1_-_2023-03-03T213134.138.png

5. Click Update 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.

Group_1_-_2023-03-03T213350.403.png

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

Group_1_-_2023-03-03T223240.243.png

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

Group_1_-_2023-03-03T223401.875.png

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.

Group_1_-_2023-03-03T223942.639.png

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

2. Click the image block to open the settings

image_block.png

πŸ“Έ 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!

3. [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

Group_1_-_2023-02-20T011634.316.png

3. The Image Editor will automatically open:

image_1__4_.png

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

Image_Block_Generate_Images.png

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.

Generate_Images2.png

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

6. Click Save

Did this answer your question?