Generating beautiful HTML forms with FireDrill

In a previous Post I showed you how to use FireDrill to easily find data in your Firebase database. Now I'll show you how you can easily generate beautiful material design based html forms from your data.

Let's do this! Head over to FireDrill.

See here for how to Connect.

Once you're connected, click Forms. Enter your collection that you want to generate a form from, then click Generate Form. You will see the form generated below. Notice it will detect the datatypes based on your data and generate the appropriate input.

So we see it's generated the appropriate inputs based on the data: checkboxes, text inputs and date pickers are generated. Now we want to move our fields around. Hover over a field to see it's drag indicator.

So I've dragged available down to the bottom, and also moved created down a bit.

Great, this is the form I want. Now let's Copy it so we can add it to an app we are developing.

That's it! Now the HTML form is copied to your clipboard! Let's paste it into our favorite HTML editor (VS Code for me) and see what it looks like.

Awesome! In a matter of seconds we've generated a complete HTML form. NOTE The form elements use components from Angular Material, so you'll need that included in your project.

If you like FireDrill show some love and give me a star on GitHub. Thanks for reading!