How to use Mailify Sunrise's form editor?

The Mailify Sunrise Form Editor is a form editor.

Forms are very useful for collecting new contacts from your site, registrations for an event, or sending a survey to your clients.

You will find all the information on the various types of forms as well as their various integration methods in the "Forms" section of this user manual.

We will go into detail on the "elements" of the form, i.e. the design of the form itself and the many formatting options that can be applied.

We will review each element of the form editor: Interface   |  Contents   |  Styles   |  Actions

Preamble

The form editor is identical for each form type selected beforehand.

The only exception to the rule is the option "double opt-in" only when you create a form "Registration/update".

You will have access to the FormBuilder on the editing step during the process of creating your forms, whatever type you have chosen.

By default, a preformatted form is proposed to you by Mailify Sunrise. You have the leisure to modify it as you wish:

Interface

Like the Mailify Sunrise EmailBuilder, the form editor is based on the principle of 'drag-and-drop'.

The right pane allows you to modify the contents and styles of your form, or to write a thank you message for those who have completed it.

It is possible to increase the size of your work plan in order to gain comfort of use.

• Increase the width of your worktop by folding the right pane

Click this button, located at the top of the right pane to fold the pane. This action will be reversible by clicking this button again.

• Increase the height of your worktop by switching to full-screen mode

Click this button, located at the top right of your workbench, to hide the left column and the header bar.

By default, the display mode of your work plan is in ""desktop"" version, that is to say that you view your form as if it were consulted on a computer.

You can view the display of your form on mobile by clicking on the ""Switch"" button located above your work plan.

You can also view the display of your form on a web page by clicking on the button at the top right of your work plan.

Content

Unlike EmailBuilder, you do not have to create a block before you upload content.

The form itself consists of only one is a single block in which it is possible to deposit only content type "Question".

Other types of content can be dropped either below or above the form and represent in themselves a block of content. It is not possible, for example, to deposit an image, text or a Google Map within the form.

Questions  |  Image   |  Text   |  Space   |  Separator   |  Floating picture   |  Google Maps

Question

This content is the only one you can deposit in your form.

It allows you to insert a new "Question". The heading "Question" may be confusing, as it is not necessarily a question. This is more of a piece of information you want from your contacts. This information may or may not be mandatory, for you to decide.

To insert this content, click on it and drag and drop it directly on the worktop, within the main container of the form. The container is highlighted when you are about to add your question to tell you that you can drop it there.

There is another way to create a new question: click directly on the "+" button located under the last question of your form.

Once you have submitted a new question, several actions are possible on it: you can move it, delete it, or edit it.

To edit a question, click the "Edit" button that appears when you hover over your question.

A new window titled "Properties of the question" will appear.

For forms "Registration/update" you must establish a corresponding column in your list of contacts for the form fields, so that the entered data is collected in the right columns of your list. For example, if you insert a field "First name" in your form, it will be necessary that the data entered in this field goes into the column "First name" of your contact list.

For "Event" or "Survey" forms, it is not necessary to match the field to a corresponding dolumn as the data is not being reported in an existing contact list.

Window "Properties of the question" of a form type "Registration/Update" vs. "Event" or "Questionnaire" type.

This is where you will be able to choose the type of question you want to add to your form:

Regardless of the type of field selected, you can customize the field name on your form by double-clicking it

Type "Simple text field"

This type of question allows you to insert a free entry field.

It is particularly suitable for textual responses that do not require a particular format, such as names, first names, or addresses...

It is not recommended to use this type of question to request an email address for example. In fact, it is better to check that the responses of your contacts will be email addresses and respond well to an "email" format. For this, there is a type of question "Email field".

In the same way, it is not recommended to use this type of field for open questions. There is a "Multiline field" type that allows you to display a larger input field than just a text field.

Type "Number"

This type of field is suitable for entering numeric characters (for example: "Postal code" or "Street number"): only numerical characters can be typed in this type of field.

Do not use this type of field for inserting a phone number. There is a type "Telephone" provided for this purpose.

Type "Email field"

This type of field is suitable for inserting an email address.

The interest of associating this type of field, and not a type "simple field text" is the following one: an error message will be displayed when a person will not enter a valid email address in your form.

Type "Phone"

This type of field is appropriate for inserting a phone number.

Your contacts will only be able to insert digital content into this field.

Type "date"

This type of field is appropriate for the insertion of data of type "date". For example, it is useful if you want to request a birth date.

When you select this type of question, a drop-down menu allows you to determine the date format that suits you (d = day, m = month, y = year).

Type "Multi-line field"

This type of field is appropriate when you want to request text type information that can take multiple lines of writing.

The lower right corner of this field allows you to enlarge or reduce the size of the input area as you see fit.

Type "drop-down list"

This type of field is appropriate when you want to offer predefined choices to your contacts:

You can remove options by clicking on the cross in front of each one. You can also add options by clicking the "+" button to the right of the options.

The visual rendition of your drop-down menu will be different when your form is published: it will not be presented as a tree (as above) but as a drop-down list (as below).

