npm package: @roofmaxx/form
Description: 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
Latest version: 0.96.0

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

<br>
### Latest Files

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:

```html
<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)_

```html
<script defer type="module" src="https://unpkg.com/@roofmaxx/form/dist/form.js"></script>
```

```html
<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:

```html
<script type="module" src="https://unpkg.com/@roofmaxx/form@0.3.0/dist/form.js"></script>
```

```html
<link rel="stylesheet" href="https://unpkg.com/@roofmaxx/form@0.3.0/dist/form.css" />
```

<br>

### **-> STEP 2** - Please send us an email at <a href="mailto:Techsupport@roofmaxx.com">techsupport@roofmaxx.com</a> 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**

<br>

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

<!-- prettier-ignore -->
```html
<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.

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:<br> 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.<br>
    - If you have **only** in the URL, the form will send the URL UTM parameters<br>
    - If you have **only** in the data-attributed, the form will send the data-attributed<br>
    - If you **don't have UTM parameters** anywhere, the form will send empty value. <br/><br/>

---

### Examples of use

---

### **Internal Use for Roofmaxx corporate**

<br/>

#### • **For roofmaxx.com (Website)**

<br/>

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

<!-- prettier-ignore -->
```html
<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**

<br/>

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

<!-- prettier-ignore -->
--> ***For the find-a-dealer page, state/location page***

```html
<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_**

```html
<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** \*

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

<!-- prettier-ignore -->
```html
<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>
```

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

<!-- prettier-ignore -->
```html
<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>
```

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

<!-- prettier-ignore -->
```html
<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>
```

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

<!-- prettier-ignore -->
```html
<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**

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)._<br>

    - 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

<!-- prettier-ignore -->
```html
<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>
```