@roofmaxx/form
Advanced tools
The intention of this readme is to document the most important features and characteristics of the multistep consumer form made with **ReactJs + Tailwind** using the **forms API from hubspot**, the **map_status API from roofmaxxconnect** and **Google Auto
Readme
The intention of this readme is to document the most important features and characteristics of the multistep consumer form made with ReactJs + Tailwind using the forms API from hubspot, the map_status API from roofmaxxconnect and Google Autocomplete function with Places API
To use the form in you site add the following script tag to your page:
If you want to use the version of the library, you just need to copy and paste the codes below preferably in the <head> of you page:
<script type="module" src="https://unpkg.com/@roofmaxx/form/dist/form.js"></script>
If you are facing issues with the form try inserting the JS script (not the CSS) in the footer of your page OR add the defer value (The defer is a Boolean value, used to indicate that the script is executed after the document has been parsed)
<script defer type="module" src="https://unpkg.com/@roofmaxx/form/dist/form.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@roofmaxx/form/dist/form.css" />
If you want to use a specific version of the library, you can specify it both in the script tag and link tags:
<script type="module" src="https://unpkg.com/@roofmaxx/form@0.3.0/dist/form.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@roofmaxx/form@0.3.0/dist/form.css" />
To make the form work you need to add the following code to your page at the place where you want the form to show:
<div id="roofmaxx-form"
data-utm-source=""
data-utm-campaign=""
data-utm-medium=""
data-utm-content=""
data-utm-term=""
data-page-variant=""
data-zip-code=""
data-dealer-id=""
data-source-vendor=""
data-deal-type=""
data-self-generated=""
data-lead-type=""
data-microsite-type=""
data-thank-you-page=""
data-sorry-page=""
>
</div>
Here you can configure the form by passing different data attributes to the wrapper element.
If you have a dealer id please insert it in the data-dealer-id field in between the ""
If you are using a vendor for your marketing please insert his name in the data-source-vendor field in between the ""
You can leave empty the following fields:
If you have a custom thank-you page please insert the complete URL in the field data-thank-you-page, as if not the default thank you page is at https:roofmaxx.com/thank-you
Regarding the UTM parameters please read the following:
In case you make use of UTM parameters, the form has a priority logic that gives priority to the data-attributed UTMs.
Placing the form into roofmaxx.com and in any case (there is or not a dealer in the area/zipcode) user will be redirected to roofmaxx.com/thank-you
<div id="roofmaxx-form"
data-utm-source=""
data-utm-campaign=""
data-utm-medium=""
data-utm-content=""
data-utm-term=""
data-page-variant=""
data-zip-code=""
data-dealer-id=""
data-source-vendor=""
data-deal-type=""
data-self-generated=""
data-lead-type=""
data-microsite-type=""
data-thank-you-page=""
data-sorry-page=""
>
</div>
Placing the form into roofmaxx.com/find-a-dealer/xxxx/zzz and in any case (there is or not a dealer in the area/zipcode) user will be redirected to roofmaxx.com/find-a-dealer/thank-you
--> For the find-a-dealer page, state/location page
<div
id="roofmaxx-form"
data-utm-source=""
data-utm-campaign=""
data-utm-medium=""
data-utm-content=""
data-utm-term=""
data-page-variant=""
data-zip-code=""
data-dealer-id=""
data-source-vendor=""
data-deal-type="RMCL-F"
data-self-generated=""
data-lead-type=""
data-microsite-type=""
data-thank-you-page=""
data-sorry-page=""
></div>
<script>
/* Add dealer/company ID to HS form */
if (typeof roofmaxx_company_id !== "undefined" && roofmaxx_company_id) {
//setTimeout(function() {
$("#roofmaxx-form").attr("data-dealer-id", roofmaxx_company_id);
//}, 500);
}
</script>
--> For the Microsites
<div
id="roofmaxx-form"
data-utm-source=""
data-utm-campaign=""
data-utm-medium=""
data-utm-content=""
data-utm-term=""
data-page-variant=""
data-zip-code=""
data-dealer-id=""
data-source-vendor=""
data-deal-type="MICRO"
data-self-generated=""
data-lead-type=""
data-microsite-type=""
data-thank-you-page=""
data-sorry-page=""
></div>
<script>
/* Add dealer/company ID to HS form */
if (typeof roofmaxx_company_id !== "undefined" && roofmaxx_company_id) {
//setTimeout(function() {
$("#roofmaxx-form").attr("data-dealer-id", roofmaxx_company_id);
//}, 500);
}
</script>
<div id="roofmaxx-form"
data-utm-source=""
data-utm-campaign=""
data-utm-medium=""
data-utm-content=""
data-utm-term=""
data-page-variant=""
data-zip-code=""
data-dealer-id=""
data-source-vendor=""
data-deal-type=""
data-self-generated=""
data-lead-type=""
data-microsite-type=""
data-thank-you-page="https://exampleHubspot.com/thank-you"
data-sorry-page=""
>
</div>
<div id="roofmaxx-form"
data-utm-source=""
data-utm-campaign=""
data-utm-medium=""
data-utm-content=""
data-utm-term=""
data-page-variant=""
data-zip-code=""
data-dealer-id=""
data-source-vendor=""
data-deal-type=""
data-self-generated=""
data-lead-type=""
data-microsite-type=""
data-thank-you-page="https://exampleHubspotYES.com/thank-you"
data-sorry-page="https://exampleHubspotNO.com/thank-you"
>
</div>
<div id="roofmaxx-form"
data-utm-source=""
data-utm-campaign=""
data-utm-medium=""
data-utm-content=""
data-utm-term=""
data-page-variant=""
data-zip-code=""
data-dealer-id=""
data-source-vendor="XYZ"
data-deal-type=""
data-self-generated=""
data-lead-type=""
data-microsite-type=""
data-thank-you-page="https://exampleHubspot.com/thank-you"
data-sorry-page=""
>
</div>
<div id="roofmaxx-form"
data-utm-source=""
data-utm-campaign=""
data-utm-medium=""
data-utm-content=""
data-utm-term=""
data-page-variant=""
data-zip-code=""
data-dealer-id=""
data-source-vendor="XYZ"
data-deal-type=""
data-self-generated=""
data-lead-type=""
data-microsite-type=""
data-thank-you-page="https://exampleHubspotYES.com/thank-you"
data-sorry-page="https://exampleHubspotNO.com/thank-you"
>
</div>
Placing the form into a dealers website/landing with a custom thank you page.
* it is recommended to have your own thank you page, otherwise after a successful form submission user will be redirected to roofmaxx.com/thank-you page and you won't be able to measure correctly your conversions (in case you track conversions).
In case you use UTM parameters and you don't want to use the UTMs in the URL please insert them in the form. These hardcoded UTM parameters serve only if the form is submitted.
Dealers' id = 2452308196
<div id="roofmaxx-form"
data-utm-source=""
data-utm-campaign=""
data-utm-medium=""
data-utm-content=""
data-utm-term=""
data-page-variant=""
data-zip-code=""
data-dealer-id="2452308196"
data-source-vendor=""
data-deal-type=""
data-self-generated="SG"
data-lead-type=""
data-microsite-type=""
data-thank-you-page="https://dealers.com/thank-you"
data-sorry-page=""
>
</div>
FAQs
The intention of this readme is to document the most important features and characteristics of the multistep consumer form made with **ReactJs + Tailwind** using the **forms API from hubspot**, the **map_status API from roofmaxxconnect** and **Google Auto
The npm package @roofmaxx/form receives a total of 160 weekly downloads. As such, @roofmaxx/form popularity was classified as not popular.
We found that @roofmaxx/form demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.