Creating Web Forms In Drupal 8: Contact Module & Webform Module Tutorial

we are going to look at building web forms in Drupal 8 and we're going to check out two modules that help you do this first we're going to look at the contact module which is included in Drupal 8 core and next we're going to look at the webform module so the contact module you can find it by go to structure and then contact forms it will provide two contact forms by default which is nice you can just go ahead and edit the default form if you want but let's take a look at the process of creating a new contact form the label will be the title of this form which we'll call new contact form recipients is where you enter the email address where the submissions will be sent to message will be the thank you message that the user gets to see after submitting the form we'll just set this to thanks redirect Puffs is where is the page where the user is forwarded to after submitting the form now by default the contact form will send the user to the home page of your website which I don't really like I want to send the user just back to the contact form page but I'm not sure what the URL is so we're going to first save this form and then later get back to this setting and change it into something else so that's saved let's take a look right so we've got our form here Drupal has already prefilled the name and email address with my user account information which is neat and one thing I don't like about the contact module is that it adds this preview button here and there's no way to remove it through the interface which is a bit annoying especially if you would like to build like a lead gen form or any marketing form and you're really trying to optimize the conversion rate and then you don't need this additional button sitting right next to your call to action button anyways what I don't like about the form right now is that upon submission it will take us to the home page so let's change that we want this to go to the URL of this contact page which we'll copy from here okay contact forms new contact form edit redirect path it's Drupal 8 so we have to start the path with a forward slash so we fixed that now let's take a look at managing the form fields because the contact module is based on the field API module managing form fields is kind of the same as managing content types so we can add the same fields that are familiar if you've ever created the content type in Drupal but this is a powerful feature but also one that you know create some clutter because this list will include some things that we will never use in any web form what shall we just City we'll be fine and this looks ok not much to configure here we can make it a required field and if you want to change the look of the form we will do this in the form display tab just not much we can change here we can set a placeholder which is cool but we can set a placeholder we could make this you know City there isn't an option to hide the label of the field in the form which kind of is annoying because this doesn't let us design a very minimalistic form so you know let's just put some city here in the manage display tab we have some additional options and we can hide the label here but that doesn't change the look of our form that only changes the look of the form submission that will be emailed to us so let's just add another field let's add a select field red blue yellow what is your favorite color there we go as you can see it's very easy to create and edit forms with the contact module it's not quite as powerful as the webform module which is what we're going to look at next let's test if our redirect is now working properly I like blue that's okay yeah this looks good we get this error but that's just because I'm editing this on a local host environment and it's not supposed to be sending out any emails now to create the webform module you download it from drupal.org install the module and also the webform UI module and then you can go to structure and web forms it also has a default form here which is nice but again we're going to create a new web form let's go add new web form form we're not it automatically redirects us to the build tab which is where you add form elements and as you can see there is a huge list of elements that the web form is providing to us it's a bit overwhelming at first but once you are familiar with the some of the elements you only you don't need all these elements it's not really that much more difficult than the contact module so let's try to create a similar simple form let's add a name field here again there's a lot of options here but we can just leave them as is and save the field I would like to know someone's email if he's going to send my form and a text area where the message will go save and there's our webform the webform redirects to its own Thank You page which i think is fine and I'll now show you how to edit the Thank You page to do that we go to the settings tab then confirmation and here we have a lot of options but I kind of like the separate Thank You page and we can change the page title into thanks and the message thank you kindly and that's what we will see now we submit the form now or it's probably the simplest solution is to just add a message to the current page and since this is a simple form I think the simplest solution will be the best solution let's check that out yeah that's perfect now the foremost reason why I like the webform module is because it gives you more design control over your forms for example in our logistics team demo we made this little form here which is powered by webform module and instead of labels it uses the placeholders which is okay for such a tiny form and we can just place it anywhere in the page where we want and down here there's another form that is also powered by the webform module and here you can see we use a two column layout to make the form a little bit more compact and to organize it country of departure country of delivery there's no problem at all just moving the form around in our drag-and-drop page builder it just works like any other element except to edit the form we go to the webform module form administration page we don't edit the form inside the drag-and-drop builder and to just give you a quick look at how you build a layout like this let's go back to the webform administration page so say I want to create a two column layout for this simple form what I prefer to do and I'm sure there's multiple ways to achieve this is to use the Flex layout container save that and in the beginning it was not entirely obvious to me how this is used but what we do is we add a regular container elements in the Flex container and each additional container inside the Flex container will change the layout so now we add a second container and we'll have a two column layout if I were to add a third container as a child element of the flexbox element we'd have a free column layout we put the elements inside the containers and that was a very brief overview of the contact module and the webform module if all you need is a simple contact page and you don't want to invest any time in customizing your form I think the contact module is a great option if you need anything more custom than the webform module is just fantastic

Channel: DXPR

Views: 12,287

Rating: 4.8222222 out of 5

Keywords: drupal, webform, contact, drupal 8, tutorial, sooperthemes, drupal themes

Id: Uhu0w86lhUg

Length: 11min 41sec (701 seconds)

Published: Wed Apr 18 2018