@roofmaxx/form

v0.77.0

Published

9 days ago

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

Downloads

1,420

0High
0Medium
0Low

gkarakitsios

Roof Maxx ReactJs Form

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

Installation

-> STEP 1 - 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" />

Specific Version Files

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/[email protected]/dist/form.js"></script>

<link rel="stylesheet" href="https://unpkg.com/@roofmaxx/[email protected]/dist/form.css" />

-> STEP 2 - Please send us an email at [email protected] with your base domain where the form will be installed. For example if you have the form installed at www.domain.com/test or www.test.domain.com please send us the domain.com

Usage

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=""
    data-video-form=""
    >
</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:
- 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
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
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.
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.

Examples of use

Internal Use for Roofmaxx corporate

• 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

<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=""
    data-video-form=""
    >
</div>

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

<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=""
    data-video-form=""
></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=""
    data-video-form=""
></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 hubspot landing pages *

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

<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=""
    data-video-form=""
    >
</div>

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

<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"
    data-video-form=""
    >
</div>

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

<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=""
    data-video-form=""
    >
</div>

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

<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"
    data-video-form=""
    >
</div>

Dealer Use

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

<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=""
    data-video-form=""
    >
</div>