Integrate a Feedback Form into your Dapp & Collect User Data at Scale

As the web3 paradigm shift continues to reshape the internet, developers must consistently seek new ways to increase user engagement, democratize decision-making, and gain valuable insights from the people who use the apps they build on-chain. One method to collect user feedback is to integrate a feedback or survey form into dapps. Feedback forms bridge the communication gap between users and developers and provide real-time feedback at scale to improve applications. They also foster an environment of active participation and collective decision-making.

From Decentralized Autonomous Organizations (DAOs) employing feedback forms for on-chain governance, to businesses leveraging them to gauge employee sentiment, the utility of feedback forms is infinite.

This blog provides a step-by-step tutorial to integrate a feedback form into your application backend and start collecting user feedback. For this, we will use a feedback form we built in-house using the MetaMask SDK and other Consensys tools called, Form xChange.

Form xChange

Whether you're looking to improve your dapp’s UX, collect post-conference feedback, or a DAO member aiming to democratize decision-making, this tutorial will show you how to integrate a feedback form and open a new channel of communication within your application.

What is Form xChange and how does it work?

Form xChange is an open-sourced tool, developed for the creation and utilization of feedback forms on the blockchain. While the smart contract for Form xChange is currently deployed on Linea, its adaptable architecture allows for deployment on any EVM-compatible network.

The platform enables participants to cast anonymous votes on the proposals incorporated within these forms and provides both participants and form creators access to view the results, reflecting the transparency ethos of web3.

Form xChange utilizes a user-friendly interface built with Next.js and operates using two smart contracts, both written in Solidity: the FeedbackForm contract and the FeedbackFormFactory contract. The process is straightforward—every time a new form is created, a new FeedbackForm contract is deployed, a task handled efficiently by the FeedbackFormFactory contract.

To utilize Form xChange, users must first connect and sign into the application using their MetaMask wallet. Some of the supported roles and responsibilities are:

Form Author

• Ability to create new forms containing multiple questions for feedback collection.
• Ability to view an average score derived from user responses to each section post-feedback collection.

Participant

• Ability to submit responses to forms or proposals while preserving anonymity.
• Access to view the results post-response submission.

Integrate a feedback form into your dapp for user feedback at scale

Users with less sophisticated use cases can simply rely on the already deployed instance of Form xChange but if you have a unique use case and would like to host your own instance or control what the user interface looks like, then this part of the blog is for you.

We’ll go through how to clone the repository to your local machine and get the backend running, we’ll deploy a new instance of the Form xChange backend to Linea and finally, we’ll touch on the MetaMask SDK and how it makes it easy to connect users' MetaMask wallet clients from any platform.

We’ll not be building out a user interface as it is beyond the scope of this tutorial but feel free to check out this repository to get an idea of how you can approach building out your own user interface.

How to clone the Form xChange backend

This section assumes that you have node.js v16 or above installed on your computer, as well as the Truffle development environment.

1. Clone the repository: git clone git@github.com:ConsenSys/Form-XChange.git

2. Navigate to the contract directory: cd Form-XChange/packages/form-XChange

3. Compile contract: truffle compile

4. Run test: truffle test

How to deploy your own instance of the Form xChange backend to Linea

What is Linea and why deploy on Linea? Well, Linea is a type 2 zero-knowledge Ethereum Virtual Machine (zkEVM) that replicates the Ethereum environment as a rollup, allowing developers to build on it with the experience and security of Ethereum but with lower transaction costs.

Linea offers advantages like faster finality, compatibility with all development tools, default integration with MetaMask, and high throughput among other things, which makes it an excellent choice for deploying Form xChange backend.

Now that we understand what Linea is and why it is a great choice, let's delve into how one can deploy to Linea. To follow through with this section, ensure you have the MetaMask wallet extension installed as well as some Linea Eth. See documentation for more information on how to get some Linea Eth.

1. Run the Truffle dashboard: truffle dashboard.

2. Head to localhost:24012 in your browser and connect your MetaMask wallet, then select Linea from the networks dropdown.

3. Run truffle migrate --network dashboard in a separate terminal.

4. Head back to localhost:24012 and click confirm on the prompt asking you to confirm the deployment.

That’s it, you should see the newly deployed contract address on the terminal window you ran the truffle migrate --network dashboard command. You can verify successful deployment by visiting the Linea block explorer.

Use MetaMask SDK to seamlessly connect your dapp to users’ wallets

With the Form XChange backend deployed to Linea, we want to make sure that users are not faced with any difficulties when they interact with our dapps. In other words, we want to make it seamless for users to connect their wallet client to our dapp without any hassle.

MetaMask presents the most effective method to connect to any dapp deployed on Linea, as the MetaMask wallet extension now includes a Linea network option by default. Furthermore, to simplify the process for developers to add MetaMask support to their dapps, MetaMask recently released the MetaMask SDK that can be used with JavaScript, Mobile and Gaming platforms.

To use the MetaMask SDK in your React frontend code base, here are some steps you can follow:

1. Install the MetaMask SDK using Yarn or NPM:

yarn add @metamask/sdk or npm install @metamask sdk

2. Import the MetaMask SDK into your React project:

import { MetaMaskSDK } from '@metamask/sdk';

3. Instantiate the MetaMask SDK using these options

 const sdk = new MetaMaskSDK(options);
 sdk.getProvider(); 

4. Access the MetaMask SDK anywhere in your React codebase:

window.ethereum.request({ method: 'eth_requestAccounts', params: [] });

Calling eth_requestAccounts using ethereum.request() prompts the installation or connection popup to appear so it is advisable to always call this function first.

Check out the MetaMask SDK documentation for more information on how you can use the MetaMask SDK with Node.js, IOS, Unity and more.

Form xChange enhances your dapp by facilitating valuable feedback collection and promoting increased user input and participatory decision-making. And its ability to run on any EVM-compatible network and user-friendly interface makes it a breeze to integrate.

This tutorial provides the steps to integrate a feedback form into your dapp. From preparing the backend and deploying it on Linea, to establishing a connection with MetaMask using the MetaMask SDK for a better user experience, you're well-prepared to foster an engaging and democratic environment within your dapp. Never forget, the potency of web3 lies within your grasp!

To learn more about the MetaMask SDK, check out metamask.io/sdk/.