Insertar formulario en un sitio web creado en React

Además de la creación de Landing Pages, RD Station Marketing te permite crear formularios para colocarlos directamente en las páginas de tu sitio web. Esta inserción es ideal para los casos en los que el formulario debe formar parte de una página existente (como un post de blog) o debe ocupar poco espacio en el sitio web (como en un formulario de newsletter).

Para insertar formularios creados en RD Station Marketing en un sitio web creado en React, sigue los pasos a continuación:

Configuración paso a paso

1. Crea un formulario en RD Station Marketing. Si no sabes cómo crearlo, sigue este paso a paso
2. Una vez creado, haz clic en Ver código en la página Formularios:
   
   
3. Copia el Código de incorporación al presionar Ctrl+C en el teclado o al hacer clic en el botón Copiar:
   
   
4. Después de obtener un código según se mostró anteriormente, sigue estos pasos:

Paso 1

Inserta la tag script con arquivordstation-forms.min.js dentro de la tag body en tu index.html antes de cerrar la tag:

Paso 2

En el componente de React en el que deseas renderizar el formulario, inserta la div generada. Para este ejemplo se utilizó el archivo src/App.js:

Paso 3

En este paso, usaremos sólo una parte del código generado por RD Station Marketing.

Con base en nuestro ejemplo, utilizaremos sólo este fragmento del código tomando de la tag script:

Sin embargo, antes de insertar el código, agrega el objeto window antes de la llamada RDStationForms, lo que dejará al código de la siguiente manera:

Ahora inserta el código dentro de la función componentDidMount():

El código se inserta en esta función para asegurarnos de que sólo se ejecutará después de que el componente se haya renderizado correctamente y todos los elementos estén listos.

Como segundo factor de seguridad, el código se inserta dentro de un condicional if para garantizar que el objeto está disponible para la llamada.

Paso 4

Para finalizar, ingresa a la página donde se insertó el formulario y deberá mostrarse correctamente.

Completa el formulario realizando una conversión y confirma si el lead fue enviado correctamente a tu Base de Leads en RD Station Marketing.

Ejemplo de aplicación

Si lo deseas, puedes descargar una aplicación React de ejemplo con el formulario integrado en este repositorio de Github.