Brainstorm

[bitifet]

I open this discussion as a public brainstorm.

You can ask here your questions, propose your ideas, expose objections, etc...

🚀 Every feedback is welcome!! (as long as it is well-intentioned)

👉 I'll try to answer your questions, transpose them to the FAQ, correct mistakes you point out, etc... as I can.

🧐 If you're new to SmarkForm, check out it's Documentation site and feel free to ask any question you have here.

💡 Don't miss its Showcase section for a fast dive-in.

🕵️ Also, in the Examples section you will find fully functional static page examples you can download and modify as you like!

[bitifet]

Big thanks to @Toheeb for his feedback in this twitter thread

[Toheeb]

Still trying to wrap my head around SmarkForm.

Say I'm to create a contact form.

I need a Text Input for name <input type=text>, Email Input for contact <input type=email>, and Textarea Form for Message <textarea></textarea>`.

I have a backend api that sends the message to my own email.

I do not need a library/framework to get this done right? Except if SmarkForm is an API that sends the message.

At what point in time will I need to use SmarkForm?

[bitifet]

👍 You're right: HTML form already exist and are good enough for that simple purpose.

But let's say you need to collect more complex data.

For instance, the application that inspired SmarkForm is used to collect data from several councils about the lifeguard services available on their beaches along the whole summer season.

They often delegate to subcontractors and we need to know about all available resources on each beach: from lifeguards to first aid kits, rescue boats, jet skis, etc. and, specially, how to contact not only to the lifeguards but their managers too.

We need to know everything in advance so that, in case of an emergency, we can contact the right people and have the right resources available.

Also the people filling the form are not tech-savvy at all, so we need to make the process as easy as possible for them.

That application is not publicly accessible, but here you have a simplified example of the concept:

https://smarkform.bitifet.net/resources/dist/examples/beach.html

Here the user can:

• Define several periods (lifeguards often use their personal phones and they eventually go on holidays...).
• Enumerate every observation point in the beach with:
  • Its GPS coordinates (with a map to help them).
  • The phone number of every lifeguard on duty at that point.
  • The real one also details the resources available at that point (first aid kits, etc.).
  • Even the color of the building is important to rapidly distinguish them when there are many in the beach.
• Duplicate a period (allowing users to only modify what changes and avoid them to fill the same data for every period).
• Even the schedules are variable-length lists (here, for the sake of simplicity, one -or none if no schedule provided- boat per beach is supposed).

This is only a demonstration: If you click on the "Submit" button, you will get a JSON in return with all the data you have filled in the form. No matter the number of periods, the number of phones, etc...

Also the color picker can be "unfilled" which is impossible (according to HTML5 specs) with a normal <input type=color> (the user could leave it black, but you'll never know if it is really black or just is unknown -or not yet filled- by the user).

This is not the case, but the same happen with radio buttons. In smarkform they can be unselected if necessary.

At the end, you get a single JSON structure that can be validated against specific rules, warn the user about noncompliance, etc.

Can you imagine the cost of collecting such data with just plain HTML forms?

You would probably opted for multi-step forms, which adds a lot of complexity (partial submits, etc...).

...but this way the user just needs to fill and submit a single form once, which is simpler from the UX point of view, and also your backend only needs to handle a single submit with all the data available for validation and processing.

👉 Finally, returning to your simple contact form: If this is the whole goal of your business, you're ok without SmarkForm.

...but if your application is going to have more functionalities that will requiere more complex forms, using SmarkForm with all forms may provide users with a feeling of consistency and reliability that will make them more comfortable with your application.

Just to mention some of the benefits:

• Smooth navigation between fields (with Enter/Shift+Enter) only requiring Tab/Shift+Tab to access control buttons.

• Ability to configure hotkeys that reveal themselves when the user presses the Ctrl key to make navigation even smoother.

  • Ex.: https://smarkform.bitifet.net/about/showcase#context-driven-keyboard-shortcuts-hot-keys
  • ...notice that you can even insert a phone number in a middle position of the list (order matters sometimes).

  Hope now it's clear for you.