Utilize the power of the Hubspot tracking code

This is a simillar solution as the enterprise option but without the need to pay huge amount's of money. You can achive the same result by using the hubspot tracking code and settign up your forms in a specific way.
Enjoy this clone!

Thank you for your submission

Oops! Something went wrong while submitting the form.

Here is a quick tutorial about how you can do it yourself

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

Paste this before <body> in project settings

You can paste this code into your page settings to add custom validation and custom select fields to your form. Also this is where you need to add the HubSpot tracking code!

<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>


<script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/25124958.js"></script>



<script>var $form = $("#wf-form-Action-Link-Form");
$.validator.addMethod("letters", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});
$form.validate({
rules: {
full_name: {
required: true,
minlength: 3,
letters: true
},
email: {
required: true,
email: true
},
},
messages: {
full_name: "*Please specify your name",
email: "*Please specify a valid email address",
}
});
</script>

Paste this inside <head> tag in project settings

You can paste this code into your page settings to add styling for your custom validation.

<style>
/* Style for the error text below input */
label.error {
color: #F46B6B;
font-size: 12px;
font-weight: 400;
position: static;
margin-top: 4px;
}
/* Style for the error state of input */
.w-input.error {
border-color: #F46B6B;
}
textarea {
resize: none;
}
</style>