So as it turns out we already get every thing set up for creating success and error messages. If you don't have it set up on your machine you must first learn how to [make a contact form](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-18-creating-contact-form) and then learn how to [validate it](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-25-new-ajax-form-validation). 

If you got all of that set up then we just need to add a bit of styling and JavaScript magic to make all this work. As you will see it is very easy.

In this episode of Making websites with October CMS I'm going to show you how to create success and error messages for your contact form.

Success and Error Messages in Forms

Few episodes ago I was talking about [Ajax form validation](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-22-ajax-form-validation) and I said that it was not the most elegant solution, but I didn't know how to do it better. [Samuel Georges](https://twitter.com/daftspunk) - the creator of October CMS -  saw that video and thought it wasn't very good to say the least. So he created new feature in October that does Ajax form validation much better - so, you're welcome :) .

In this episode I'm going to show you how to do Ajax form validation the right way.

In this video we are going to learn about new Ajax form validation that just came to October CMS few days ago.

NEW! Ajax Form Validation

### UPDATE: [There is a much better way to do Ajax Form Validation](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-25-new-ajax-form-validation)

Although I planned to continue doing what we did in the [last episode](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-21-users), I decided to make this quick video about validating our forms with Ajax.

Our previous version of validation, validated our form by refreshing the page and displaying errors. And this had a nasty side effect - it would clear all the forms input fields, which is not good from the UX perspective, as that would aggravate the user.

So in this episode I'm going to show you how to validate your form without page refresh and that way keep the data in our fields. This is good for the users, but it's also cool that the page doesn't refresh.

We are going to do that by using Octobers Ajax framework and a bit of jQuery.

In this episode we are quickly going back to forms and validation, but this time we are going to do it with Ajax na October CMSs Ajax framework.

Ajax Form Validation

In the [last](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-19-form-validation) [two](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-19-form-validation) episodes you learned how to create and validate contact form. In this episode we are going to do pretty much the same thing, but instead of sending emails to us, or our users we are going to take the data from our form and save it directly to our database.

I'm also going to show you how to use `Flash` messages to give feedback to your users.

In this episode we are going to be creating frontend form for October CMS so that the users can enter data directly into our database. I'm also going to show you how to use Flash messages to give feedback to the user.

Frontend Forms

In the [last episode](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-13-creating-custom-form-widgets) we have set up our custom form widget, and displayed it on our form page. And now we have to prepare everything so that we can save the data that is coming through it.

First we need to create `Actor` model and then a pivot table that is going to connect our actors and movies. Next we will see how to prepare the variables that we are going to pass to our form widget, so that we can dynamically populate it and save it correctly to our database.

Along the way we are also going to learn a few new things, like how to debug our application, creating table accessors etc. It's a bit longer episode so I'm covering a lot of stuff.

In this episode we are going to be setting up everything so that we can save the data that we are passing through our October CMS form widget.

Saving Form Widget Data

You will probably find your self in the situation where you would need a specific input field in your October CMS backend, and that field will not be available through October or Builder plugin.

In those situations it is best to create your own custom form widget. That is what I'm going to show you how to do in this episode. And in the next episode we will connect that widget with our models, and save the data that is loaded from the widget.

In this episode I'm going to show you how to create custom form widgets for October CMS.

Tutorials tagged with: forms

Get in touch