[Drupal] How to display a webform in a colorbox?

| | 1 min read

Webform is a helpful module that enables you to submit information such as contact forms, surveys etc. It is easy to configure webform in a drupal site. Now, what about displaying a webform inside a colorbox? Although it is easy to install colorbox module and write custom code to display webform, we also have to effectively handle form submission and validation errors. However, there is an easy way in drupal7 to display a webform inside a colorbox.

Steps

Webform appears as a content type. To create a webform, simply create a content of type webform(webform-screenshot1.png). Then, add the necessary fields to the webform(webform-screenshot2.png). After creating webform, display it inside a colorbox. It is quite simple. Add the following line of code in your template file to print a link to the webform. Remember, it is created as a node in your site.

webform-screenshot1.png

webform-screenshot2.png

  
<a class="colorbox-node" href="http://example.com/node/10?width=600&height=600">Contact us</a>
 

This will do the magic. Now your webform will be displayed inside a colorbox(screenshot3.png). You need not be worry about the form validation and submission. So simple, give it a try.

webform-screenshot3.png

Reference: