Pages

Friday, September 11, 2009

Create Custom Forms Using Drupal In 4 Easy Steps

Views

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

0 comments:

Post a Comment

 

Web Design Company karimnagar, Web Designing warangal, Logo Design Company nizamabad, Indian Website Design Company, maddysoft.co.in