In this React Project, we'll be creating a Contact Us form in React complete with Google ReCAPTCHA protection with our form submissions being collected by FormSpark! Code can be found here: https://github.com/codebubb/react-contact-form-tutorial Checkout the setup branch if you want to follow along. React Project: Creating a Contact Form --------------------------------------------------------------- 00:00 Introduction 00:30 Project overview 02:34 Creating the layout 04:43 Adding the Form element 06:05 Creating the FormSpark Integration 09:52 Adding the first form input 14:03 Update Form Control Function 16:41 Adding the other inputs 18:43 Success / Failure Messages 23:00 Adding ReCaptcha 29:48 Resetting the form 30:30 Wrap-up So in this React tutorial, we'll be taking a look at how to work with forms in React by building a simple Contact Us form. If you've not worked with forms in React at all then you'll how you need to hook up your form inputs to some state in your component in order to keep track of changes the user is making . Also, this tutorial will use the FormSpark (formspark.io) platform to collect our submissions. We'll do this by making us of the API/endpoint they provide in order to submit form data via a POST request with Axios in React (although they do provide their own package to take of this for you). Finally, we'll be adding some spam protection to our contact form by using the Google ReCAPTCHA service which is supported by FormSpark. We'll see how you can configure your React app to use ReCAPTCHA and how to get your public/private keys to provide to your app and to FormSpark. Hope you enjoy the tutorial! Leave me a comment with your thoughts. #react #forms Channel Handle @codebubb