How to Build Beautiful Forms in Drupal 7 (Video Presentation)

This last weekend at DrupalCamp Colorado, 2011, I gave a talk about using some of the most interesting aspects of the Form API in Drupal 7. If you've watched the Drupal videos on Build a Module.com, some of this will look familiar.

As far as I can tell, the talk went over well and opened up possibilities for the audience to build dynamic forms with fairly simple workflows and no JavaScript / jQuery code. I talk about how to use the #state attribute to dynamically show or hide sections of a form, how to use the #ajax attribute to add new inputs to a form, and how to use hook_form_alter() to change the default Drupal 7 search box into a Google Suggest-style autocomplete input.

Below is the full 43-minute presentation (click here to go to the original page on chrisshattuck.com). Enjoy!



Comments

Chris, great video! Thanks for a wonderful tutorial on working with forms in D7. This was my first time watching one of your videos and I'm excited to see what else you've got.

Hi,

I have little problem, I wish that you can help me with.

I am using Drupal 7, and I am building a web site, that has a contact form in the footer which should appear in every page. The requirements was to make this form work via Ajax, all examples I found on Internet was form that is related to a node.

So when I tried to apply the same concept, I faced the problem of rendering the form, so I have passed it to the template as a parameter like this:

$vars['node']->contactForm = drupal_get_form('nilecode_form');

When I render the form by using drupal_render_children(), all the fields were rendered but with no wrapping form tag.

So after frustration, and not very useful IRC chats, I am thinking to do it by using normal Ajax request.

Before doing so is there any solution, before doing it the bad way?

Thanks.

At around the 19th minute when you're explaining the form id - you should have just put drupal_set_message($form_id); in your form alter function then you can see all the forms that are rendered. No need to convert hyphens then. Or dpm() if you have devel.

Hi I also have a little problem.
I would like in drupal to perform a master-detail or one-many form.
for example : father and a editable list of his childrens names.

What is the best way of doing this in drupal forms?

I found the solution for the Drupal form, You should create a block that will contain the desired form by making your own custom module.

<?php
/**
* Implementation of hook_block_info().
*/
function MODULE_NAME_block_info() {
   
// This example comes from node.module.
   
$blocks['act_now'] = array(
       
'info'  => t('Contact Form'),
       
'module' => 'block',
       
'delta' => 'nilecode_form', // the id of the block
       
'theme' => 'Nilecode', // the current theme
       
'region' => 'footer_right',
       
'cache' => DRUPAL_CACHE_GLOBAL,
    );

    return
$blocks;
}

/**
* Implementation of hook_block_view().
*/
function MODULE_NAME_block_view($delta='') {
   
$block = array();
    switch (
$delta) {
        case
'act_now':
           
$block['subject'] = t('');
           
$block['content'] = drupal_get_form('nilecode_form');
           
            break;
    }
    return
$block;
}
?>

I have tried to make modules that altering the content type using the Forms API in 7.x. I'd like the user to be able to confirm the values in the form before submission. I have seen a multistep module but there is no way for it. Can you tell me how to do this?

Hi .... i am new to drupal7 and i have a requirement in which i have to alter the current registration fields and add more fields. The added fields should be in multistep form . In the first step a email confirmation mail should sent. Anyone please help.

Credits to chris.
Dear friend,
Please clear me the following qs.
1.How to embed wyswig editor in webform textarea?
2.How to embed selected webform fields in a view?