> For the complete documentation index, see [llms.txt](https://recatch.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://recatch.gitbook.io/docs/features/lead-router/form/form-mapping.md).

# HTML Form Integration

Integrate an existing inbound lead form from your website with Re:catch and link it to a lead router!

To streamline lead assignment for your sales team with Re:catch, you can simply connect your website's existing form, retrieve essential information (*e.g. customer name, email, company name, etc.*), and integrate it with a Re:catch lead router.

Refer to the image below to locate your web form HTML tags. This image will help you identify  `<form class>`, `<input name>`, `<input type>`, and `<option value>` tags more easily.&#x20;

<figure><img src="https://273562262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhJR9v0qoUd855FxoUnYy%2Fuploads%2F3GQ7f3qMyFC4jisbzXam%2FGroup%201509.png?alt=media&amp;token=a975e48e-cb51-4116-aae0-306d9857f865" alt=""><figcaption><p>Guide image for locating web form tags</p></figcaption></figure>

1. **Enter the website URL where your form is located, as well as the `<form class>` value of the web form you want to connect to Re:catch. You can refer to the image above to find the location of the \<form class> tag in the HTML code.**

   \
   To locate the <mark style="color:red;">**`<form class>`**</mark>, visit the webpage containing your form, open the Developer Tools (right-click -> select 'Inspect'), and identify the code snippet containing the<mark style="color:red;">`form`</mark> element. Look for code resembling what you can see in the image above, then identify the form tag resembling <mark style="color:red;">`<form class =`</mark><mark style="color:red;">**`"abcde"`**</mark><mark style="color:red;">`...>`</mark>. Then, copy the "<mark style="color:red;">**`abcde`**</mark>" as your form class.

<figure><img src="https://273562262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhJR9v0qoUd855FxoUnYy%2Fuploads%2Fbg9g0P5HMFdgaNNJf8bh%2FScreen%20Shot%202023-10-28%20at%208.18.13%20PM.png?alt=media&amp;token=85647eb5-8ff3-4c7e-bbe0-2fc377d3f16d" alt="" width="375"><figcaption></figcaption></figure>

2. **To match your form questions to Re:catch lead assignment rules, match each question's `input name`  as well as `input type`.** \
   \
   Referring to the guide image above, find `<input name>`, `<input type>`, and `<option value>` for each input field or question on your form's HTML codes and fill in accordingly.&#x20;

<figure><img src="https://273562262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhJR9v0qoUd855FxoUnYy%2Fuploads%2FZ1l0K59jyZxHY5lhsif5%2FScreen%20Shot%202023-10-28%20at%208.27.03%20PM.png?alt=media&amp;token=0c6882be-e73c-41c8-b876-97550489003e" alt="" width="375"><figcaption></figcaption></figure>

2. **While manually adding an input field, if it corresponds to a `select` or `radio` type of input, the values should be derived from your form's `<option value>` values.**

   \
   Referencing the guide image above, identify the `<option value>` values from your code. For example, if your code contains `<option value= "12345" ...>`, add "12345" as one of the option values here by typing "12345" and pressing enter. To include additional option values, simply input a new value and press enter to add it.

<figure><img src="https://273562262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhJR9v0qoUd855FxoUnYy%2Fuploads%2FetNHK4r0bewmyWWR9p6p%2FScreen%20Shot%202023-10-28%20at%208.31.54%20PM.png?alt=media&amp;token=970542b2-8b0b-455d-8db6-cf7719b7905b" alt="" width="375"><figcaption></figcaption></figure>

3. **Make sure that all the input fields or questions from your form are added and correctly matched on Re:catch. Once you've completed this step, you can proceed to the next phase of meeting assignment!**