How To Create Custom Forms Using Drupal In 4 Easy Steps
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 |
| 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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
Closing Notes
Using the webform module anyone can create a webform. Even non-programmers can create forms for their website using this method.
CSS Brigit | How To Create Custom Forms Using Drupal In 4 Easy Steps August 11th, 2009 at 9:00 am
How To Create Custom Forms Using Drupal In 4 Easy Steps…
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…
phill September 11th, 2009 at 3:36 am
Thanks Raj, just what I needed :-)
Edna October 30th, 2009 at 9:51 pm
Just finished doing a form for our website using your step-by-step instructions. Very helpful. Thanks!
mershack October 31st, 2009 at 8:17 pm
please create a form ythere
Luis Aveiga January 22nd, 2010 at 11:11 am
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.
amit January 28th, 2010 at 5:06 pm
Thanks Raj, just what I needed,
it proved really very helpful to me.
Linda February 16th, 2010 at 1:13 am
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
Raj February 17th, 2010 at 7:34 am
Linda,
Laying out the form that way cannot be done without programming a custom drupal module.
Raj
Samba February 17th, 2010 at 11:33 pm
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.
Steve Dossett February 22nd, 2010 at 5:22 am
Linda: you can override it with the theme’s main style.css file.
Raj: thanks for the tutorial. Nothing to it!
Manjunath March 3rd, 2010 at 3:27 pm
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.
Manjunath March 3rd, 2010 at 3:28 pm
form:
First name ______ Last name __________
Addr1 _______________________
Addr2 _______________________
City _________________ State __ Zip __________
Email _______________________ Phone __________
angel April 28th, 2010 at 7:29 pm
I would like to use a background image on the webform, how do i do that?
Thank you!
Azar June 4th, 2010 at 12:59 pm
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
arun June 9th, 2010 at 1:31 pm
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
Lena June 22nd, 2010 at 12:15 am
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!!
Richard Peacock July 2nd, 2010 at 3:12 am
@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
Jean July 8th, 2010 at 12:46 am
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?
Ashley July 28th, 2010 at 11:17 pm
How do you open webform after you install it?