Map your form directly to HubSpot

If you have an enterprise level account in Webflow then you can use their integration feature between Webflow and Hubspot to easily send form submissions without nay third party tools or code.

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

<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
$(document).ready(function() {
$('select').niceSelect();
});var $form = $("#wf-form-2-Step-Email-Form");
$.validator.addMethod("letters", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});
$form.validate({
rules: {
name: {
required: true,
minlength: 3,
letters: true
},
Email: {
required: true,
email: true
},
},
messages: {
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-style: none none solid;
border-width: 1px;
border-color: #F46B6B;
}
</style>