Headers not only make a strong first impression with a visual impact, you can also use them to break long forms down into manageable, easily digestible sections. This makes them easier to follow, and gives your clients a better experience.

There's a reason it's one of my most requested tutorials — Full width headers are one of the most quickest and effective ways to blur the lines between Dubsado form and website.

Pair this with Dubsado's Smart Fields, and you'll be standing out from your competitors in no time.

Why is it such a struggle with Dubsado?

Dubsado forms are built within containers—the content we create with their drag-and-drop builder gets locked in within this container.

The trick is getting outside of Dubsado's containers, which is only possible with a little CSS magic (okay technically it's possible with other types of code, but we'll just be looking at CSS here).

This tutorial will cover:

In this tutorial, we'll show you how to break away from Dubsado's restrictive containers — including the copy + paste HTML and CSS code so that you can get a beautiful header into your form straight away.

We'll also be covering how to add a background colour or background image for your headers — including some extra customisations like parallax and animations in case you wanna get fancy.

And lastly, if you don't want to learn the code — you can use the Code Generator below to customise a header template that completely matches your branding, and grab the generated code to paste into your Dubsado form.

In the Code Generator, you'll be able to:

• Use an image of colour for your header's background
• Insert text and style all the typography details
• Add 6 different animation styles
• Apply parallax effect

— all without touching a single line of code!

Upload your background image

// Optional: If you want a coloured header, you can skip this step.

Open up your Dubsado form, drag in an Image Block and upload the image you would like to use for your header → click your image file → Close.

You should see the image in your Dubsado form → Right-click → Click Copy Image Address

Don't worry about whether the image is landscape or portrait — the code will crop the image accordingly to fit. But do make sure it's high-resolution and at least 1920px wide — this is so that it stays sharp and clear for larger screens. Click here to learn more about images in Dubsado.

The Header Code

Once you've got your background image URL, open up your Dubsado form and drag in a Code Block to the very top of your form.

Background Image

Replace all of the sample code with the following:

<div class="full-width header" style="background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(https://searchandgrow.com/image.jpg);">
	<div class="header-inner">
		<h1>Title</h1>
		<h3>Subheading</h3>
	</div>
</div>
<style>
	.full-width {
		width: 100vw;
		margin: 0rem -50vw;
		position: relative;
		left: 50%;
		right: 50%;
		z-index: 99;
	}
	.header {
		background-size: cover !important;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-position: center !important;
		background-repeat: no-repeat;
	}
	.header-inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 100%;
		width: 100%;
		padding: 50px 0px;
	}
	.header-inner h1 {
		color: #ffffff;
	}

	.header-inner h3 {
		color: #ffffff;
	}
</style>

Update the following:

1. Title and Subheading

Lines 3 + 4: Update the Title and Subheading for your header

2. Background image URL

Line 1: Replace my URL https://searchandgrow.com/image.jpg with the image URL for your section header background from the previous step — just be mindful of keeping the brackets on either side.

3. Background Overlay

We also have a background color overlaying the background image—this is to help the white text stand out.

Line 1: Take a look at this line: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))

You see the decimal number in two places (0.3 in the example above)? Change this number (both instances) to anything between 0 and 1 (0 for lighter, 1 for darker).

4. Text Colour

Lines 43 + 47: Change the hex codes here from #ffffff (white) to the colour hex code you'd like for your title and subheading respectively.

Background Colour

Replace all of the sample code with the following:

<div class="full-width header" style="background-color: #HEXCODE;">
	<div class="header-inner">
		<h1>Title</h1>
		<h3>Subheading</h3>
	</div>
</div>
<style>
	.full-width {
		width: 100vw;
		margin: 0rem -50vw;
		position: relative;
		left: 50%;
		right: 50%;
		z-index: 99;
	}
	.header-inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 100%;
		width: 100%;
		padding: 50px 0px;
	}
	.header-inner h1 {
		color: #fff;
	}

	.header-inner h3 {
		color: #fff;
	}
