Zapier to HubSpot

We've had many ups and downs when creating forms for our clients and using Zapier allowed us to have full control of forms directly in webflow. We made this so you wouldn't have to. Clone away!

Thank you for submitting the form

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-Zapier-Form");
$.validator.addMethod("letters", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});
$form.validate({
rules: {
fullName: {
required: true,
minlength: 3,
letters: true
},
Email: {
required: true,
email: true
},
},
messages: {
fullName: "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: red;
font-size: 12px;
font-weight: 400;
position: absolute;
left: 0px;
top: auto;
right: auto;
bottom: -24px;
}
/* Style for the error state of input */
.w-input.error {
border-color: red;
}
</style>