How To Create Custom Forms Using Drupal In 4 Easy Steps

August 10th, 2009 by Raj Leave a reply »

Until now the only way to create your own forms was by creating a plugin or hack the core of the content management system. Drupal however has a community created module that allows anyone to create a form on a website. The form can either send the entered data to your email address or save it in a database or both. There are a number of reasons why you will need to create a form. Here are some examples:

  • Create a Bug Report form for your buyers or users for your software
  • Register for an upcoming event.
  • Submit content to the website
  • Add a help desk to your drupal website

When the form is filled out, we may want the entries to be

  • Sent to us by e-mail
  • Save to the database

One can create a form in drupal without any coding knowledge. This tutorial shows how to create a registration form using drupal. In this tutorial we will be creating a academic research paper registration form. The form will take the name, number of participants, the event they want to attend, the name of their college, number of participants, brief abstract, and the files that show the full paper of the event.

I have chosen this form because this demonstrates the many commonly needed form field elements – one line text fields, multiple selection fields, radio buttons, multi line text areas and file upload fields. I assume that you already have a installation of drupal somewhere. If not, read my earlier article on the steps to install drupal on your shared hosting server. Our form will have the following fields

Field Name Field Type
Name Textfield
E-Mail Textfield
Title of Paper Textfield
College Name Textfield
Brief abstract TextArea
Number of participants Select Field
Research Paper as Word Document File field

Step 1: Download webform module from drupal.org.

Webform is the module we are going to use to create forms. This module adds a new content type of “webform” which will be our form. The webform module can be downloaded here..

Step 2: Enable the webform module.

Upload the modules files to the [website root]/sites/all/modules directory. The modules directory may need to be created if it doesn’t already exist. To learn how to install drupal modules, read my artilce on the same topic here.

1
Click to enlarge
2
Click to enlarge

Step 3: Create New Form

Enter the menu settings for the form where you can specify in which menu you want a link to this form to appear along with its link text. Then specify the form name, public description that appears above the form, and the text to show after the form has been filled.

Create new form

Click to enlarge

Next specify to which e-mail address the content of this form is to be sent along with the subject, from address that is seen in the e-mail received. If the form will be used by registered users you can also specify how many times a user is allowed to register the form.

Form email settings fields

Click to enlarge

Finally specify the text that is on the button such as “Register” or “Save” or “Submit”. Under comment settings, make sure you disable the form as it would look awkward and confusing to have a comment field below the registration form.

Create New Web Form

create a new form in drupal

Click on Create Content link on the navigation menu click on Web Form

Enter the form’s information such as name and the email address where the form’s information is to be sent when it is submitted by the user. It is also possible to customize the validation of the form.

4

Click on image to enlarge

Step 4: Create the form fields

When you click save, you will now see a empty list. You can now start adding form fields to the form. Enter the appropriate field name in the name field, select the appropriate type in the type column, specify it it is an email and if this field takes an email address and click Add.

7

Click to see enlarge

Having created the form’s page, now you can add its form fields

In the resulting form, enter the name, default value if any, the description to be given for the and optionally the width, maxlength, label to be placed before the textbox and after the textbox. There is a section for advanced settings if you want to customize the field further.

8

Click to enlarge

Enter the name, select the type of field, specify if the field is mandatory and specify if this field is an email address.

4-5

Create form field form. Enter name, brief description, a default value if applicable.

Do the same for the name, email, title and college name fields.

The participants field is given a limit of 1-3 participants so we should make it a drop down selection box allowing the user to select the number of participants. For the number of participants field, select the field as the type. Once you click Add, you will see a textarea labeled ‘Options’. Enter the options one in each line.

Enter the options you want to display in the drop down field. Make sure you check the Listbox check box to display the options as a select item instead of a set of radio boxes.

Enter the options you want to display in the drop down field. Make sure you check the

Listbox check box to display the options as a select item instead of a set of radio boxes.

In this case we are going to enter 1,2 and 3 each in its own line.

For the research paper files field we choose a field of type file and click Add.

Selection of acceptable file types for upload

Click to enlarge

Now we’re presented we have an option to specify the acceptable file types of this field. I have selected doc, pdf, odf, html, rar, bz2, gz and zip and specified a upload limit of 800kb. Save the form field.

Now click publish to see the form. When you fill the form out and click submit, sends the following e-mail to the e-mail address we specified in step 3.

E-Mail received from the form created in drupal

Closing Notes

Using the webform module anyone can create a webform. Even non-programmers can create forms for their website using this method.

Advertisement

