{"id":56630,"date":"2023-02-07T12:58:48","date_gmt":"2023-02-07T07:28:48","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=56630"},"modified":"2025-12-04T11:19:58","modified_gmt":"2025-12-04T05:49:58","slug":"using-strapi-cms-to-create-a-collection-for-form-data","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/using-strapi-cms-to-create-a-collection-for-form-data\/","title":{"rendered":"Using Strapi-CMS to Create a Collection for Form Data"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Today I am going to write about how we can use <a href=\"https:\/\/strapi.io\/\">Strapi<\/a> CMS to create a collection that can be later used to create forms. In my project, a similar approach has been used to create forms, It helps reduce code and makes an easy-to-use common component.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/strapi.io\/\">Strapi<\/a> is an open-source, Node. js-based, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/strapi.io\/\">Strapi<\/a> also enables content editors to streamline content delivery (text, images, video, etc.) across any device.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Some basic information about <a href=\"https:\/\/strapi.io\/\">Strapi<\/a> content types :\u00a0<\/span><\/p>\n<ul>\n<li><b>Collections<\/b><span style=\"font-weight: 400;\">: Easily create collection types to repeat the same type <\/span><span style=\"font-weight: 400;\">of content, like blog posts, products, users, or any <\/span><span style=\"font-weight: 400;\">content you can think of<\/span><\/li>\n<li><b>Single Type<\/b><span style=\"font-weight: 400;\">: Create one-off pages with unique content <\/span><span style=\"font-weight: 400;\">structure: homepage, menu, SEO settings<\/span><\/li>\n<li><b>Fields<\/b><span style=\"font-weight: 400;\">: Writing content consists of filling up fields, which are meant to contain specific content (e.g. text, numbers, media, etc.). Easily configure them through the Content-Types Builder<\/span><\/li>\n<li><b>Reusable Components<\/b><span style=\"font-weight: 400;\">: Components are reusable structures you can share between all your content types. Components can be included in any content type, either as a single entry or a list of entries for meta information, links, sections list, or any repeatable content<\/span><\/li>\n<li><b>Dynamic Zones<\/b>: Dynamic Zones is a native feature in <a href=\"https:\/\/strapi.io\/\">Strapi<\/a> that lets teams build customizable pages on the fly and minimize developers&#8217; time to add new content. It lets your developers build web experiences and have a good night&#8217;s sleep without worrying about all the content being seamlessly added by the content managers<\/li>\n<\/ul>\n<p><b>Pre-Requisites<\/b><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Make sure to have Node installed on your system.<\/span><\/li>\n<\/ul>\n<p><b>Strapi Installation<\/b><\/p>\n<p><i><span style=\"font-weight: 400;\">You can refer to <\/span><\/i><a href=\"https:\/\/docs.strapi.io\/developer-docs\/latest\/setup-deployment-guides\/installation\/cli.html#preparing-the-installation\"><i><span style=\"font-weight: 400;\">https:\/\/docs.strapi.io\/developer-docs\/latest\/setup-deployment-guides\/installation\/cli.html#preparing-the-installation<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> in case you face any difficulties during the installation.<\/span><\/i><\/p>\n<p><b>Creating a Component<\/b><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Firstly, let&#8217;s create the type of inputs your form can have.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Let&#8217;s make 3 components, an Input field, a Dropdown, and a Button.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Click on Create a Component\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0 <img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56619 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-1.png\" alt=\"\" width=\"922\" height=\"516\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-1.png 922w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-1-300x168.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-1-768x430.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-1-624x349.png 624w\" sizes=\"(max-width: 922px) 100vw, 922px\" \/><\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Click on continue\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Add a text field by \u2018name\u2019 for your form field.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56620 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-2.png\" alt=\"\" width=\"913\" height=\"474\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-2.png 913w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-2-300x156.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-2-768x399.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-2-624x324.png 624w\" sizes=\"(max-width: 913px) 100vw, 913px\" \/><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Similarly, add additional fields you might need.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56622 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-text-field.png\" alt=\"\" width=\"774\" height=\"479\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-text-field.png 774w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-text-field-300x186.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-text-field-768x475.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-a-comp-text-field-624x386.png 624w\" sizes=\"(max-width: 774px) 100vw, 774px\" \/><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Now Create the other two components for the button and dropdown.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Add some points regarding validation, eg: Button label length restriction.<\/span><\/li>\n<\/ul>\n<p><b>Create a Collection<\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Just like how we created a component, we will now create a collection type with the name for Form-details, which will have some basic details like name and description.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Now, we add a dynamic zone to our collection (Dynamic Zones is a new native feature in <a href=\"https:\/\/strapi.io\/\">Strapi<\/a> that lets teams build reusable content models and minimize the number of changes developers need to make to add new content).<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56623 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-dynamic-field.png\" alt=\"\" width=\"921\" height=\"332\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-dynamic-field.png 921w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-dynamic-field-300x108.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-dynamic-field-768x277.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/create-dynamic-field-624x225.png 624w\" sizes=\"(max-width: 921px) 100vw, 921px\" \/><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Select the components text field, button, and dropdown we previously created under form-group.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56624 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/addDynamicZone.png\" alt=\"\" width=\"921\" height=\"439\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/addDynamicZone.png 921w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/addDynamicZone-300x143.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/addDynamicZone-768x366.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/addDynamicZone-624x297.png 624w\" sizes=\"(max-width: 921px) 100vw, 921px\" \/><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Finally, This is what our collection should look like finally:<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56625 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/collection.png\" alt=\"\" width=\"810\" height=\"581\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/collection.png 810w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/collection-300x215.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/collection-768x551.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/collection-624x448.png 624w\" sizes=\"(max-width: 810px) 100vw, 810px\" \/><\/p>\n<p><b>Adding entries in our Collection<\/b><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Go to collection types in the top left section, Select Form Details, and then click on \u2018Add new form details<\/span><\/li>\n<li><span style=\"font-weight: 400;\">All the fields we created for our collection should now be available for you to enter.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Enter all the details.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56627 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/CollectionENtry-871x1024.png\" alt=\"\" width=\"625\" height=\"735\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/CollectionENtry-871x1024.png 871w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/CollectionENtry-255x300.png 255w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/CollectionENtry-768x903.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/CollectionENtry-624x733.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/CollectionENtry.png 1101w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<ul>\n<li>Click on &#8216;Publish&#8217;<\/li>\n<\/ul>\n<p><b>Make the created collection available to be fetched via API\u2019s<\/b><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Go to Settings (bottom-left section)<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Click on Roles<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Select a role<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Now, find your collection type\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Enable find and findOne\u00a0<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56628 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/EnableFindCollection.png\" alt=\"\" width=\"425\" height=\"137\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/EnableFindCollection.png 425w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/EnableFindCollection-300x97.png 300w\" sizes=\"(max-width: 425px) 100vw, 425px\" \/><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Save your changes.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">In a new tab, go to \u2018<\/span><a href=\"http:\/\/localhost:1337\/form-details\/1\"><span style=\"font-weight: 400;\">http:\/\/localhost:1337\/form-details\/1<\/span><\/a><span style=\"font-weight: 400;\">\u2019; you will find your entered details in object format.\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\">You can also find the get API endpoint on the same page in the right-hand side section.<\/span><\/li>\n<\/ul>\n<p>A look at the <a href=\"https:\/\/strapi.io\/\">Strapi<\/a> data in the browser :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56629 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/screencapture-localhost-1337-form-details-2023-02-02-18_00_08.png\" alt=\"\" width=\"358\" height=\"636\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/02\/screencapture-localhost-1337-form-details-2023-02-02-18_00_08.png 358w, \/blog\/wp-ttn-blog\/uploads\/2023\/02\/screencapture-localhost-1337-form-details-2023-02-02-18_00_08-169x300.png 169w\" sizes=\"(max-width: 358px) 100vw, 358px\" \/><\/p>\n<p>In my next blog, I will use this created collection to create a simple dynamic form using React js.<\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>Today I am going to write about how we can use Strapi CMS to create a collection that can be later used to create forms. In my project, a similar approach has been used to create forms, It helps reduce code and makes an easy-to-use common component. Strapi is an open-source, Node. js-based, Headless CMS [&hellip;]<\/p>\n","protected":false},"author":1540,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":193},"categories":[1994,1],"tags":[5101],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56630"}],"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=56630"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56630\/revisions"}],"predecessor-version":[{"id":76977,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56630\/revisions\/76977"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=56630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=56630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=56630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}