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.

Fill out the form below
Fill out the form below so we can know some info about you before we schedule a call
Oops! Something went wrong while submitting the form.

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

Learn
Clone

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>
<!-- Fully Custom Form Input Settings -->
<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>

a star icon