Our users now have a big nice red button to click on when they want to create a new survey and send
it out to a list of all their different customers.
So when we click this right now we see our dummy survey new component.
Eventually this is going to end up in our form.
I think that before we actually start work in the form maybe we should go back and review our mockups
just to remember what it's supposed to look like.
OK.
So we're back here.
So we've seen this mockup before but I've added one additional little change to it and I'm not really
going to mention what the change was because I'm going to assume that you don't quite remember all the
different components that we had in the past.
Okay.
So anyways the overall form like the overall form component that we're going to be navigating to is
going to be called survey new.
Okay.
So it's going to be this like really big overall container component and I'll show you why we need that
big container in just a moment.
Now the actual form itself.
So the actual like fields and labels and all that kind of stuff we're going to call a survey form and
then each individual field will be the survey field.
So in this case we have currently four different survey fields visible on the screen.
So one two three and four.
So yeah we're going to break this forum down quite a bit but we're breaking it down this much because
the form is going to be pretty darn complex than the logic that it contains.
And let me tell you why.
When our users.
So like the startup owners or the product owners make use of our application and they enter in you know
the survey title the subject line for the email the body the email and the list of emails to send it
to when they click on submit right here.
You can imagine that in our ideal world that would instantly send out an e-mail to all these different
recipients.
Right.
Like you click submit.
Boom.
Email gets sent out.
Well I can very easily imagine that our users like the startup owners the cuffs and the product owners
might accidentally make a typo somewhere on this form right here and I'm not talking about like you
know incorrectly put in the e-mail recipient list right here.
I'm talking about like they might misspell a word in the subject line of the e-mail.
And if our users send out a e-mail with a typo in the subject line that's really embarrassing for them.
Now typos like that aren't something that we can really easily validate ourselves like validating for
typos is pretty darn complex and we don't really want to take that on ourselves because maybe our users
want to very purposefully make a typo somewhere.
So how would we solve this issue of our users kind of accidentally embarrassing themselves by entering
some bad text here and then clicking submit because you know in theory clicking submit that e-mail then
boom instantly goes out and there's no more opportunity to like fix things up.
Well I'm kind of thinking maybe if we gave them the opportunity to review all the inputs that they had
entered on the previous form maybe if we make a new component called like survey form review and we
allow a user to review all the inputs they added.
And you know maybe you read over them just once and say like hey are you sure.
Like do you have any typos here do you want to go back and make any changes.
Because when you click send right here that's it.
That's the end of the line the e-mails going to get sent out.
So I think that adding in this additional review step to our form will be really nice for allowing our
users to just review their inputs before clicking that button that really seals the deal and sends everything
out.
So I think that we'll have that in as a feature to our application.
So just to be clear our form is now going to have like two separate steps to it or two separate screens.
A user will first see the actual form they'll put in all their inputs.
They'll click on the submit button right here.
We will then hide this form and instead we will show them a different component that has still like
you know very similar looking.
It's still going to have the labels on here but rather than having text inputs these will be like hard
coded text that's going to really force the user to look at their entries before clicking on the send
button right here.
So user comes to form.
They see the form.
They put the stuff in they click submit the screen then changes.
They see the new component that allows them to review all their inputs.
They click send and then the email gets sent out to everyone on the recipient list.
Down here.
OK.
So I think that's a pretty fun feature because this is something that is very commonly seen in web applications
of all types.
You know review screens.
It's also going to be a good demo of how you might handle multi-page forms or forms where you have like
one page of inputs and then you click next and then you go to the next page and you fill that out.
And so on.
So very similar technique for handling that to what we're going to do here.
Now there's a minder to go over to the component names again because we're going to have a lot of different
components flowing around the overall like container of all this stuff.
We're going to refer to as Survey new survey new is going to have some logic on how to advance between
the survey form component and the survey form of view which is like basically you know the same inputs
but in hard coded text form.
So serving new is going to have that kind of like transition logic of showing first the form and then
the review.
The form is all about handling text input.
The survey field is all about handling and rendering a single field and then survey form review again
I know I've said it like three times now but that's your chance to review everything.
So again you know we've got a lot of components floating around here and on top of that the form that
we're trying to build is going to be pretty complex and on top of that we're going to use using a library
called redux form to fill these forms together which is kind of a hard library in its own right.
So this feature that we're about to take on right now this whole life form creation stuff.
This is going to be some pretty tough stuff pretty advanced stuff but I'm really confident that if we
take our time we make sure that we understand all the code that's going into this.
We're going to have a lot of fun we're going to learn exactly what's going on here and we'll get some
experience building a form that we can easily carry on to other applications.
We're going to make in the future.
So again might be all that challenging.
Don't sweat it.
We're going to get through it.
And it is going to work out through the next couple of lectures because it definitely is going to take
us a while to put this form together.
Do you have any questions if you get any errors.
Remember you can always post on the Tommy discussion forums.
The only thing I ask is that if you post a question about some air that you're getting Please do post
your project up to get hubby so I can review your code and help you troubleshoot the issue.
If you just say something like it's not working well that makes it really hard for me to figure out
because there is a lot of things that can go wrong.
Let's be honest there's a lot of things that can go wrong.
So when you just say it's not working.
I can't I can't quite do a whole lot for you there.
OK so enough talking enough preamble Let's start working on this farm in the next section.