loading...
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

01-generating-page-files

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.

02-pages-folder

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

03-ContactPage

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

04-ContactPage-rendered

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

05-routes.contact

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

06-ContactPage-BlogLayout

We can now navigate to any of our three pages.

07-ContactPage-BlogLayout-rendered

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.

08-ContactPage-Form-imports

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

09-ContactPage-Form-Label-TextField-Submit

Here is the label, input, and button.

10-ContactPage-Form-rendered

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

11-ContactPage-input

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

12-error-message

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.

13-ContactPage-onSubmit

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.

14-ContactPage-Form-onSubmit

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

15-console.log(data)

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?

16-ContactPage-onSubmit-data.name

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

17-console.log(data.name)

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

18-ContactPage-TextAreaField-import

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

19-ContactPage-email-message

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

20-index.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.

21-ContactPage-email-message-rendered

We'll test out all the fields:

22-ContactPage-email-message-input

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

23-ContactPage-email-message-console.log

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

24-data.email-data.message

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.

25-data.email-data.message-console.log

5.5 validation

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

26-just-name-input

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

27-empty-email-message

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

28-errorClassName-validation

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.

29-input.error-textarea.error-label.error

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

30-textfield-errors

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

31-textfield-errors-with-name

Once we give input the red error color goes away.

32-invalid-email

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

33-email-regex

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.

34-email-error

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.

35-import-FieldError

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

36-FieldError-name-email-message

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

37-name-email-message-required

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

38-email-formatted-incorrectly

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

39-label-errorClassName

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

40-label-errors

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

41-FieldError-style-red

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

42-all-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.

43-message-error-display-block

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

44-message-error-display-block-rendered

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.

45-form-validation-mode-onBlur

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

46-form-validation-mode-onBlur-rendered

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

47-entire-form

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:

Discussion

pic
Editor guide