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. 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
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
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
3. In the drop-down, click the field name or Add new field
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 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.
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
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
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.
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 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
3. The Image Editor will automatically open:
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
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
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.
5. Click on the image you wish to use to add it to your form.
6. Click Save