35 comments

  1. phill says:

    Thanks Raj, just what I needed :-)

  2. Edna says:

    Just finished doing a form for our website using your step-by-step instructions. Very helpful. Thanks!

  3. mershack says:

    please create a form ythere

  4. Luis Aveiga says:

    Webform does not allow form editing from users… It’s a very good module, of course, but it would be more valuable if people can correct their data… Right?

    Thanks for the post, very clear & useful.

  5. amit says:

    Thanks Raj, just what I needed,
    it proved really very helpful to me.

  6. Linda says:

    This form is created showing one long line of fields. Looking for a way to rearrange the fields and labels on the page. Like:

    First name ______ Last name __________
    Addr1 _______________________
    Addr2 _______________________
    City _________________ State __ Zip __________
    Email _______________________ Phone __________

    And so on. I can do this easily in straight coding, but can’t figure out how to make it work with this module, in Drupal. (new to Drupal)

    Is this possible?
    Thanks

  7. Samba says:

    Please help is need in related to above custom form fields, how to modify modules to make or re-arrange fields like the above.

    Sample coding will be immensely helpful.

    Thanks.

  8. Steve Dossett says:

    Linda: you can override it with the theme’s main style.css file.

    Raj: thanks for the tutorial. Nothing to it!

  9. Manjunath says:

    but how. If you can provide some idea on it. I am new to drupal. so please help me out in altering the form fields inline.

  10. Manjunath says:

    form:

    First name ______ Last name __________
    Addr1 _______________________
    Addr2 _______________________
    City _________________ State __ Zip __________
    Email _______________________ Phone __________

  11. angel says:

    I would like to use a background image on the webform, how do i do that?

    Thank you!

  12. Azar says:

    Hi ………..

    i follow ur steps & add webform ….
    but VIEW & RESULT tab appear in webform
    my quest is “how to remove it & also admin creating details & also add
    comments”

    any1 help

    Thanks in Advance

  13. arun says:

    hai , thank you so much ,

    Could you please inform sites which give these methods of help by step wise

    and also ,I have created the form , which i am using for online registration,
    Could tell more and the steps for validating the forms , before sending to the data base,

    Expecting very much , and thanks

  14. Lena says:

    Hi,

    anyone knows how to create a conditional form in drupal? I mean, if I have a question: “1) Are you married?” [yes] [no]. The next question, that is: “2) For how long are you married?” will be enabled only if he/she answered [yes] in the first one.

    I noticed that there is a module called “webform conditional” (http://drupal.org/project/webform_conditional) but it works only under Webform 6.x-3.0-beta1. I tested under Webform 2.9 (my website version) and it doesn’t work.

    Thanks!!

  15. @Linda and everyone else who was asking about inline fields–

    You can indeed re-arrange the fields on webform into any configuration you like with my addon module:

    http://drupal.org/project/arrange_fields

    As of the time of this writing, it is in alpha release, so use on a production site only after thorough testing!

    Richard

  16. Jean says:

    I created a webform for a client a couple of years ago and I had it so that the email sent to my client only included fields with user entries and omitted any blank fields. I’m sure I did this via admin or pasting a snippet, since I don’t know any PHP or scripting.

    I recently added Captcha due to problems with spam submissoins, and now all the fields are included in the form submission emails. It is a lengthy form and I want to set it back to emailing submitted fields only.

    Any suggestions?

  17. Ashley says:

    How do you open webform after you install it?

  18. dZ. says:

    Looks beautiful Richard. I’m about to give your module a try. Thanks!

  19. orrexian says:

    hi,

    the introduction of this webform module has been very helpful in completing my school project. i was really happy knowing that i need not code my own modules, instead use this one.

    the only downside (for now) of using this in my project is that i need to save it to a postgres database.. well, the author mentioned a few tweekz in saving results to db, but no explanation was provided.

    do u use the keyfield as replacement for the $form [fieldset][keyfield]? did i get that right or no? and do i set the redirect url to the url of my _form_submit method?

    your help would be greatly appreciated.. ^_^

    -orrexian-

  20. Arta says:

    Hi mate,
    as I followed ur instructions, I made all my forms and it works fine, Although I cant import the data in database using the webform.

    can u instruct it as well?

  21. Jai says:

    Hi,

    I know webform can send an email .Is their a way to store the user submissions on webform in a local directory??

  22. rhoda pearl says:

    Hi,

    I’m having trouble in printing the report in PDF. The links are still functional (i.e radio button is still clickable) even though it is for printing.

    Hope you can help me with this one.

    Thanks!

  23. Mugunthan says:

    Instead of Drop down in Date field , i need to show the date in text field… please help

  24. nivi says:

    mugunthan have you found a fix, i am currently trying to do this .

  25. Mahesh says:

    How to create Table by using webform to fill content of table.I want To create Table in below format , The Content of Table id Fill up By User regularly to Update the Site.
    How Should i create Table like given below?

    —————————
    Class| Boy | Girl | Total |
    —————————
    1st | | | |
    2nd | | | |
    3rd | | | |
    4th | | | |
    5th | | | |
    —————————

  26. Chris says:

    Hi,

    Thanks for the tutorial. Is there a way to have the form display in a block instead of a stand alone page? I want to allow somebody to register their interest on the home page.

    Thanks in advance

  27. keylogger says:

    hanks for the tutorial. Is there a way to have the form display in a block instead of a stand alone page?

  28. Suparna says:

    Hi,

    Really these steps are very helpful.

    Thanks…

  29. Johnny says:

    @jai… after you create the form, you can click the tab for Results – Table to see the data results or download them to an Excel sheet.

  30. Linz says:

    Hi,

    I’ve a problem in creating webform, on http://localhost/drupal/node/add/webform
    why no “webform setting” on the page? I just dont know what’s missing in extracting webform or any setting??? Please help :) thanks

  31. Nick Lachey says:

    Nice post. I found this blog with quick tips to improve your web form conversionhttp://blog.caspio.com/webforms/how-to-create-a-web-form-that-converts/

Leave a Reply

Spam protection by WP Captcha-Free