Tutorials

How to Create a Client Intake Form that Improves Onboarding with Formspree + Airtable

When you sign on a customer, understanding their needs and expectations is critical. That’s why most service-based businesses—whether marketing agencies, law firms, or consulting corporations—go through an onboarding period at the start of the client relationship to get on the same page and set goals together.

The client intake form is an essential tool for onboarding new clients. It allows you to collect information about your customers’ needs and wants in an organized, reliable way. And if you sync your form with a customer relationship management (CRM) system like Airtable, you can integrate the client intake data with the rest of your customer success information.

How to Create a Simple HTML Contact Form with Formspree + Google Sheets

HTML is great for making your website look and work exactly how you want it to—but it can be a pain to work with. We’re here to make it easier and streamline the process of adding an HTML contact form to your website. It can also be a pain to make form data accessible to everyone on your team, so we’ll also show you how to integrate it with Google Sheets, which, chances are, you’re already using.

Custom Stripe Forms With No Server Code

Stripe Elements are intended for building custom payment experiences. However, they require a server to submit the charge to Stripe. What if you’re a front end designer or developer that doesn’t want to build or maintain your own server? Or what if you’re working on a static site that doesn’t have a server? Well, this tutorial is for you! In this tutorial we’ll create a payment form using Stripe Elements that submits to Formspree.

Three ways to build React forms– Part 3

Formik is a form library that’s very flexible, but also has a concise interface that’s quick to learn. In this final part of our series on building React forms, we’ll rebuild the form from parts 1 and 2 with Formik. We’ll discuss some benefits a drawbacks of using Formik, and highlight the alternatives. To recap: in Part 2 we created a controlled component form and implemented our own validation with useState and useEffects.

Three ways to build React forms– Part 2

In Part 1 we talked about building a simple contact form using an uncontrolled component. In an uncontrolled component, validation is left up to the browser. As we discussed, this can lead to an inconsistent experience across browsers. In this tutorial we’ll modify our basic form by taking control of the form’s state. In doing this we’ll create what React calls a “controlled component.” With a controlled component we’ll have more control over the form, allowing us to create a consistent validation experience, and customize it however we like.

Three ways to build React forms

There’s no “right way” to build forms in React and there are a lot of options. It’s simple enough to have a working form, but what about validation? Can you rely on the browser’s default validation, or should you write your own state handlers, or drop in a form library?