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
npm install @roofmaxx/formThe 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
If you want to use the version of the library, you just need to copy and paste the codes below preferably in the of you page:
``html`
> 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)_
`html`
`html`
If you want to use a specific version of the library, you can specify it both in the script tag and link tags:
`html`
`html`
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:
`html
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=""
data-video-form=""
>
Here you can configure the form by passing different data attributes to the wrapper element.
1. If you have a dealer id please insert it in the data-dealer-id field in between the ""
2. If you are using a vendor for your marketing please insert his name in the data-source-vendor field in between the ""
3. You can leave empty the following fields:
- data-utm-source
- data-utm-campaign
- data-utm-medium
- data-utm-content
- data-utm-term
- data-page-variant
- data-zip-code
- data-deal-type
- data-self-generated
- data-lead-type
- data-microsite-type
- data-sorry-page
- data-video-form
4. 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
5. If you dont't want the video to appear at the top of the form just add false in the data-video-form. By default the video will be shown.
6. 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.
- If you have UTM parameters both in the URL and the data-attributes the form will obey to the data-attributed UTMs.
- If you have only in the URL, the form will send the URL UTM parameters
- If you have only in the data-attributed, the form will send the data-attributed
- If you don't have UTM parameters anywhere, the form will send empty value.
---
$3
---
$3
#### • For roofmaxx.com (Website)
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
html
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=""
data-video-form=""
>
#### For roofmaxx.com/find-a-dealer/state OR roofmaxx.com/find-a-dealer/state/microsite
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
html
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=""
data-video-form=""
>--> _For the Microsites_
html
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=""
data-video-form=""
>#### • For hubspot landing pages \*
1. Placing the form into a hubspot landing page \ used by roof maxx corporate, in \ any case (there is or not a dealer in the area/zipcode) user will be redirected to exampleHubspot.com/thank-you
html
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=""
data-video-form=""
>
2. Placing the form into a hubspot landing page used by roof maxx corporate, in case we want to separately redirect users depending on if there is, or not a dealer in the area/zipcode, user will be redirected to exampleHubspotYES.com/thank-you and/or exampleHubspotNO.com/thank-you
html
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"
data-video-form=""
>
3. Placing the form into a hubspot landing page used by XYZ vendor in any case (there is or not a dealer in the area/zipcode), user will be redirected to exampleHubspot.com/thank-you
html
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=""
data-video-form=""
>
`4. Placing the form into a hubspot landing page used by XYZ vendor in case we want to separately redirect users depending on if there is, or not a dealer in the area/zipcode, user will be redirected to exampleHubspotYES.com/thank-you and/or exampleHubspotNO.com/thank-you
html
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"
data-video-form=""
>
`$3
1. 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
- https://dealers.com
html
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=""
data-video-form=""
>
``