Integrate forms via the tracking code on websites built with React

How form integration works

From the moment you install the RD Station Marketing tracking code on your website, all forms that are captured by the code by default will be integrated. To do this, you must enable form capture via Integrations > Form Integration.

However, some current programming languages (such as React) require some changes so that the tracking code can correctly capture and integrate forms.

With the tracking code properly applied, the following message will be displayed when accessing the feature in RD Station Marketing:

This step is required in order to continue with the procedures described below.

Settings for form integration on websites built with React

Step 1

After installing the tracking code, select option 2b: I want to perform the setup on my own.

Copy and save the script provided:

Step 2

In this step we will use only part of the code copied in Step 1.

Based on our example, we will use just the address of the src attribute:

In the React component where the form is being rendered, insert the following code inside the ComponentDidMount () function using the copied address:

If you are using the new Hooks syntax, the procedure follows the same pattern:

Step 3

Access the page where the form was inserted. At this point, the form should already be captured by our script.

Remember that for everything to work properly:

1. The form must contain the tags <form> </form>.
2. The form must contain at least one field with the type or name="email”.
3. The button must contain the attribute type="submit”.

Fill in the form and carry out a conversion to confirm if the lead was sent correctly to your Lead Base in RD Station Marketing.

Example application

If you wish, you can download a sample React application with the integrated form from this Github repository.