Adding interactive HTML forms in Markdown | Markdit

body {padding: 0 15px;max-width: 66ch;line-height: 1.5;overflow: auto;} @media screen and (min-width: 760px){ body { margin: 0 auto; }} img {max-width: 100%;}Adding interactive HTML forms in MarkdownMake your markdown collect form responses!Also, In case you are looking for a light project management tool, checkout Slateo - https://slateo.ioTL;DRMarkdownMarkdown is a light weight markup language primarily focused on writing text based content. It is great for writing formatted text which can be edited using any simple text editor. It provides all the necessary tooling required for presenting formatted content including options for inserting links, images, quotes, tables etc.Why do we need to add formsMarkdown is great for presenting content and has everything needed to support it. However, it lacks interactivity. Since, people have started to use markdown to create webpages like blogs and docs, the role has extended from being a mere content page to part of an interactive website. Let's say you want to display a contact-us form. These are not directly possible in markdown. Although, you can write html in markdown, you wouldn't want to make a markdown file dirty by sprinking heavy html and js code all over your markdown.Embedding forms as URL or iframeSeveral existing services provide option to embed their UI as a widget via a small iframe snippet or as a URL. Since, markdown allows you to add html, you can directly copy and paste the snippet in your content.This makes embedding a widget possible in content publishing apps, like Notion, who allow embedding a URL.Create forms using SlateoSlateo lets you create forms and record responses without requiring to write html/javascript code.To create your own form,

Create a project

In the project, go to Forms from the menu and create a form.

Create your Form.

Click on Publish and then Copy the link.

In the embed page, you will find an option to configure your widget URL.

Embed following snippet in your markdown content

<iframe 
    src='<YOUR_URL_HERE>'
    style="border: none; width: 100%; height: 500px"
></iframe>

Hooray! you have embedded your own custom form in your content without requiring any coding skills.Now you can add login forms, contact-us forms etc., in your content directly and still continue publishing in your favourite apps.