Bloom Lets You Customize Everything
Blooms come with many different design settings, allowing you to adjust almost every aspect of your opt-in form.
After creating a form and choosing a base template, you will be taken to the Design tab, where you can continue to modify various aspects of your design, as outlined below.
Title and Message
Here, you can adjust the text content that appears within your opt-in.
Optin Title
This header will appear at the top of your form in large text.
Optin Message
This text will appear below your header and will use a smaller font size. The title and message fields can be used to describe your newsletter or special offer. They can also be left blank if you want to leave the text out of your opt-in.
Both the title and message can be modified using the post editor, allowing you to adjust font color, weight and orientation.
Image Settings
Here, you can add an image to your opt-in and adjust where that image appears within the opt-in box.
Image Orientation
This setting affects where the image appears within your opt-in form. You can choose from several options:
No Image,
Image above text,
Image below text,
Image right of text,
Image left of text,
Image URL
This is the URL to the image that you would like to use within your opt-in box. You can input a custom URL to a static online resource or click the Upload Image button to upload your image to use in the form.
Image Load-In Animation
Images can be assigned a load-in animation. When the image is first loaded, this animation will occur. It can be a nice subtle touch that catches your visitor's eye and encourages them to read your message and subscribe to your list.
Hide Image On Mobile
If you are worried about the size of your mobile opt-in form, you can disable the image when browsing your website on mobile devices. This will hide the image on mobile and give more room for your title, message and input fields.
Here is an example of two opt-in forms, both of which have images enabled. One has the image placed on the left, while the second has the image placed below the text.
Opt-in Styling
These design settings affect the entire opt-in form and constitute a set of general styles for your form.
Background Color
Used to change the background color of your opt-in.
Header Font
Used to change the font that is used for your opt-in title.
Body Font
Used to adjust the font that is used for your opt-in message.
Text Color
This will change the color of both your opt-in header and body.
You can choose between light and dark, depending on your chosen background color.
If you have chosen a dark background color, make sure your text is set to light to be visible. If your background is a light color, make sure your text color is set to dark.
Corner Style
Used to choose a corner style for your opt-in.
Selecting rounded corners will apply rounded corners to the outer edges of the opt-in box.
Border Orientation
Used to add a border to your opt-in.
This border can be applied to all 4 edges or single edges.
Border Color
If you choose to add a border to your opt-in, you will then see the border color options.
Here, you can choose a color for your opt-in border. To give you an idea of how different styles look, here are two examples of opt-ins with adjusted styling.
The one on the left has a dark blue background color with light text, and it has no border. The opt-in on the right has a white background color with dark text and a full border.
Border Style
If you have chosen to include a border, you can customize its style and shape in this section, in addition to the color settings in the previous section.
Solid
This border style creates a simple, solid, and thin border around your opt-in's edge.
Dashed
The dashed border creates an inset dashed line around the outer edge of your opt-in.
Double Stroke
The double stroke is similar to the Solid border but with an additional solid inlay to create a double-bordered appearance.
Inlay
The inlay border is a solid line inside the opt-in, unlike the solid border.
Letter
This creates a more playful border, imitating a classic snail-mail letter.
Form Setup
Within the opt-in box, you can adjust the colors and placement of the form and input fields.
Form Orientation
This adjusts where the form fields appear within your opt-in box. You can choose to have the form appear above, below or to the left or right of your opt-in title and message.
Email Text
This adjusts the placeholder words used within the email input form.
Button Text
You can modify the text displayed on the submission button from this section.
Button Text Color
You can customize the color of the text that appears on the submission button. To illustrate this, consider two forms that have been adjusted in their form setup settings. The left-hand form has the position set to bottom, whereas the one on the right has been set to left.
Form Styling
These settings apply to the actual form inside of the opt-in box.
Form Field Orientation
This adjusts how the input fields appear within the form itself. You can choose to have your input fields displayed inline in a single row, or you can choose to have the fields stacked up on top of each other.
Form Field Corner Style
Adjust the style of fields with rounded or squared corners.
Form Text Color
Adjust the text color within form input fields for readability.
Form Background Color
This setting allows you to change the background color of the opt-in form. The opt-in form has two main colors: the background color and the foreground color.
Form Button Color
The option allows you to customize the color of your submission button. This customization is applicable to both stacked forms and inline forms. Below, you can see two examples of forms that have been customized. The first one has stacked forms, while the second one has inline forms. Both of them have had the background color of the opt-in form adjusted. In addition to this, the button color of the orange form has been changed to white.
Form Edge Style
In each opt-in box, there is an edge that separates the form from the text content. Here, you can apply different styles to that edge, giving your opt-in box a unique feel.
Footer Text, Success Message and Custom CSS
These settings give you extra control over the messages that appear during form submission and the ability to add custom CSS tweaks to individual forms.
Form Footer Text
This message will appear below the form input fields. A common use might be to link to a privacy policy or ensure your users that you will not spam or share their information.
Success Message
This message appears after a visitor has successfully subscribed to your email list.
Custom CSS
Here, you can add custom CSS that will apply only to the form you are building.