Cover image for a first look at redwoodJS: part 5 - contact

a first look at redwoodJS: part 5 - contact

ajcwebdev profile image anthonyCampolo Updated on ・8 min read

We see it as a Rails replacement. Anything you would normally do with Rails we hope that you’ll be able to do with Redwood.

Tom Preston-Werner - Full Stack Radio 138

If you've made it this far into my series of blog posts I commend you and hope you've found them useful.

In part 1 we created our RedwoodJS app, in part 2 we created links between different pages and a reusable layout, in part 3 we got the database up and running and learned CRUD operations for our blog posts, and in part 4 we set up the frontend to query data from the backend to render a list of blog posts to the front page.

In this part we'll be combining everything we've learned up to this point to generate a contact page and take input from a user. We'll be using the same form tags that we learned about in part 4, which are wrappers around react-hook-form.

This is the simplest way to create a form, but Redwood can be used with other popular React form libraries like Formik or you can use react-hook-form directly.

Forms are a topic I'm particularly passionate about and believe receive far too little attention in bootcamp curriculums and online tutorials. They may not be the most exciting topic, but I encourage you to not gloss over these parts of the framework.

5.1 redwood generate page contact

The first step is to enter the yarn redwood generate page command to create our contact page.

yarn rw g page contact
Enter fullscreen mode Exit fullscreen mode


5.2 ContactPage

This generates a folder called ContactPage in our web/src/pages folder, and creates two files, ContactPage.js and ContactPage.test.js.


This should look familiar if you've followed along with the whole series.


Our ContactPage component contains the same boilerplate we saw when we created our home page and our about page.


Go to BlogLayout and add a link to the contact page.


Now we'll import BlogLayout into ContactPage.js and wrap our contact page content in the BlogLayout component.


We can now navigate to any of our three pages.


5.3 Form

We're going to import the Form tags that we looked at in the previous section. Refer to part 4 or the Redwoodjs docs to learn more about these tags.


Now that we've imported the tags, create a Form with a Label and TextField for name, and a Submit button.


Here is the label, input, and button.


We'll add a little CSS in a moment, but first see what happens if we try to input data.


If we click the save button we'll get an error.


This makes sense, we haven't told our form what to do yet with the data. Let's create a function called onSubmit that will take in a data object and console log the data object.


The onSubmit prop accepts a function name or anonymous function to be called if validation is successful. This function will be called with a single object containing key/value pairs of all Redwood form helper fields in your form.


Now if enter data into the form and click save we'll see the following in our console:


5.4 data

Our input is contained in the data object. Right now it only has a key/value pair for name but we'll be adding more in a moment.

Before doing that, what can we do with this data object?


We can pull out the value of name by console logging data.name:


We want to be able to accept a longer message from our users, so we're going to import the TextAreaField tag.


We now how a TextField for name and email, and a TextAreaField for a message.


To make this look a little nicer we're going to include just a little CSS.


Our buttons, inputs, and labels are now display: block which adds a line break after any appearance of these tags, and the label also has a little bit of margin on the top.


We'll test out all the fields:


We now are getting back an object with three key/value pairs.


We can console log any part of the object that we want.


Now if we look at our console we'll see each output and it even tells us which file and line corresponds to each piece of data.


5.5 validation

What happens if we only fill out some of the form and try to submit?


The form doesn't care, it simply takes the empty inputs and returns an empty string.


We want to add some validation so the user can't submit the form unless they've given input for all three fields.


5.6 errorClassName

We gave each TextField an errorClassName with the attribute error. The validation prop accepts an object containing options for react-hook-form.

Right now we're just adding the required attribute, but later we'll use the validation prop for a regular expression.


In our CSS we'll add the following properties for errors.


Now when we try to submit an empty field we see the color change to red.


Once we give input the red error color goes away.


There's still an issue, which is we can submit an email that is invalid.


Here's a regular expression provided in the Redwood tutorial video. Don't ask me to explain it, cause I don't know what it's doing.

All I know is it does a thing with the @ symbol, then it does another thing with the . symbol, then it does some other things and figures out if you gave an email or not. Google "regex tutorials" if that wasn't a satisfactory explanation for you.


5.7 FieldError

Now we get an error if we don't provide a valid email address. It would really be nice if we could tell our user why they are getting an error.


We're going to import FieldError to show error messages to our users.


Now if we try to submit without giving input we are told that the field is required.


If we enter an invalid email we are told that the email is not formatted correctly.


If we add the errorClassName to the Label tags we'll also turn the labels red if there's an error.


Now we have the label and the input field turn red if there's an error.


Might as well make everything red while we're at it.


Since the FieldError will only show on errors we can just inline styles with style={{ color: 'red' }}.


Glorious red as far as the eye can see. Something's still not right though. "Message is required" should be on its own line.


Adding display: 'block' will put the error on its own line.


It would also be nice if we could tell the user a field is required before they hit the submit button. We'll do that by adding mode: 'onBlur' and pass that into validation.


Now when we enter a field and leave without filling it out we are immediately given feedback.


And for now that's our entire form. Here's a look at all the form code.


In the next part we'll connect our contact form to our database so we can persistent the data entered into the form.

Posted on by:


Editor guide