So, you need a form?

Just a few days after launching Paperbits Early Preview campaign it became clear that everybody needs forms! Every second question we got from our visitors and users was about them. Of course, scenarios like user registration, product checkout, feedback collection and many others - all of it requires a form and providing the ability to build one is undoubtedly an essential part of a content builder.

So, the work has begun, and a few weeks later we're ready to sneak peek a very first version of Paperbits Forms module.

1. What is a form in Paperbits?

A form in Paperbits is just another container-like widget where you can put (besides regular widgets) input controls that would eventually collect and submit user's data to a designated target.

2. How to create a Form?

If you're already familiar with the process of creating the content in Paperbits, there is nothing new you or your users need to learn. Just drop the Form widget onto a page and, similarly, start adding input controls, while assigning them required properties like "label", "placeholder", "max length", etc. Also, check out a few pre-defined design blocks to see an example of complete forms.

3. Where the form data gets submitted?

Depending on your scenario, you may have different backends accepting form submissions. It might be a commercial service like Formspark (see example here) or your own endpoint. As for the latter one, we prepared a simple example based on Firebase Cloud Functions, which takes the submitted data and pushes it into Real-time Database. Please check out the source code and related step-by-step tutorial.

4. How does the submitted data look like?

As mentioned above, a form consists of a number of input controls. In most cases, these elements have properties like "name" and "value" that basically make up a dictionary of key/value pairs. Based on backend implementation, this dictionary becomes serialized into URL string, JSON object, plain text or something else.

5. Real life example: Accepting payments with Stripe

Wrapping up, we wanted to mention one of the most asked-about scenarios where the forms are needed — it's accepting payments. Implementing your own payment processing is a really challenging task but, thankfully, there are services like Stripe that can help you set this up in a few minutes. For this, we also prepared a short tutorial.

6. What's next?

As you have guessed, we're not done with Forms here, and more cool features are coming to this module soon.

First of all, it is "Conditions" — a set of rules that allow to show/hide, enable/disable, set or calculate a field value (and other properties) depending on the state of other fields. This feature might be useful for inputs like "confirm password" on a signup page or "billing address is the same as delivery address" on a product checkout form.

Second of all, we're adding more types of inputs (e.g., "Captcha" or "E-signature") and pre-defined forms for many common cases. What exactly gets added will depend on the feedback from you — our customers.

Finally, there are plans for out-of-the-box integrations with third-party services like Paypal, Square, Stripe, and others.

All this will help your users to create powerful forms in minutes.