You can achieve the same goal by creating a single choice question. However, the drop-down list is more appropriate when you have a large number of possible answer choices. You are free to choose the format that best suits your needs.

Type "Multiple Choice"

This type of field is appropriate when you want to offer several possible response options to your contacts.

You can add as many answer choices as you want by clicking the "+" button.

In the "Question properties" window you have the option of determining whether you want to display each choice one after the other, or one above the other.

Type "Single choice"

This type of field is appropriate when you want to offer several response options to your contacts, but they should select only one.

Like multiple choice questions, you can add as many answer choices as you want, and you can align your answers one after the other, or one above the other .

The big difference with "Multiple choice" comes from the fact that a radio button is inserted instead of a checkbox, which limits the choice to only one answer.

Mandatory or optional answers

When you edit a question, the "Required answer" option is available at the bottom of the "Question properties" window.

If the option is activated, the question will be made mandatory and the form can not be validated without answering your question.

If the option is disabled, the question will be optional and the form will be validated without the contact having answered.

 Image

This content allows you to insert an image above or below the form.

To insert this content, click on it and drag and drop it directly onto the desktop. The container is highlighted when you are about to add your content to tell you that you can drop it there.

Once you have deposited it, several actions are possible on this type of content when you hover over it:

• Choosing an image: allows you to select an image

by browsing the files on your computer

Image Bank: Allows you to select an image from the free image bank of Mailify Sunrise

From a URL: allows you to insert an image by inserting the hosting link of your image

Insert Variable: If your recipient list has an "Image" column that lists links to images for each recipient, your image will be customized to each of your recipients. Learn more about dynamic personalization fields.

Clone Image: Allows you to create a duplicate of your image. The new image is automatically added under the initial image, in the same container as that of the initial image

Move Image: allows you to change the current location of your image. Drag and drop the image to another location on your form.

Delete Image: Allows you to delete the image from your form. A "Confirm" button will appear when you click on "Delete image". You will need to confirm the deletion for it to be effective.

Edit image: the "edit" button appears once you have inserted your image. When you click on this button, a window "Properties of the image" appears. You can also directly access the properties of your image by clicking on it.

You can then modify the dimensions of the image by adjusting the width and height (in pixels) of the image. A padlock pictogram allows you to manage the dimensions of your image while maintaining the initial proportions between height and width (locked padlock) or by managing these dimensions independently of each other (padlock unlocked). We advise you to avoid stretching or crushing your image by changing the size of your image after unlocking the padlock. This will have the effect of deforming it and the aesthetic rendering will be degraded.

You can also manage the alignment of your image within the block in which it is embedded: Align your image to the left, center, or right of the container according to your preferences.

Finally, you can insert a clickable link on your image, as well as a caption (alternative text displayed in case of non-download of your image by the email client of your recipient).



       

Retouching the image: When you have clicked on "Edit the image" and the "Image properties" window appears, click on the "Retoucher" button at the top of the image. You will then have access to the integrated image editor of Mailify Sunrise which will allow you to make a wide choice of corrections to your image in order to improve the visual rendering.


 

 Text

This content allows you to insert a text box above or below the form.

To insert this content, click on it and drag and drop it directly onto the desktop. The container is highlighted when you are about to add your content to tell you that you can drop it there.

Once you have dropped your text box, several actions allow you to customize your text:

When you click within your text, an editor appears, and allows you to apply most of the formatting of your usual word processing software, including (from left to right):

• Change font
• Increase / decrease font size
• Put color on your text
• Bold
• Italicize
• Stress text
• Barring text
• Put in index
• Exhibit
• Increase / decrease the line spacing
• Align your text (left, right, centered, justified)
• Insert a list of chips
• Insert a numbered list
• Insert a dynamic personalization field
• Apply a style (Title 1, Title 2, Paragraph)
• Apply a background color to your text
• Insert a floating picture within your text
• Insert a link
• Delete an existing link

Like other content, you can move, clone or delete your texts.

 Space

This content allows you to insert vertical escpacement above or below the form.

To insert this content, click on it and drag and drop it directly onto the desktop. The container is highlighted when you are about to add your content to tell you that you can drop it there.

Once you've dropped it, there are several things you can do with this type of content when you hover over it: you can adjust the height of this vertical space, from a minimum of 10 pixels to a maximum of 100 pixels.

 
Like other content, you can move, clone or delete it.

 Separator

This content allows you to insert a horizontal separator above or below the form.

To insert this content, click on it and drag and drop it directly onto the desktop. The container is highlighted when you are about to add your content to tell you that you can drop it there.

Once you have deposited it, several actions are possible on this type of content when you hover over it:

In particular, you can customize the color, thickness, and style of the separator by clicking the "Separator properties" button.

Like other content, you can move, clone or delete it.

Imagen flotante

This content allows you to insert a floating picture, ie an image surrounded by other content (usually text) below or above your form.

To insert this content, click on it and drag and drop it directly onto the desktop. The container is highlighted when you are about to add your content to tell you that you can drop it there.

Once you have deposited it, several actions are possible on this type of content when you hover over it:

When hovering over the image, an icon symbolizing a gear appears. Click on the gear to insert an image.

