{"id":56638,"date":"2023-02-09T12:14:09","date_gmt":"2023-02-09T06:44:09","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=56638"},"modified":"2025-12-04T11:21:53","modified_gmt":"2025-12-04T05:51:53","slug":"creating-a-simple-dynamic-form-using-data-from-strapi-cms","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/creating-a-simple-dynamic-form-using-data-from-strapi-cms\/","title":{"rendered":"Creating a Simple Dynamic form Using Data from Strapi CMS"},"content":{"rendered":"

In my previous blog, I showed how we could create a collection in Strapi<\/a> that could further be used as input data to a dynamic form component to render a form as per users requirements.<\/p>\n

Create a React Project\u00a0<\/b><\/p>\n

    \n
  1. Create a project using create react app.<\/span><\/li>\n
  2. Refer <\/span>https:\/\/reactjs.org\/docs\/create-a-new-react-app.html<\/span><\/a> in case of any issues.<\/span><\/li>\n
  3. Install axios using npm i axios<\/strong>
    \n<\/span><\/li>\n<\/ol>\n

    Structure of the React App<\/b><\/p>\n

      \n
    1. We will create a button upon which click we will fetch data from the Strapi<\/a> server using axios.<\/li>\n
    2. Upon successfully fetching the data, we will send that data to our Form component, which will create later.\"\"<\/li>\n
    3. Next, we will create our individual Input type components. Here will be creating just three i.e. Button, Dropdown, and Input Field.
      \n\"\"
      \n\"\"
      \n\"\"<\/li>\n
    4. Next, we will be creating our Form Component, which makes use of the above-created components to render the final form to the user:\"\"\n

      Here is the util file :
      \n\"\"<\/li>\n

    5. This is what our Form looks like:
      \n\"\"<\/li>\n<\/ol>\n

      Link to the github repo: https:\/\/github.com\/codeM1997\/react-strapi-form<\/strong><\/p>\n

      Some things to try on your own:\u00a0<\/b><\/p>\n

      1) <\/span>Validations<\/b>: Try creating a collection type for validations and use it along your forms by editing the form details structure in content type and builders. You can create validation cases for minimum length, maximum length, required etc.\u00a0<\/span><\/p>\n

      2) <\/span>Using GraphQl for fetching data from Strap<\/b>i: <\/span> You can use the graphql plugin in Strapi<\/a> and request data as per your need. At the react end, You can use Apollo to fetch data using graphql queries.
      \nYou can refer to this article for the same: <\/span>      https:\/\/docs.strapi.io\/developer-docs\/latest\/developer-resources\/content-api\/integrations\/graphql.html#examples-2<\/span><\/a><\/p>\n

       <\/p>\n

      <\/div>","protected":false},"excerpt":{"rendered":"

      In my previous blog, I showed how we could create a collection in Strapi that could further be used as input data to a dynamic form component to render a form as per users requirements. Create a React Project\u00a0 Create a project using create react app. Refer https:\/\/reactjs.org\/docs\/create-a-new-react-app.html in case of any issues. Install axios […]<\/p>\n","protected":false},"author":1540,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":380},"categories":[3038,1994],"tags":[5102],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56638"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1540"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=56638"}],"version-history":[{"count":5,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56638\/revisions"}],"predecessor-version":[{"id":76979,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56638\/revisions\/76979"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=56638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=56638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=56638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}