Create forms and embed them in your application using Embed

Create forms and embed them in your application using Embed

Embed: Appwrite Hashnode Hackathon

Team Details

Description of Project

Embed is a low-code tool to create and embed contact and feedback forms in your web application using iframe without framework agnostic.

Unique Value Proposition

  • Using Embed one can create contact and feedback forms and embed them in any web application without framework agnostic using iframe.

  • Also, the tools provide customization for form style. Apart from the default form style, it supports Material Design (a design system from Google) form fields.

  • At the moment, a contact form can be created but all types of forms can be implemented very soon namely a user feedback form, emoji feedback form, and a low-code comment section that can be implemented in any blog post.

  • The responses from the forms can be viewed in the Responses tab. Plans to send emails to the form creator for all responses in the future.

  • The motivation behind the creation of the tool is used to make anyone create and embed forms even in plain HTML websites with no javascript.

Tech Stack

  • Vue.js

  • Appwrite Cloud

    • Authentication

    • Database

  • Vercel

OAuth service is implemented in Embed for quick and reliable authentication. Also to save the form configuration and response a Database service is used.

Challenges I Faced

  • Building a low-code tool, required a clear thought process for connecting different components into one. The process took much trial and error until I came up with a maintainable and scalable approach connecting different components that'll work together.

  • In every Appwrite service integration either authentication or database, some issues (namely, user roles, and db attributes) make me thinks, about why thing are not working. But the well-written documentation and community support make the process less tedious.

Public Code Repo

Here's the source code, https://github.com/roopeshsn/embed

Here's the video to know more about working with the tool, https://youtu.be/gD_EI_hr3us

The application is hosted on Vercel, and here's the link to try it out, https://embedio.vercel.app/

Did you find this article valuable?

Support Roopesh Sn's Blog by becoming a sponsor. Any amount is appreciated!