By sevendaysstudio on

I'm looking for a way to show a webform or any other form method inside a shadowbox or lightbox.
The goal is to let people subscribe to the mailing list without leaving the active page.

Creating a link with rel="shadowbox" and show HTML content is working, but the missing link is how to the point to the webform inside the shadowbox.

Did anyone succeed in doing this in Drupal 7 yet?

Kind Regards, Tom

⋅ Categories: Drupal 7.x

Comments

BrightBold’s picture

BrightBold
she/her
Primary language English
Location Boston, MA
commented

The Colorbox module allows you to put the standard Drupal forms (contact, login, password request, etc.) in a lightbox. Some clever folks have modified the code to allow webforms to work also (apparently it originally worked with any form, but that created a security flaw, see #778102: colorbox-form security issue, but allowing webforms seems safe enough to me.)

I was able to get webforms working in Drupal 7 with Colorbox in the following manner:

That worked. I'll post my quasi-module back to the webform thread and see if there's a way to add the second part of the fix to the code so that the whole thing would be done without hacking Colorbox. But better yet, maybe the Colorbox maintainer will commit the patch.

sevendaysstudio’s picture

sevendaysstudio commented

Hello BrightBold, I didn't think of the Colorbox module, indeed it already has some built-in functionality for drupal forms. Can you point me to the webform thread you talked about? So I can follow the discussion on the code fix for webforms integration in colorbox.
Looking forward to seeing this in action.
Thanks,

Tom

BrightBold’s picture

BrightBold
she/her
Primary language English
Location Boston, MA
commented

You mean this one? #940220: Allow webforms to open in Colorbox (I actually linked it above too.)

I posted part of what I did there and if I'm able to turn the whole fix into a module I'll attach the whole thing over there. Otherwise it should give you enough info to patch Colorbox to make it work. I'll keep my eye on that thread so ask if you have questions.

sevendaysstudio’s picture

sevendaysstudio commented

I've found an easy way to implement this feature without coding that works for me:

1. you can enable webforms as a block --> select the webform content you created, tab "Webform" > "Form Settings" > "Enable as a block"
2. put the block inside a region, I've put mine in the footer region
3. CSS style the footer webform block as "display: none;"
4. for colorbox: in "configuration", "Media", "Colorbox" --> advanced settings, activate "Enable Colorbox inline"
4. add this as the html code for opening the colorbox webform link: <a class="colorbox-inline" href="?width=310&amp;height=460&amp;inline=true#name-of-your-block">

Happy colorbox'ing!

Kind Regards, Tom

deck_penguin’s picture

deck_penguin commented

first off, this was a great and simple solution. my only problem with this is that setting the block's 'display: none' leaves me with a blank colorbox. when the display rule is removed the webform shows.... any ideas on how to hide to webform ? i will keep looking also.

cheers.

edit : durrrr, sometimes i cant see the forest but for the trees, lol - just set the page bottom region to display: none and hide the block in there. again, this was a sweet solution....

chrispooh’s picture

chrispooh commented

Nice solution! What is about error messages? Is it possible to have them in the popup?

amirtaiar’s picture

amirtaiar commented

I am sorry for the dummy Q, but I have try to figure 4. and didnt understand where to put this html code.
I have tried i a block, in a cck field, full_html, filtered_html, php and so on with no success.
i have also try to put it in the node.tpl.php..

Managing Partner at Reasonat

sharadhake’s picture

sharadhake commented

Hi sevendaysstudio,

Nice solution but sorry for dummy question.. How i can display the successful message and error message in colorbox.

Thanks in advance.

rameshbabu.g’s picture

rameshbabu.g commented

Hi ,
To display error message in also in same window (lightbox window) , better to use lightbox2 module .
drupal.org/project/lightbox2

check the below link to pass error into lightbox .(It shows how to pass a node to light box but instead of passing a node you can pass your form).
Here you need to create a seperate .tpl file.
http://drupal7easy.blogspot.com/2011/12/display-node-in-lightbox.html

r@mmi

reptilex’s picture

reptilex commented

I have tried it with a form and it does not work. When the validation sees an error it redirects to the link of the forms page without lightbox.
I used a link to enable the lightbox modal, may that be my problem? In any case it is much easyer this way for normal nodes.
<a href="index.php?q=node/add/mycontenttype" rel="lightmodal[mycontenttype|width:600px; height:600px; scrolling: auto;]">'. t('Create MyContentType').'</a>

Khetam’s picture

Khetam commented

This only allow admin to see "content type" in the lightbox.
i think this is will help
<a href="node/add/lyourcontent_type" rel="lightframe[group|width:500px; height: 500px][caption]">

priyankprajapati’s picture

priyankprajapati commented

Its very useful for me

form display properly

drupalvino’s picture

drupalvino commented

Hi,

I am using drupal 7. I created one custom form.
how can i display that form in shadowbox or colorbox something?

any idea?

kbrinner’s picture

kbrinner
she/her
Location San Diego
commented

Check out the Modal Forms module - should satisfy most of the above requirements.

wasiiim’s picture

wasiiim commented

sorry but i read the comments and i didn't find a solution to my problem ....
my problem that
i have a link to the contact form and i used lightbox module to show the other links but when i open this link the hole page appears..
actually i want just the contact-site-form to appear.
any one have an idea??