How to style and create a lead capture form to embed on your website

Setting up Dubsado is a mammoth task so it’s better to just break it down into bite size pieces and the easiest place to start is with creating a lead capture form to embed on your website to start capturing leads.

This really isn’t complicated and it’s what is going to end up saying you the most time – as well as having a Dubsado proposal template you can easily customise before sending to client.

So in today’s tutorial I’m going to show you exactly how to setup your lead capture form, style with your branding, add your workflows AND embed it onto your website.

Don’t fancy reading the whole blog? ▶️ Please watch the video below to get all the details! 👇🏻👇🏻

Creating Your Lead Capture Form In Dubsado

To create a lead capture form, you’re going to want to head over to the Forms tab under the templates and then from here you can click on the plus icon to create a lead capture form.

This is going to create a default lead capture form that Dubsado provides.

So, there are a couple of things that I want you to do before we then go and change any of the content in here. And the first thing is, if you were embedding this, into your website, then by default this comes at about 65% width and if you’re embedding it into a code block, then you’re not going to be able to remove the padding. T first thing that we are going to do is add some containers and put this at 100% width and 100% content.

And then we can drag our short fields into these containers. So, when you’re embedding this, it’s going to look a lot better than what it does when you, when you aren’t putting it into containers.

You’re going to have to ask a couple of things, which is first name, last name and email to be able to create a project. 

Other elements that are useful to add and things like: 

• Project Tracking – to see how leads are finding you
• What is your budget? – you can create custom mapped fields to add to these short fields
• Event Date – if you are booking projects for specific dates you can link them to the project start date 

How To Start a Workflow From a Lead Capture Form

There are two ways of starting workflows. 

1. Default Workflow Setting: this is your “set it and forget it” option. Attach a single workflow to your form so every lead gets the same treatment. I’d pick this option if your process is straightforward and doesn’t involve juggling multiple services.

2. Workflow Automation by Service: if you offer multiple services, you need to set up individual workflows tailored to what each lead is enquiring about. You can do this by selecting the element option titled “Workflow”
   
   
   

Remember if you are using the “workflow” element option then make it a required field and also remember to remove the default workflow option and vice versa. 

If you want to know more about how to create an inquiry workflow and want to steal my confirmation and reminder canned emails then click here. 

Styling Your Lead Capture

You’ve decided you’re done with Dubsado basic form styling and you want a shining on brand form then here is where you can copy and paste all the css – trust me if you watch my youtube video by clicking here then you’ll understand exactly how to use this with ease.

All form fields

This code block adds space under each element so that the answers aren’t crammed together:

/* Add space below the form fields */
.dubsado-form .form-element__input {
margin-bottom: 15px;
}

Changing the font family and sizing of all the form field titles:

/* All fields label text */
.form-element__input-label {
font-family: "montserrat", sans-serif;
color:#000!important;
font-size:15px;
}

Changing the font size, colour and font family of all the placeholder text:

/* All input fields -- when typing answers */
.dubsado-form input, .dubsado-form textarea, .dubsado-form select {
font-family: "montserrat", sans-serif!important;
  background-color:white;
border: 1px solid black!important;
  border-radius:0px!important;
}

Styling the short answer border, font family and background colour:

/* Short answers */
.form-element__input {
font-family: "montserrat", sans-serif;
border: 1px solid #000;
border-radius:0px;
min-height:38px;
background-color: white;
}

Styling the free response border and font family:

/* Free response */
.free-response-element__text-area {
font-family: "montserrat", sans-serif;
background-color:white!important!;
border: 1px solid #000!important;
}

Dropdown Module Styling

Styling of the dropdown border:

/* Dropdown fields */
.dubsado-form select {
border: 1px solid #000!important;
border-radius:0px;
}

Styling of the dropdown arrow

/* Dropdown arrow */
.form-element__select-container::after {
color:#000!important;
}

Styling of the text and field after the dropdown has been selected:

/* Dropdown selected option text --- use !important for color */
.dubsado-form .form-element__select-container .select--selected-option
{
font-family:your-font!important;
  background-color:white!important;
}

Checkbox Styling

Checkbox label text and font size of the checkboxes:

/* Checkbox option label text */
.form-checkbox-element .checkbox-option label {
font-family: "your-font", sans-serif;
font-size:13px;
}

Checkbox styling of the border:

/* Checkbox unchecked */
.form-checkbox-element .checkmark {
border: 1px solid #000!important;
border-radius:0px!important;
background-color:!important;
}

Changing the checkbox background colour when the box is marked:

/* Checkbox checked */
.form-checkbox-element .checkbox-option input:checked ~ .checkmark {
background-color:#000!important;
}

Multiple Choice Styling

Changing the multiple choice label text and font size of the boxes:

/* Multiple choice option label text */
.form-multiple-choice-element .radio-option label {
font-family: "montserrat", sans-serif;
font-size:13px;
}

Multiple choice radio button styling of the border:

/* Multiple choice radio button unselected */
.form-multiple-choice-element .checkmark {
border: 1px solid #000!important;
}

Changing the multiple choice radio background colour when the box is marked:

/* Multiple choice radio button selected */
.form-multiple-choice-element .radio-option input:checked ~ .checkmark {
background-color:#000;
border-color:#000;
}

Changing the multiple choice radio button inner circle colour when the radio button box is marked:

/* Multiple choice radio button selected marker / .form-multiple-choice-element .radio-option .checkmark:after {
background-color: #fff; / inner circle color */
}

Date Form Field Styling

Adding a border and changing the background colour of the date form field:

/* Date select input fields --- use !important for borders */
.dubsado-form .date-input input {
border:1px solid #000!important;
background-color: white!important;
}

Changing the border and background colour of the date icon field:

/* Date select calendar button --- use !important */
.dubsado-form .date-input .icon-button__button {
border: 1px solid #000;
background-color:white!important;
}

Embed your lead capture on your website

This really isn’t as complicated as it sounds just follow my step by step guide.

1. Click on the “public sharing” icon on the left hand side under “form styling” icon 

2. Copy the embed code with one click
3. Head over to your website and add a code block – this tutorial will be the same process for every website builder
4. Paste in your embed code and remove the script code: Here is the code that can be removed: 
   • <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.min.js“></script>
   • <script type=”text/javascript”>setTimeout(function(){iFrameResize({checkOrigin: false, heightCalculationMethod: “taggedElement”});}, 30)</script>
5. You’ll be left with just your iframe code which looks a but like this: <iframe src=”https://hello.dubsado.com/public/form/view/6727f9236730b3003a9611a9″ frameborder=”0″ style=”width:1px; min-width:100%;”></iframe>
6. You’ll notice it will have a scroll bar – fix this with adding min-height:500px; after min-width:100%;
7. So your iframe code will now look like this: <iframe src=”https://hello.dubsado.com/public/form/view/6727f9236730b3003a9611a9″ frameborder=”0″ style=”width:1px; min-width:100%;min-height:500px;”></iframe>
8. You can adjust the height by adding more height 600px or less 400px
9. Remember to make sure that you have checked tablet and mobile view as well. 
10. Save your page and refresh – double check your form and test your workflows 

Final Thoughts

Are you looking to start using Dubsado and want a discount of 30% off.

CLICK HERE to get 30% off your first month or year and don’t forget to check out my Dubsado proposal templates – easy to use & even easier to customise with your brand.

If you are looking for a full Dubsado setup then click here to find out more about this service and my prices.