In addition to creating landing pages, RD Station Marketing allows you to create forms and embed them directly on the pages of your website. This insert is ideal for cases where the form needs to be included as part of an existing page (such as a blog post), or needs to take up little space on the site (such as a newsletter form).
To insert Forms created in RD Station Marketing on a site created using React, follow the step-by-step guide below:
Step-by-step setup guide
- Create a form in RD Station Marketing. If you have questions about how to create forms, see this step-by-step guide.
- Once created, click View code on the Forms page:
- Copy the Embed code by pressing Ctrl+C or by clicking Copy code:
- After obtaining the code as stated above, follow these steps:
Insert the script tag with rdstationfile-forms.min.js inside the body tag of your index.html before closing the tag:
In the React component that you want to render the form, enter the div generated. For this example, the src/App.js file was used:
In this step we will use only part of the code generated by RD Station Marketing.
Based on our example, we will use just this snippet of code taken from the script tag:
But before inserting the code, add the window object before the RDStationForms call, resulting in the following code:
Now insert the code inside the ComponentDidMount () function:
The code is inserted into this function to make sure that it will only run after the component has been properly rendered and all elements are ready.
As a second security factor, the code is inserted within a conditional if to ensure that the object is available for the call.
To finish, access the page where the form was inserted and it should display correctly.
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.
If you wish, you can download a sample React application with the integrated form in this Github repository.