Form.io App Installation Guide

Form.io is a data and form management platform for advanced web-based applications. It provides a serverless application architecture through which you can easily embed forms through API within your application. It has a flexible user interface designed to ease the form creation process. You can drag and drop the elements to create your customized forms.

With the Contentstack Marketplace Form.io app you can fetch and display forms from the Form.io dashboard within your entries. You can view the form on your website once the entry gets published.

Prerequisites

• Form.io account
• Contentstack account
• Access to the Contentstack Organization/Stack as the Owner/Admin.

Let's follow this step-by-step guide to install and configure Form.io within your stack.

Steps for Execution

1. Fetch Credentials from Form.io
2. Install and Configure Form.io in Contentstack Marketplace
3. Use Form.io within your Stack Entry

1. Fetch Credentials from Form.io

   You must fetch the credentials from the Form.io dashboard to configure the app. Follow the steps to do so:

   1. Go to Form.io and sign up to create a new account.
   2. Click the + New Project button. A pop-up appears.
   3. Fill out the details such as Project Title, Description, etc to create a new project. Once done, click the Create Project button.
   4. On the left navigation panel, click Settings.
   5. Under Stage Settings, click API Keys.
      
   6. Click the Add New Key button. It will generate an API Key for your project.
   7. On the right-hand side, you will see Live Endpoint. It will serve as the base URL for the configuration page within Contentstack.
      
      

   Note: In the Access section, you can change the project-level access permissions for different roles, such as Administrator, Authenticated, Anonymous, and Everyone.

2. Install and Configure Form.io in Contentstack Marketplace

   Follow the steps to install the application in Contentstack.

   1. Log in to your Contentstack account.
   2. In the left navigation panel, click the Marketplace icon to go to the Marketplace. 
      
   3. Select Form.io from the list of apps and click the Install App button.
      
   4. Select the stack where you want to install the Form.io app, accept the Terms of Service and Privacy Policy and click the Install button.
      
   5. On the Configuration page, enter the Form.io Base URL and Form.io API Key you retrieved from the Form.io dashboard in step 1.
      
   6. Click the Save button.
   7. Click Open Stack to start using the Form.io application.

3. Use Form.io within your Stack Entry

   Steps to use the Form.io app using a Custom field:

   1. Go to your stack, and click the Content Models icon on the left navigation panel.
   2. Click the + New Content Type button to create a new content type.
   3. Add relevant details and click the Save and proceed button.
      
   4. On the Content Type Builder page, click the Insert a field link represented by a + sign to add a custom field.
   5. Under Select Extension/App, select Form.io, and then click Proceed.
      
   6. Click Save and Close.
   7. In the left navigation panel, navigate to the Entries page and click + New Entry to create a new entry for the above content type. Click Proceed. 
      
   8. In the custom field, select a form from the dropdown you want to display on your website. 
      

      Note: You can select only a single form for each Contentstack entry.

   9. Click the Preview button to view the form. You will be redirected to the Form.io dashboard.

      Note: Preview access is available only to users with a Form.io account.

   10. Click Save.
   11. Once you publish the entry, you can see the form on your website.