shop Dubsado templates →
Button Plug & Play Code Snippets
Loading Toc...

Button Plug & Play Code Snippets

Last updated // July 20, 2023

Grab the quick copy-and-paste code snippets to add custom buttons into your Dubsado forms within seconds.

There's no code required with adding buttons in Dubsado forms, simply open up your form template on a desktop or laptop (if you're trying to code on a phone— it can be done but you're nuts, and good luck!) to get started:

  1. Drag in a Text Box where-ever you want your button to appear (or use an existing Text box)
  2. Click Formatting OptionsInsert Link or ButtonButton
  3. Type in the URL
  4. Type in the Text for the button
  5. Check "Open in new tab" (pro tip: always do this for linking to external pages)
Button Plug & Play Code Snippets Search & Grow

Head to Form StylingEdit CSS — then copy the code below for your chosen style and paste it in here:

Button Plug & Play Code Snippets Search & Grow

Style 01

Button Plug & Play Code Snippets Search & Grow
.form-viewer a.dubsButton, a.dubsButton {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 14px 22px;
    border-radius: 0px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: 10px;
    text-transform: uppercase;
}
.form-viewer a.dubsButton:hover, a.dubsButton:hover {
    text-decoration: none;
}

Style 02

Button Plug & Play Code Snippets Search & Grow
.form-viewer a.dubsButton, a.dubsButton {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 14px 22px;
    border-radius: 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: 10px;
    text-transform: uppercase;
}
.form-viewer a.dubsButton:hover, a.dubsButton:hover {
    text-decoration: none;
}

Style 03

Button Plug & Play Code Snippets Search & Grow
.form-viewer a.dubsButton, a.dubsButton {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 14px 22px;
    border-radius: 0px;
    box-shadow: 4px 4px #67EACA;
    margin-bottom: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: 10px;
    text-transform: uppercase;
}
.form-viewer a.dubsButton:hover, a.dubsButton:hover {
    text-decoration: none;
}

Style 04

Button Plug & Play Code Snippets Search & Grow
.form-viewer a.dubsButton, a.dubsButton {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 14px 22px;
    border-radius: 0px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: 10px;
    text-transform: uppercase;
}
.form-viewer a.dubsButton:hover, a.dubsButton:hover {
	text-decoration: none;
}

Style 05

Button Plug & Play Code Snippets Search & Grow
.form-viewer a.dubsButton, a.dubsButton {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 14px 22px;
    border-radius: 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: 10px;
    text-transform: uppercase;
}
.form-viewer a.dubsButton:hover, a.dubsButton:hover {
	text-decoration: none;
}

Style 06

Button Plug & Play Code Snippets Search & Grow
.form-viewer a.dubsButton, a.dubsButton {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 14px 22px;
    border-radius: 0px;
    box-shadow: 4px 4px #67EACA;
    margin-bottom: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: 10px;
    text-transform: uppercase;
}
.form-viewer a.dubsButton:hover, a.dubsButton:hover {
	text-decoration: none;
}

Make sure you have your font name to hand (if so, skip ahead to "replace font-family"). If not, choose one from the Google Fonts library. Dubsado is already compatible with Google Fonts and so all you need to do is:

  1. Choose your font at Google Fonts
  2. Click your chosen font → Select this styleEmbed
  3. Then highlight the code under "CSS rules to specify families"

Find this line in your plug-and-play sample above: font-family: 'Lato'; and replace with the line provided by Google Fonts. For example:

.form-viewer a.dubsButton, a.dubsButton {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 14px 22px;
    border-radius: 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: 10px;
    text-transform: uppercase;
}
.form-viewer a.dubsButton:hover, a.dubsButton:hover {
    text-decoration: none;
}

Grab your brand color hex codes (e.g. #000000) — if you don't have them to hand, or you just want to play around with a random palette, take a look at some of the color palettes available here: Colors and Fonts and HTML Color Codes.

styles: 01, 02, 04, 05

For these styles, you'll need to replace the colours in 2 different places:

.form-viewer a.dubsButton, a.dubsButton {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 14px 22px;
    border-radius: 0px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: 10px;
    text-transform: uppercase;
}
.form-viewer a.dubsButton:hover, a.dubsButton:hover {
    text-decoration: none;
}
STYLES 03 & 06

For these two styles, there's the added accent-coloured drop shadow. So you'll need to replace in 3 different places:

.form-viewer a.dubsButton, a.dubsButton {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 14px 22px;
    border-radius: 0px;
    box-shadow: 4px 4px #67EACA;
    margin-bottom: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1;
    font-size: 10px;
    text-transform: uppercase;
}
.form-viewer a.dubsButton:hover, a.dubsButton:hover {
    text-decoration: none;
}

With these quick copy-and-paste code snippets, you can effortlessly customise and add on-brand buttons to your Dubsado forms that will entice your clients to take action!

@searchandgrow
© 2024 SEARCH & GROW
|
PRIVACY POLICY
|
Terms of use
|
DESIGNED BY ME ♦
Top