Drupal Tutorials #21 - Webform - A Better Contact Form Module

hey what's up this is Scott with level of Tut's and in the last tutorial I showed you how to create a contact form using Drupal's built-in contact module in this tutorial I'm going to show you how to use a different module called webform that's a community module that is a much more robust contact system that allows you to create multiple contact forms and create your own fields within them so to undo what we did last time I simply went to modules and unchecked the contact module and then click Save now I'm going to go to Drupal org and I'm going to search for webform it's the name of the module so webform is the first one and as you can see there is a version for Drupal 7 we'll click the zip and opening up my finder install it just by dragging it into our modules folder as usual now we're going to come up to our site and click modules and then down down down we're going to be seeing webform here's webform at the very bottom and we'll click Save so where contact form created a contact form for your site webform is a little bit different web form is more like creating a content type it allows you to create your own custom fields and configure it specifically per contact form so as you can see in the configuration options there's a lot here but this is not necessarily where we're going to be going over most of our are setting up our contact form like we did in the last one in this case if we go to contour if we go to add content and then we're going to select webform we're going to create a new webform just like we would create a project page or article and we're just going to call this contact and you can have body text here contact me and we'll click actually let's provide a menu link and put this in the main menu I'll give the way to four so it's at the bottom and I don't want comments on this contact form okay and we'll click Save okay so now it's going to ask us what form components we want and the last one that just sort of assumed that we'd want somebody's name and you know what they were contacting about and then a body text well this you can add as many as we'd like and you can have them set to anything you can see you can have it sent to a time a text field a text area all sorts of stuff so we're going to say text field and this is going to be just their name and we want this to be mandatory we're going to click Add okay and it gives you even more options if we can give it a default value we can give it a description we can make sure that all they enter all the enter values are must be unique we give it a max length we can give it a width but of course I want to do all the stuff in CSS we can tell it where the label goes above inline or none I'm going to say inline and you can have it disabled or you can have it private so we're going to take a look save component and then the next one we just want to know we want to know where they work so we want to say employer okay and this is going to be a text field again we'll click Add this one won't be mandatory because I don't feel like people need to know okay let's actually even I have labeled the in line again I want to keep that sort of same safe component we're going to do one last one we're going to have this be a text area actually let's do something different because the other one added text area so let's have select options and we're going to stay let's make this be oh why why are you contacting me and it's going to be mandatory of course you know you can add any of these as many as you want these are just sort of examples that we're doing here okay so if either can check multiples would sure that sounds good to me and then here you can do like pairs where it's your key and then a readable option so we're going to have projects and then the pipe and then projects okay higher and that's going to display as higher me okay great so that's fine for these two we're going to make it mandatory we want it to be let's see so it if we want it to be a list box instead of radio buttons or checkboxes I'm going to leave it as check boxes because that's nice and easy display actually for this one we'll have it be above and just click Save as you can see you can usually even drive drag these around just like you could other fields you can clone them if you have a whole bunch of the same so you can just edit them later we're just going to leave it at this for now and click Save let's what I I'm sorry I might've done that too quickly next we're just going to click over to this emails tab right here and this is going to say who it's going to go to so let's just to my email address okay and we're going to add this okay and you could actually have this component y-you can have that be who is sending to so there's all sorts of options this this contact form module webform is really configurable so in here we can change the header details so here we want the header to just say custom my site contact form so this is what the email subject that you receive is going to be the default from address is going to be my own address and usually what I would do is fill out a a format item that is their email and make it mandatory and then you can set that component to be emailed but we didn't do that for this one so that's fine email from name we're going to set to name and then here's your template if you notice there's token values in here so it says submitted on date submitted by a user name submitted values our email values and Submission URL so if we click this token values you can see what all of these things mean and you can use all sorts of them you could throw in their IP address there any of the stuff in what this with this email values is is this is all of the values from the contact form if we click this included email values it's going to say you can select which ones you want to include if you want to check these they won't be in the email and they will not be included under this email values we're just going to click this save email settings because that's all we need to setup now if you want the form to go to different people then you can add more people here and then change the options per person now we're going to click form settings and now you can see a confirmation message this is going to be displayed or you can have them send to a custom URL I'm just going to say thanks for filling of the forum period of course I might want to write a little bit nicer message or create my own separate page for this but for now just for demonstration purposes that's fine again we again we can use token values you can have total submission limits per user submission limits status of this form I mean all this stuff is really robust comparison to thee you've created your contact form here it is so if you need more robust options webform is definitely the way to go however if you need a simple contact form this takes a lot more time to setup and you might not need to go through all this advanced settings you can have this contact form available as a block in case you want to put this on a page maybe throw it in your footer or something you can you can do all sorts of stuff so let's just click Save okay our contact form has been created let's just click view as you can see here it is you name your employer projects hire me I can select multiple multiples of these and if I were to have this on my server and then click Submit it would send that email that we configured for it to send if you'll notice I also edit it to the menu this time the main navigation and the URL is just a contact ok well that's how to set up a contact form using webform a Drupal module that makes contact forms more robust if you have any questions or comments please feel free to leave a comment on the video or hit us up at Twitter I level up tux once again this is Scott and thanks for watching bye

Channel: LevelUpTuts

Views: 62,569

Rating: 4.8418078 out of 5

Keywords: Drupal, Tutorial, software, tutorial, Data, Technology, Business, System, Management, Training, Systems, Information, Computer, Design, Using, xampp, drupal7, installing, level, up, tuts, Form

Id: PRci_xRDTE0

Length: 9min 25sec (565 seconds)

Published: Wed Apr 04 2012