</style>

Update the following:

1. Title and Subheading

Lines 3 + 4: Update the Title and Subheading for your header

2. Colour hex code

Line 1: Find #HEXCODE and replace with your colour's HEX code.

4. Text Colour

Lines 43 + 47: Change the hex codes here from #ffffff (white) to the colour hex code you'd like for your title and subheading respectively.

Stuck on colours?

Take a look at Muzli Colors, Coolors, my Pinterest board for inspiration.

Parallax Headers

// Optional: Can only be applied to headers with a background image.

Parallax headers are a cool scrolling effect that you can apply to your images.

Just keep in mind that parallax doesn't work well on tablets—and is completely disabled from mobile browsers—so we will need to change the headers to static for those devices.

1. Set parallax style

Open up the Code Block we set up right at the start (in case you have additional).

Now we are going to add this extra CSS code right at the bottom, just before the closing </style> tag:

.parallax {
background-attachment: fixed !important;
}

@media only screen and (max-width: 767px) {
.parallax {
background-attachment: scroll !important;
}
}

By doing this, we have set the style for parallax.

2. Apply parallax style

We now need to tell our HTML where we want to apply it by adding in a parallax class.

To do so, open up the Code Block with the header you'd like to make parallax.

In the first line, you'll see: <div class="full-width header">

We need to add parallax to end of the list of classes (before the closing ")—like this:

<div class="full-width header parallax" style="background-color: #HEXCODE;">
	<div class="header-inner">
		<h1>Title</h1>
		<h3>Subheading</h3>
	</div>
</div>

And that's it!

Animated Headers

We will be adding animations in the same way we added parallax to our headers—we'll add in some code to the CSS (create the style). Then apply the class to our HTML (apply the style).

Fade in effect

To create a fade in effect, add the following code to your CSS (just before the closing </style> tag)

.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

Then apply the class fade-in to the section that you want to apply the animation to:

Apply effect to whole header

If we apply the style to Line 1, the fade-in effect will apply to the entire header (text and background image):

<div class="full-width header fade-in" style="background-color: #HEXCODE;">
	<div class="header-inner">
		<h1>Title</h1>
		<h3>Subheading</h3>
	</div>
</div>

Apply effect to content only

We can actually get even more granular and have only the title and subheading fade in; in which case you would add the animation like this:

<div class="full-width header" style="background-color: #HEXCODE;">
    	<div class="header-inner fade-in">
		<h1>Title</h1>
		<h3>Subheading</h3>
	</div>
</div>

Grow effect

Here is the CSS to add before the closing </style> tag:

.grow {
  animation: grow ease 1s;
  -webkit-animation: grow ease 1s;
  -moz-animation: grow ease 1s;
  -o-animation: grow ease 1s;
  -ms-animation: grow ease 1s;
}

@keyframes grow {
        0% {
            transform: scale(0.9);
            -webkit-transform: scale(0.9);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
}

@-webkit-keyframes grow {
        0% {
            transform: scale(0.9);
            -webkit-transform: scale(0.9);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
}

And to apply the grow effect, add the class grow :

<div class="full-width header" style="background-color: #HEXCODE;">
    	<div class="header-inner grow">
		<h1>Title</h1>
		<h3>Subheading</h3>
	</div>
</div>

Code Generator

Running short on time? Or just want to create a spankin' new header template for your Dubsado form without touching a single line of code? Use the Code Generator below to access our free tool to create a header with all the above (and more).

If you're wanting to have a background image, don't forget to upload your image to Dubsado before opening up the generator.

Once you've got your background image URL, open up your Dubsado form and drag in a Code Block to the very top of your form.

Now open up the generator and customise your header!

the Code
Generator

To access this generator, please enter the password:

Submit

//  sign up for free access

Yes please!

You’ve successfully signed up! Check your email for details.

How's your new header looking??

I'd love to see what you create, just email me or leave a comment below!