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!

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>

<script>
setTimeout(function() {
$(document).ready(function() {
$('select').niceSelect();
});
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";
callback(countryCode);
});
},
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);
</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 and some small styling changes to your HubSpot form.

<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>

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