Header
The Look
Start off with a bang by adding a mobile-friendly, responsive banner to your forms with text overtop a background image. Add your logo, make it clickable and direct people to your website with an interactive rollover state that changes opacity on hover.
The HTML
This is your HTML. Drag a Code Block onto the top of your Dubsado form, above everything else. Copy and paste the following code into the block.
<!-- HEADER HTML -->
<div class="header">
<div class="heading-container">
<div class="animate fadeInUp">
<h1>This is your heading 1 text</h1>
<h3>This is your heading 3 text</h3>
<div id="header-logo">
<a href="https://www.your-website.com/" target="_blank"><img src="https://your-logo-url.png">
</a>
</div>
</div>
</div>
</div>
<!-- END HEADER HTML -->Update the text between <h1>This is your heading 1 text</h1> (title of form would be good here) and <h3>This is your heading 3 text</h3> (maybe your prospect/client’s company name followed by the project name).
To add your logo and make it a link, first copy the url where you want your visitors to go when they click on your logo (your website or social media page to show examples of your work would be a good idea). Paste the url in between the quotations where you see <a href="https://www.your-website.com/" target="_blank">.
Upload a .PNG of your logo (best file format to use because of their ability to display transparent backgrounds), copy your logo URL (see The Notes tab above on how to find your URL), and paste it into the HTML code between the quotations where you see <img src="https://your-logo-url.png"></a> (directly after the url you just pasted in the first step). Instructions for uploading images and finding their URL are at the bottom of this section.
The CSS
This is your CSS. Copy and paste the following code—in the same block—beneath the HTML code that you just pasted from above.
<style>
/* HEADER STYLE 1 CSS */
.row.hidden-print.ng-scope {
background-color: #242424; /* Choose your primary or secondary color */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
margin: 0rem -50vw;
position: relative;
left: 50%;
right: 50%;
padding: 25px 100px;
top: 0;
z-index: 999;
}
@media only screen and (max-width: 630px) {
#quote-flow td {
display: block;
}
}
#quote-flow #magic-line {
display: none;
}
#quote-flow a {
color: #fff !important;
font-weight: 600;
font-style: normal;
font-size: 14px;
letter-spacing: .2em;
text-transform: uppercase;
transition: color 170ms ease-in-out, background-color 170ms ease-in-out;
text-decoration: none;
display: block;
margin: 0 auto;
padding: .618em 0;
}
#quote-flow a:hover {
opacity: .5;
}
.header {
background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://res.cloudinary.com/dubsado/image/upload/v1569007118/awkdsqespqatwtfu8zuh.jpg); /* Replace the url with your background image url */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 96;
text-align: center;
color: white;
top: 0 !important;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: -1px;
background-size: cover;
}
.header h1 {
font-family: oswald, sans-serif; /* Replace your font here */
font-style: normal;
color: #ebebeb;
font-size: 33px; /* Adjust the size of your font here */
}
.header h3 {
font-family: 'Cormorant Garamond', serif; /* Replace your font here */
font-weight: 300;
font-style: italic;
color: #ebebeb;
font-size: 24px; /* Adjust the size of your font here */
}
#header-logo {
padding-top: 15px;
padding-bottom: 25px;
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
#header-logo:hover {
opacity: .7;
filter: alpha(opacity=100);
}
.heading-container {
position: relative;
width: 100%;
padding: 50px;
overflow: hidden;
}
.animate {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.animate {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.container {
padding-top: 0px;
}
.padding-30 {
padding-top: 0px;
}
.col-sm-12.hidden-print.padding-top-20 {
display: none;
}
scheduler-header .scheduler-header {
display: none;
}
/* END HEADER STYLE 1 CSS*/
</style>Upload a background image, copy the image URL (see The Notes tab above on how to find your URL), and paste the url in between the round brackets (parentheses) where you see url (https://your-background-image-url.com);
Update your fonts according to your brand after where you see font-family: and font-size: (you could even delete these if you have your font’s <h1> and <h3> already set up and in order).
The Notes
Make sure the Header Code Block is at the very top of your form. Meaning, any block that you add to your form, should be placed beneath the Header Code Block.
You can certainly use your own web host to upload your logo and background image files and retrieve their URLs this way, but using Dubsado’s server will be more efficient (making your forms load faster). If you don’t have a web host or you would rather Dubsado host your images (recommended) you can do so by following these instructions:
Drag an Images block onto your form, click the block and upload your logo and background image files like you normally would for your Dubsado forms.
After your files have uploaded, click on your logo file first so that your logo shows in the block.
Click Close, right click the block with your logo and click Copy Image Address.
Paste the address accordingly (into the HTML code block above between the quotations where you see <img src="https://your-logo.png"></a>
Next, click on your Images block again, then click on the background image you just uploaded. Repeat the steps above to locate your background image url.
Copy the url and paste it accordingly (into the CSS code block above between the round brackets (parentheses) where you see url (https://your-background-image-url.com);
After you retrieve and paste your logo and background image urls, delete the Images block.
Customize
If you don’t have a logo (*cough* hire me *cough*) or you would rather not use your logo within your Header, replace the HTML with the following code, at the top of your ‘Code Block’:
<!-- HEADER HTML -->
<div class="header">
<div class="animate fadeInUp">
<h1>This is your heading 1 text</h1>
<h3>This is your heading 3 text</h3>
</div>
</div>
<!-- END HEADER HTML -->Want to disable the slide up transition? No problem! Just replace your HTML with the following updated HTML.
<!-- HEADER HTML -->
<div class="header">
<div class="heading-container">
<h1>This is your heading 1 text</h1>
<h3>This is your heading 3 text</h3>
<div id="header-logo">
<a href="https://www.your-website.com/" target="_blank"><img src="https://your-logo-url.png">
</a>
</div>
</div>
</div>
<!-- END HEADER HTML -->