How To Create Contact form with conditional fields using webform ?

  0 comments
Share

Webform commonly used to build a complex contact form or multiple feedback forms. This module allows you to create and manage as many forms as you need. Using the Webform module, we can completely customize what data we collect with our contact form. This functionality is available for both Drupal 6 and 7 although there might be slight differences in the interface.

Consider we need Developer for different job position in our organisation. For this we are creating a Contact form to allow Developer for contact us. We are taking Different field including 'Name', 'Email id', 'Qualification' and 'Work Experience'; where 'Work Experience' field having two options 'Fresher' and 'Experience'. Let's take a condition with option 'Experience'. If a developer will choose an option 'Experience' in 'Work Experience' field then a text field for total year experience will show.

Steps for creating contact from using webform and apply condition on its form field:---

  1. Install and enable Webform and Webform Conditional module.
  2. Create a Contact form:
    • Go to Administration and click on add content link
    • Click on 'Webform' link
    • Enter a title and (optionally) a short description. After you click save, you'll be on the Form Components page. Add a new Textfield called "Your name" and make it mandatory. Then click add.

      create_contact_form image

    • Keep the default settings and click on Save component button.
    • Similarly create a field for 'Email id', 'Qualification' and whatever field you want in your contact form.
    • Now create a field 'Work Experience', choose Select option from type column.
    • Enter 'Fresher' and 'Experience' in Options field like below image and click on Save component button.

      options image

    • Create a field 'Years' with textbox type.
  3. Apply condiions to 'Work Experience' field
    • Click on Conditionals tab.

      Click conditionals tab

    • Add your condition like below screenshot and click on Save conditions button to save your condition.

      Add condition

  4. Check your effort on webform page
    • By Selecting 'Fresher'.

      Select fresher Image

    • By Selecting 'Experience'

      Select Experience Image

Add new comment