How to Create Fullscreen, Transparent or Fullwidth Bloom Opt-in Forms

In today’s tutorial, we’re going to show you how to create fullscreen, transparent and fullwidth opt-in forms with Bloom–a plugin that helps you add opt-in forms to your website. We’ll guide you, step by step, through the process of designing and setting up two example opt-in forms. By following this post carefully, you’ll be able to make the transparent opt-in forms yourself and use it on any website that has the Bloom plugin installed–whether it’s your own website or a client’s.

Having one or multiple opt-in forms on your website is something that doesn’t only help you stay in touch with your visitors, but engage with them as well. It’s hard to come across a website that doesn’t have an opt-in form nowadays because of the results-oriented data that it brings. By earning your visitors’ email address at the right time and place, you’ll get a step closer to getting to know them and making them loyal customers and/or visitors.

However, if you’d rather step aside from the standard opt-in forms, you may opt for a fullscreen, transparent or fullwidth opt-in form instead. We’ll show you the two examples in advance.

Table Of Contents

1 Example 1
2 Example 2
3 Creating a Fullscreen & Transparent Opt-In Form with Bloom: Tips
- 3.1 Activate the Opt-in Form First
- 3.2 Make the Changes According to Your Activated Form
4 Start Creating The First Example
5 Start Creating The Second Example
6 Final Thoughts

Example 1

Example 2

Creating a Fullscreen & Transparent Opt-In Form with Bloom: Tips

The Bloom plugin provides various possibilities to style your opt-in forms and attract your audience in the way that works best for both you and your visitors. In addition to the existing opt-in templates that Bloom offers, there are also built-in options that make it easy to create customized designs. You can also add custom CSS code to get more advanced results.

However, when trying to make some adjustments to the design through CSS code, there are some things you should bear in mind so you don’t lose time trying to make things work.

Activate the Opt-in Form First

When you’re designing your opt-in form, you have a preview button at the top of your Design tab. This helps you preview the results you’re making while designing. Although the built-in design changes automatically change in the preview as well, that doesn’t count for the CSS code. If you’re making certain changes through your Custom CSS field within your Design tab, it might be that some of those changes don’t apply to the preview form but do apply to the opt-in form on your website.

That’s why you’ll have to activate the opt-in form first, and make it apply to one of your pages. To make sure your visitors are not faced with the opt-in form while you’re still working on it, you can preview it on a new page that you haven’t shared with your visitors.

(Or, of course, on a staging/test site.)

Start by creating a new page and giving it a name. You don’t have to put anything into that page; it just has to exist. While you’re designing your opt-in form, go to the Display Settings tab. Set the delay time to 1 second so you won’t have to wait for the opt-in form everytime you want to check the result.

Scroll down that tab and when you come across the ‘Display On’ option, select ‘Page’. Once you’ve selected ‘Page’, you’ll see a list of pages that are active on your website appear. Choose the page that you’ve recently created. Make sure you display the opt-in form on that page only.

Make the Changes According to Your Activated Form

The changes that you make with the CSS code don’t apply to all the opt-in forms; they only apply to that opt-in form you’re working on specifically. That’s why some of the classes that we need will be unique.

Later on this post, we’ll show you how to do that for the examples we’re recreating.

Start Creating The First Example

The first example we’re showing you how to recreate is the one in the print screen above. You can see that the opt-in form appears to be fullscreen. Although it might seem like that, we’ve only made a transparent opt-in form and changed the background colors.

Add The Opt-In Form

Let’s begin by adding a new opt-in form to your website by going to your WordPress dashboard > Bloom > Click on ‘New Optin’ in the right corner > Select ‘Pop up’.

Type down a name for your form and select your email provider in the Setup tab. When that is done, you can go to the Design tab. That’s the main tab we’ll be focusing on in this post. Select one of the templates that are provided and continue. For the examples we’re making, we’re choosing the first one in the row.

Design Settings

When you preview the form in the Design tab without making any modifications, you’ll see the following opt-in form appear:

It looks quite different than what the result will look like but you can also notice that the foundation of the opt-in form is the same.

Opt-In Title & Message

Now, to get our opt-in form to look like the example we showed you above, start by making the following modifications to the standard design settings of the Optin Title and Optin Message within the Design tab:

Text Color: #FFFFFF
Text Style: Bold
Text Orientation: Center

Image Settings & Optin Styling

Scroll down the same tab and make the following adjustments to the Image Settings, Optin Styling and Border Style:

Image Orientation: No Image
Background Color: Clear
Header Font: Lato
Body Font: Lato
Text Color: Dark Text
Corner Style: Squared Corners
Border Orientation: Top + Bottom Border
Border Color: #FFFFFF
Border Style: Dashed Border

Border Style, Form Setup & Form Styling

Continue scrolling down and make the make the following modifications to the Form Setup and Form Styling as well:

Form Orientation: Form On Bottom
Name Field(s): No Name Field
Email Text: Email
Button Text: SUBSCRIBE!
Form Field Orientation: Stacked Form Fields
Form Field Corner Style: Rounded Corners
Form Text Color: Light Text
Form Background Color: Clear
Button Color: #6a18a0
Button Text Color: Light

Form Edge Style

The last manual change you’ll have to make the opt-in form is choosing the form edge style which is, in this case, a straight line.

Custom CSS

Lastly, we need to make some CSS modifications to the form to set everything in place. Copy and paste the following lines of code into the Custom CSS field:

.et_bloom .et_bloom_popup:after{
background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content
{ background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

Change The Code According to Your Own Bloom Opt-in Form

In the code that we’ve shared with you, you’ll have to make three adjustments. Some CSS classes only apply to one opt-in form, that’s why we’ll need to know which opt-in form we’re working on. The only thing you’ll have to do is change one number three times:

The number at the end of the highlighted part in the print screen above is 6 because it’s the 6th one in the row:

So, depending on what position it has within your list of forms, you’ll have to adjust the number.

Final Result

If you preview your opt-in form now, you’ll notice that all the modifications have been made and that your opt-in form looks like this:

Display Settings

You can now go over to the Display settings and make the needed modifications to set up your Bloom opt-in form. We’re not going to go into deeper details since this post will only handle the design part of these opt-in forms.

Start Creating The Second Example

The next example that we’re going to show you is not fullscreen but fullwidth instead. To demonstrate how we can achieve the result, we’re going to use the same opt-in form as in the previous example but make some small changes to it and add different CSS code.