Edit Hubspot forms directly on your page

This was a surprise for us once we found out that we can edit hubspot forms that are directly embedded into the website just with CSS. Enjoy this clone, we know we did!

Webflow Form

Here you can find the div blocks that have the same classes to style the fields in HubSpot. Aside from the styles here we have some custom code for the phone input and styling in page settings. Also there is an embed underneath the page which is used for some styling as well.

Thank you! Your submission has been received!
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 src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.min.js"></script>
<!-- Fully Custom Form Input Settings -->
setTimeout(function() {
$(document).ready(function() {
var input = document.querySelector("#phone-50b7f28e-a5a6-4993-be0e-f9f62459f1ea");
 var dialCode = document.querySelector(".dialCode");  var iti = intlTelInput(input, {
  preferredCountries: ["us", "de", "uk", "jp", "kr"],
   initialCountry: "auto",
   localizedCountries: null,
   placeholderNumberType: 'FIXED_LINE',
   geoIpLookup: function(callback) {
     $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
       var countryCode = (resp && resp.country) ? resp.country : "us";
     utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.min.js"
 });  var updateInputValue = function (event) {
   input.value = "+" + iti.getSelectedCountryData().dialCode;
 input.addEventListener('countrychange', updateInputValue, false);
   }, 500);

Paste this inside <head> tag in project settings

You can paste this code into your page settings to add styling for your custom validation and some small styling changes to your HubSpot form.

/* 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;

ul {
  list-style-type: none;
   padding-left: 0px;
   margin-top: 8px;
   color: #f46b6b;
 .hs-input {

a star icon