Embedding the Form Builder into an existing React app


#1

Hello,

I have a web app that’s based on Ant Design Pro. Is the Webiny Form Builder tightly coupled to other Webiny apps and plugins, or do you think it can be embedded into an existing React app with little trouble?

I have considered the form builders of survey.js and formio.js as alternatives, but survey.js renders ugly on mobile devices and formio.js is overly complex for my needs. Webiny hits the sweet spot on usability and the UI looks awesome. I just wonder if Webiny Form Builder architecture is flexible enough to embed in a non-Webiny app?


#2

Here’s the link to Ant Design Pro: https://github.com/ant-design/ant-design-pro

As a newly registered user, Discourse would not allow more than two links in my previous post.


#3

Hi @robert-claypool, thanks a lot for the question!

Form Builder is not tightly coupled.

In short, you should be able to deploy Webiny, create a form from the Admin UI, and then embed it anywhere you want. Form Builder is basically headless, meaning the GrapQL API returns the form structure, validations, and every other details about the requested form, and then it’s up to you to render it, using any tool. Of course, as we are React based, we offer some components that can make this process a bit easier. The details can be found here: https://docs.webiny.com/docs/webiny-apps/form-builder/react-component

Additionally, if you think this looks interesting to you, you should also read a bit about creating your own form layout: https://docs.webiny.com/docs/webiny-apps/form-builder/form-layouts

Here is a sample Form Layout, which comes by default with every Webiny project: https://github.com/webiny/webiny-js/blob/master/examples/packages/theme/src/layouts/forms/DefaultFormLayout.js

I hope this answers your question, but of course, if you need anything else, just give us a ping!


#4

@robert-claypool just to clarify Adrian’s answer a little bit:
FormBuilder IS coupled with the Webiny Admin app. You can’t just get the package off npm and mount a React element inside of your existing app. It is built using our system of plugins, with our UI components, using our GraphQL API layer, so it’s not a standalone project. But you can still render forms in your apps using our API as Adrian mentioned, since you get all the data about the form and can implement rendering however you like.

Let us know if you have more questions :slight_smile:


#5

Thank you, that’s awesome!


#6

@Adrian_Smijulj How do you connect your existing react app to the webiny admin portal (where you create pages) in order to include these new pages in your existing app in a dynamic fashion ?

The link you provided doesn’t really delve into much detail on this. And it seems you only have instructions for the form builder. What if I wanted to include a new page created by a client on the webiny admin portal in my existing app ?

In my existing app I have my own graphql server connected to an existing database, is there a way I can retrieve the info from these forms and manipulate it on my side and not through the webiny graphql api ?


#7

Hi @danielmaartens, thank you for your question, and sorry for the delay.

I just wanted to clarify things a bit.

So, you have an existing app, and you want to create e.g. a page or a form via Webiny, and then once you’ve done that, you’d like to include these in your own app?

Thank you!

P.S. I’d be glad to jump on a call if needed.


#8

@Adrian_Smijulj yes that correct. A call would be great ! What is your preferred method ? I can then elaborate a little bit more.


#9

@Adrian_Smijulj my email address is [email protected]. Let’s take it from there ?


#10

Will send you an email @danielmaartens.