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 + Create 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. In the left navigation panel, click Settings.
   5. Under Settings, click API Settings.
   
   6. Click the + Add Another button.
   

   This generates an API Key for your project.

   7. Below the form title, you can see the Live stage section. This serves 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-hand side primary navigation, click the Marketplace icon to go to the Marketplace.
   
   3. Click Apps from the left panel.
   4. Within the Marketplace, you can see all the available apps. Hover over the Form.io app and click Install App.
      
   5. In the popup window, select the stack where you want to install the Form.io app and click the Install button.
   
   6. 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.
      
   7. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.
   8. If the webhook is enabled for your app, you can view the webhook logs under the Webhook tab.

   Additional Resource: For more information on UI location and webhooks, please refer to the Installed Apps guide.

   9. Click the Save button.
   10. 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. This redirects you 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.