Screencast Guides: Introduction 3/3

Add a Contact Form

Transcript

Hi this is Pascal from Cykod and this is the third and final tutorial in the screencasts showing you how to create a dummy brochure site that we have available for you to play around with on http://demo.webiva.net.

In this screen cast we’re going to show you how to add in a contact form in the ‘Contact Us’ page. To do that we’re going to use the Webiva custom content model system. To get there click on ‘Content’ -> ‘Custom Content’. We’re gonna ad a new custom content model, lets call it ‘Contact Requests’. This is going to create a new content model.

We decide what fields we want in here. So lets say we want a name, a special field for email, lets say we want a message field.

We can pretty much add in whatever fields we want. If we are a specialized industry and we want to add a whole bunch of additional fields we can do that. You can see there’s a lot of options here but for the most part, you leave those as is, if we pick the fields right, the system should go in and create a model for what we need.

I actually forgot we’re going to add in a couple of additional fields, we’re going to add in a date and time field called ‘Submitted’. We’re gonna add in one more field called ‘IP address’ so you can go back in, click save, and those fields will now show up in our content model.

We’ll jump here into configure and we’re going to say ‘Main Page’ and what that will do is make sure our content model shows up in the main content page. There it is, ‘Contact Requests’.

OK, so we’ve got the content model but what we need to do now is create a form and to and to kind of expose any custom content model onto your webiva website you need to publish it.

There’s a number of different publication types you can use, in this case we’re going to use an ‘Entry Create Form’. What that does is submit the form, its going to create an entry, by default its going to add all our fields to that form. Lets say, that field is required. And you’ll notice if we click ‘Save Preview’, it’ll show us what our form looks like. We’ve got that ‘Submitted At’ and ‘IP Address’, we’re not really going to ask people to put those fields in themselves so we’re going to switch it from ‘Input Field’ to ‘Dynamic Value’, tell we just want the current date and time. And the ‘IP Address’ get ‘IP address of the user’.

Now if you click ‘Save & Preview’ again you’ll see those fields have disappeared from the form but they are going to be filled in dynamically by the system.

So we come in here and put in a couple options, lets just say we want the submit button to actually say ‘Submit’ instead of ‘Create’. We want the form displayed vertically which will put the labels above the fields themselves. ‘Save & Preview’ See our form, now with the submit button and the fields are stacked vertically.

Alright so if you click ‘Save’ you can now jump back to ‘Website’. We’re going to need a submitted page, so lets add that now before we jump into the editor. Click on ‘Contact us’ page and click ‘Edit Page’.

Once again we can mix dynamic and static content on one page. Say ‘Contact Us’, give it an H1 heading, if we wanted to put some contact details or whatever we wanted to put we can obviously paste that in as well.

Then we need to add that publication we just created. Its going to show up in the bottom of the paragraph list in publications. Just drop that into the main zone, tell it where to go once its submitted. And there we go.

The form is dropped in there. We go to the submitted page. Tell it ‘Thank you’. We jump back to the contact form page, we can see we’ve got a form here with our contact page. Click ‘Submit’, we’ll get some error messages. So say ‘Pascal’, ‘testarama@cykod.com’, and ‘Hello’, click submit gonna take me to the ‘Thank you’ page.

Jump back into our structure. Sure enough, you guys can now see the IP address from where I just posted this from. We’ve got the entry into our form. If this were a live site you’d probably want to be notified of the fact that someone just submitted a contact request.

So what we’ll do is jump into ‘Publication’, add in a ‘Triggered Action. We’ll say whenever a new entry is created to send an email. New contact request. And go ahead and fill out the rest of these fields. I’m not going to do that because the system isn’t going to send one out because I’m here on the demo, demo.webiva.net.

But there you have it. Quickly add the contact form into the system. Now the custom content model system can be used for a whole lot of other things besides just a contact form. You can use it for lists, you can use it for detailed views of structured pieces of data. So its not just for contact forms but that is one things it can be used for.

That pretty much covers creating the basic brochure site we have on demo.webiva.net. You should now be able to create that from scratch if you followed this tutorial. Feel free to shoot us an email if you want to play around with the demo for a little more time, we can extend the time that any demo has or you are more than welcome to download it off of github.com.

we have installation instruction on www.webiva.net/doc and you can play with it however long you want.

This is Pascal at cykod. I hope you enjoyed this introductory series of screencasts and there should be a lot more coming soon.