A drop-down menu appears asking you to insert an image. The insertion modes are the same as those described in the section concerning the content type "Image".

Select the image of your choice with the method that suits you best.

Once your image is inserted, a "Property" button appears in the drop-down menu when you click on your image.

Click this button to access the settings of this one:

A new settings window will appear on the screen:

• Touch up: allows you to access the image editor Mailify Sunrise to make the desired corrections
• Width/Height: allows you to increase or decrease the dimensions of your image. A padlock allows you to increase these dimensions proportionally (locked padlock) or disproportionately (padlock unlocked). However, we advise you to avoid disproportionately changing the dimensions of your image, this will stretch or crush your image and render it unattractive.
• Alignment: allows you to place your image at the top left, or at the top right of your textual content.
• Margin: Allows you to adjust the margin around your image - the lower your margin, the closer the text will be to your image.
• Link: Allows you to insert a link on your image to make it clickable by your recipients. Fill in the URL of your choice in this field.
• Caption: Add an alternative text to your image. This text will not be visible on Mailify Sunrise, but in case the images of your form could not be displayed, this alternative text would be displayed in place of them. Describe at best what your image represents in the field provided for this purpose.

Like other types of content, the float image can be duplicated, moved or deleted by using the action buttons that appear when the content is flown over.

 Google Maps

This content allows you to insert a map (generated by Google Maps) below or above your form.

A Google Maps is automatically inserted when creating an "Event" form.

To insert this content manually, click on it and drag and drop it directly onto the desktop. The container is highlighted when you are about to add your content to tell you that you can drop it there.

Once you've dropped it, there are several things you can do about this type of content when you hover over it:

Click "Generate plan" to validate the creation of the Google Maps map image.

It is not an interactive map, but a snapshot of the location of the specified address.

An "Edit image" button allows you to access the image settings.

• Dimensions: if "Full width" is selected, the image will occupy 100% of the maximum width allocated to it, i.e. 100% of the width of the container. If "Custom" is selected, you can adjust the width and height of your image as you see fit. The padlock allows you to adjust the width dimensions in proportion to the height so you do not stretch or compress your image. You can unlock the padlock to adjust the width or height independently of each other, but this is not recommended for aesthetic reasons.
• Alignment: Once the size of your image is right for you, the "Alignment" option allows you to position your image to the left, right, or center of your container. available only if you have chosen a "Custom" dimension (in the case of a "Full width" dimension the question of aligning your map does not arise since it occupies the full width of your container).
• Link: You can make the image of your map clickable by inserting a link. For example, you can send your recipients to your address information on Google Maps so that they can navigate on it and optionally draw a route from their current location (this is the default link that is inserted by Mailify Sunrise). You can also choose to send them back to your website. You are free to customize the link as you see fit.
• Caption: add an alternative text to your image. This text will not be visible on Mailify Sunrise, but in case the images of your form could not be displayed, this alternative text would be displayed in place of them. Describe at best what your image represents in the ""Legend"" field. In the case of your Google Maps image, you could for example remember the address you used to generate your map.

Like other types of content, Google Maps can be duplicated, moved or deleted thanks to the action buttons that appear when hovering over the content.

Estilo

You can customize the appearance of your form by modifying the attributes of the ""Styles"" topic located in the right pane of the Form Editor.

• Background: Allows you to change the background color around your form.
• Form Background: Allows you to change the background color of the form itself.
• Form Fields Background: Allows you to customize the inner color of the form fields.
• Form Field Border: Allows you to customize the color of the field border of your form.
• Labels and Options: Allows you to customize the color of the labels above the fields, as well as options when it is a multiple choice question or a single choice question.
• Placeholder: Allows you to customize the color of the text arranged in your field, waiting to enter text from your contact.
• Container - Rounded Edges: Rounds the corners of your form by itself.
• Container - Drop shadow: Add a drop shadow to your form itself.
• Fields - Rounded Edges: Rounds the angles of your form by itself.
• Shadow Fields: Add a drop shadow within your input fields, or outside of your input fields.

Sample form created with Mailify Sunrise

Action

The "Action" section of the right pane allows you to set a message that will be displayed once the form has been validated, or to return the person to a web page of your choice.

In the case of a form "Registration/Update" (only), you also have the possibility to add a confirmation of registration by double opt-in. A registration confirmation email will then be sent to the person who has just registered by completing the form.

The double opt-in designates a double confirmation of registration to your email list. This is an alternative to the single opt-in, which requires just one confirmation. It allows you to improve the quality of the registrations you generate and thus improve the quality of your database. You will avoid false, incorrect and unsolicited entries, or registrations generated by bots ("robots").

To activate the double opt-in, simply activate the switch button located in front of "verification of registration".

• At the insertion of a new contact: in this section, fill in the title and the text of the message that will be displayed on the screen for the people who have filled in your form and let them know that they will receive a registration confirmation email and they will have to click on the link in this email to validate their registration.
• Automatic confirmation email: this is to set the email that will be sent automatically when your form has been submitted. Enter the subject of your email, your sender's name, the sender's email and a reply email.