Using colorbox in login, register, password forms.

+1 I have same issue with user register form and when I am using by adding css class, it shows up form in colorbox but with the enter page (including site header)

<a class="colorbox-load" href="/user/register?width=500&height=500&iframe=true" title ="Register"> Register </a>

My question is how to show registration form in colorbox similar to login block?

Thanks,

subscribing

having the same issue, not sure of how to fix.

Try this:

<a class="colorbox-load" href="/colorbox/form/user_register?width=500&height=500" title ="Register"> Register </a>

At admin/settings/colorbox, there is a checkbox and description:
Enable Colorbox load
This enables custom links that can open forms and paths in a Colorbox. Add the class "colorbox-load" to the link and build the url like this for forms "/colorbox/form/[form_id]?width=500&height=500" and like this for paths "[path]?width=500&height=500&iframe=true". If you do not want the box to persist set iframe to false. Other modules may activate this for easy Colorbox integration.

Cheers

This doesn't work for me.

I also tried activating the colorbox for user login, and noticed that when there is an error for that form, it redirects to the ordinary /user/login page with the error messages.

I wanted to use colorbox and the forward module, but looks like I will have to get into the modalframe javascript way.
http://drupal.org/node/692052

I'm having exactly same issue.
Please help !

I can confirm this bug as well. The lightbox works fine at first, but doesn't correctly redirect leaving an unformatted page.

To reproduce:
- add a link like: <a class="colorbox-load" href="/colorbox/form/user_login?width=480&height=230">Log In</a>
- click the link and a lightbox will come up correctly.
- enter incorrect login details
- get redirected to unformatted page.

My workaround was to use the 'user/login' link alternative (although this doesn't let me change the width and height without hacking "js/colorbox_login.js" and it shortens the field length as well in colorbox_form_alter()

What would be ideal is if the lightbox would persist when login fails.

subscribing.

However, the work around "user/login" isn't processing form field input. Even entering correct log in username and pass, it just takes me to the user/login page and presents an empty login form.

subscribing. seems something that's completely necessary if you ever want to use a form in a colorbox

I just found a code in lightbox2 to make this decently usable for wrong passwords:

on color.page.inc modify the function colorbox_login() to look like this:

function colorbox_login() {
$form_id = variable_get('colorbox_login_form', '');
if (count($_POST)) {
return drupal_get_form('user_login');
}else{
colorbox_form_page($form_id);
}
}

If the password is wrong redirect to login page and display the error.

Hope someone can make a patch for displaying the error in the modal itself

Hope to have this fixed today. Just need to finagle the loaded form a bit further

I completely replaced function colorbox_login() with that code and bad log in at least sent me to back to the drupal login page but so did valid logins

Committed a variations of #10 to 6-dev, please test and report back here.

Thanks for finding a solution pitxels.

it's still redirecting incorrect logins to the unstyled colorbox form for me.
i've overridden the user-login.tpl.php and am using the "colorbox-load" as in #7.
sounds like this needs to be dealt with in java.
would love to see this working somehow, at least the redirect part with error message for starters
as i'm not even seeing the errors.
thanks

The latest dev version doesn't seem to validate at all. Even correct credentials continually redirect to /user/login/colorbox?destination=user.

edit: Validation works if you use the login form. It does not work if you use the login block. If you do use the login form with incorrect credentials, it does redirect to user/login/colorbox?destination=user with the error message, and proper credentials will validate at this step.

Tried both beta9 and the latest dev and have the same problem.

I can log in just fine with the correct user/pass but entering incorrect information or nothing at all closes the colorbox and takes me to a regular page "/colorbox/form/user_login?width=500&height=250" and does not display any errors.

Colorbox is clearly the best lightbox module, but this bug is sadly keeping me from using it.

same problem....

same problem, loving the module, but this redirect problem is a show stopper!
using a href to user_login_block logs in fine, but redirects to

/colorbox/form/user_login_block?width=500&height=250

giving 'You are not authorized to access this page.'

I tried 6-dev as frjo suggested #13, the login form validation is working fine, sending back to the login page with error message, but not for the login block. For login block, with invalid inputs is redirected to styled login page once without error message, and second attempt is redirected to "/user/login/colorbox?destination=user" unstyled page.

My solution "for now" is to add "create new account" and "request password" links to login form (identical to the login block) used template.php and user-login.tpl.php

Thank you for a great module as always,
iparsin

Tested latest dev version of the module:

Login page works for both successful and failed logins
Login block fails to work, redirecting both successful and failed logins to the login page without logging a user in

Not sure which issue this belongs to but I found the redirect or destination for user/login to not be functional, and to either direct to /user or the fp depending on config. I changed the colorbox_login.js to read

(function ($) {

Drupal.behaviors.initColorboxLogin = function (context) {
  $("a[href*='/user/login'], a[href*='?q=user/login']", context).colorbox({
    initialWidth:200,
    initialHeight:200,
    onComplete:function () {
      $('#edit-name').focus();
    }
  }).each(function () {
  //u37 CUSTOM
  var part1 = "user/login/colorbox?destination=";
// remove leading slash
  var part2 = window.location.pathname.substr(1);
      this.href = this.href.replace(/user\/login/, part1 + part2);
  });
};

})(jQuery);

now all links for comments etc have their intended destination - a quick fix if this is the behaviour you need.

Building on @DRScales suggestion in #22 I have a patch that will add the current page as destination unless a destination is already set for the link. Please try it out and report back here.

User login block will be removed since it doesn't work.

A much improved version of #23.

User login block is now removed, you can add create account and lost password links to the user login form etc.

@frjo - thanks for your work
I can't test the patch at the moment, but I'll try to give it a test soon.
Cheers

#24 @frjo
This patch works great on dev version, thank you for saving my time :-)

Here is a Drupal 7 patch with the same features as #24.

@Mtro, this patch is only about the "Enable for login links" configuration that will automatically rewrite all login links on your web site.

The user register from id is "user_register_form" so your link should look something like "colorbox/form/user_register_form?width=500&height=500". When you build these links you should add a destination as well so it becomes "colorbox/form/user_register_form?destination=user&width=500&height=500". I have added this to the README now. In Drupal 6 it was "user_register".

Did you have a problem with the patch? The patch was built following the instructions in http://drupal.org/node/1054616. You have the option of using "git diff" or "git format-patch", I use git diff. I'm new to Git, normally use Bazaar, so I may have done it wrong.

The patches in #24 and #27 applied cleanly to a fresh clone of D6 and D7 respectively.

The command to use is 'git apply [patchname]'
'git format-patch' just adds some headers so that the patch can be piped to mail, not relevant to a list like this.

Using tarballs also works, the patches can be applied using 'patch -p1 < [patchname]'
The '-p1' parameter strips the b/ and a/ away.

In both cases the patch should be placed inside the module directory.

Hope this helps someone.

I have added a comment to http://drupal.org/patch/apply in the hope that somebody updates it ;-)

i tried the latest dev and login form works in popup. problem is, that underlying forms still have focus, so when you start typing you type to different form, not the one in popup. Also opacity setting appears not working, Im not able to modify it, background is too dark (with default style).

The user register from id is "user_register_form" so your link should look something like "colorbox/form/user_register_form?width=500&height=500".

On a side note, I was following the instructions on the readme.txt and there, it says that the form id is 'user_register'. Not a big problem, I initially could not understand why I was getting an access denied until I look at the _colorbox_form_page_access function.

Regards.

Committed #24 to 6-dev.

Committed #27 to 7-dev.

I tried the latest dev and the login part works very well.

Entering nothing or false information into the "registration" and "recover password" forms that are loaded in colorbox still takes me to blank pages without any error messages or design elements.

This is actually a very simple fix. Focusing your efforts in this area will alleviate all of the other fixes in other components.

1. Go to your colorbox module and open the file: 'colorbox.pages.inc'
2. Go to the function: 'colorbox_form_page'
3. Before anything is handled on the form identifier, clean out the extraneous name value pairs:

  if (strpos($form_id, '?') > 0)
  {
  	$form_id = substr($form_id,0,strpos($form_id, '?'));
  }

4. For Access Control fix, go to your colorbox module and open the file: 'colorbox.module'
5. Go to the function: '_colorbox_form_page_access'
6. Before anything is handled on the form identifier, clean out the extraneous name value pairs:

  if (strpos($form_id, '?') > 0)
  {
  	$form_id = substr($form_id,0,strpos($form_id, '?'));
  }

7. Retest, finding that the question mark assumes when it is cleaned out, all other associated name-value pairs are also cleaned out so that the form identifier is clean and can associate the appropriate form into the modal.

Patch part of beta4/beta11.

Cleaning up the tags.

Hello friends, I'm trying to apply the patch but I get the following error:
"can not apply the patch to the selected context"

I'm using this netbeans 6.8 and netbeans 6.9. Someone could tell me how to do this please

Subscribing for the issue in the start of discussion.
Normal node add form, processed like this "colorbox/form/blog_node_form?width=500&height=500&destination=node/233".

If the form has no errors everything is ok, otherwise if validation should occur, i am redirected to the link above with no style or js processed.

Any help is highly appreciated

In the case of an error, it has been proposed that you initiate your colorbox using iFrames. iFrames are quite frustrating to work with, however, are always the goto solution in case nothing else can be done.

Append the following to your name-value pairs:
&iframe=true
or
&iFrame=true

The only problem with this solution is that you will no longer be able to jump out of the iFrame once your form is successful. I am also looking for the solution you require -> a form that works with colorbox that works with a... website.

Sorry for posting to a closed issue, but i don't know this little bug really needs a new one.

Short description:
If no destination given in login link and Drupal runs in subfolder, after login, the user is driven to /subfolder/subfolder/ (Page not found).

Long:
The 6.x patch in #24 contains:

+      // If no destination, add one to the current page.
+      if (path.indexOf('destination') !=-1) {
+        this.href = new_path;
+      }
+      else {
+        this.href = new_path + addquery + 'destination=' + window.location.pathname.substr(1);
+      }

If no destination given in login link and Drupal runs in a subfolder, it takes the subfolder, and the rendered login form will have this destination.

(if you are on the home page)
Original login link: /subfolder/user/login
JS modified login link: /subfolder/user/login/colorbox?destination=subfolder/
Rendered form's action: /subfolder/user/login/colorbox?destination=subfolder/
It will drive the user to /subfolder/subfolder/ (Page not found) after login.

To quickly solve the problem, I used a destination in the login link (/subfolder/user/login?destination=user)

David

Well, although i have been using drupal for quite sometime now...i have always been able to do without the coding...so can you please explain all the very tiny steps to get this to work...please...like all other users who have been able to get this to work, i too want this to work...but i don't know where to add the "class "colorbox-load" to the link and build the url like this for forms "/colorbox/form/[form_id]?destination=some_path&width=500&height=500" and like this for paths "[path]?width=500&height=500&iframe=true" or "[path]?width=500&height=500" if you don't want an iframe. Other modules may activate this for easy Colorbox integration."

Please Help me out....and do i have to still install the patch or is it already in the latest dev release....i am using d7 and the latest colorbox...

Colorbox could benefit to be split into two Modules:

1. For that facebook image box appearance
2. For forms

The form support in Colorbox isn't behaving like it should because this is essentially... colorbox

for forms, as long as you have the colorbox.js on a page, you can call drupal_add_js and just do your own colorbox for forms ie put the following code in a php block for anonymous users, or module or theme function or tpl.php override. this works for me for now but there should be a module-way to do this for all forms in drupal as well as from webforms module.

<?php
$elements = drupal_get_form('user_login_block'); 
/**do all your rendering stuff here**/
$rendered = drupal_render($elements);
?>
<a id="clickme" href="#">Login</a>

<div id="login-wrap">
  <div id="logger">
    <?php print $rendered; ?>
  </div>
</div>

<?php drupal_add_js("
jQuery(document).ready(function(){
jQuery('#login-wrap').css('display', 'none');
jQuery('#clickme').colorbox({innerWidth:160, innerHeight:220, inline:true, href:'#logger'});
});", "inline");
?>

@mdshields, you are quite right in that Colorbox doesn't work well for forms. I have removed most references to forms on the project page already.

If you want to put forms in modals I believe ctools is the way to go. Someone could build a module that makes use of ctools modals for a bunch of common forms.

Hi guys,
I've added this portion of code in a new block (debug position):

  <script type="text/javascript">
	$(document).ready(function() {
		$.fn.colorbox({href:/user/register", open:true});
	});
</script>

When i reload the page colorbox works nice but no register form come up.. Just the Forbidden Error.

What i would to have is:
For Anonymous User after (x) visited pages the colorbox with register form come up.

Is it possible to do? How can i fix the Forbidden issue?

Thanks!

try

I'm having a hard time applying the patch in #24.

also, it doesn't really seem like this issue is fixed [at all.]

I couldnt use colorbox to load forms. When I try to load a node add form, it doesnt show anything? Is there any problem with forms?

This is not fixed.
Forms work as should,when correct credentials are entered.
you just set the destination and after user submits his username/password he is logged in and redirected to the set destination.

thats what i used:
colorbox/form/user_login?width=500&height=500&destination=user

The problem though is when someone enters invalid credentials; colorbox takes the user to a page containing the form unformatted in a white browser page

After reading this in the project page

Failed form support in Colorbox and a new beginning

Use Modal forms (with ctools) instead.

The attempt to support opening various forms in a Colorbox was in hindsight never a good idea. It will most likely be completely removed from the module. Form error handling and form redirects are complicated, a lot of code would be needed to do it correctly.

Fortunately the Chaos tool suite (ctools) has all the needed code already. There is no point and click solution however, a custom module is needed to implement it. That's the reason Modal forms module is being developed. Please try it out.

i guess its a wont fix bug

i tried modal forms,but they cant be compared to colorbox,colorbox is much more beautiful.
So i attached the patch that fixes the unformatted page.now if validation fails,user is redirected to user/login.

I guess its up to frjo if he wants to commit this or keep working on modal forms

ty so much. trying this out now. :)

Thanks rootatwc, I get this issue on one computer but not another. This is a more graceful way to deal with the error.

I tried every # given above none work except #60.

Though #60 needs to modify little bit. Because when applying #60 it just redirects to user not user/login . If you have a colorbox link for registration it will still redirect to just 'user' .

I modified #60 to

if (isset($_POST['form_id']) && $_POST['form_id'] == 'user_login') {

unset($_GET['destination']);
drupal_goto('user/login', array('query' => $destination));
}

else if (isset($_POST['form_id']) && $_POST['form_id'] == 'user_register_form') {

unset($_GET['destination']);
drupal_goto('user/register', array('query' => $destination));
}
It works well.

Fix in #60 and #63 are not working for me. After entering wrong account data on login form, for ex., user is just redirected to front page, without any error message... any suggestions?

My workaround until the issue fixed ..

In my template.php

function template_preprocess_html(&$variables) {
  // give colorbox its own html
  if (isset($_GET['template']) && $_GET['template'] == 'mycbox') {
    $variables['theme_hook_suggestions'][] = 'html__mycbox';
  }
}

In my html--mycbox.tpl.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>">
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</body>
</html>

In my page--user.tpl.php

<?php print $messages; ?>
<?php print render($page['content']); ?>

My login link
<a href="/user/login?width=500&height=225&iframe=true&template=mycbox" title="Login to the site" class="colorbox-load">Log in</a>

Wrong password, no worry ..

is user.tpl.php a new file that you created? if so, where did you place it?

True, it's in my theme root directory.
/sites/all/themes/mytheme/page--user.tpl.php
HTH

Aww... I couldn't get your workaround to work for me. I think it's probably got something to do with the redirect urls I have set up for something. The user registration/forgot pw links arent present and invalid pws still load on a new page. I wonder if it's because I have the 403 Redirect to Login module setup.

This issue has not been resolved. Would anyone mind to offer some fix to this one? Even for just the redirection when login details aren't correct? I really need to this to work out. Would somebody help? I've tried all of the workarounds mentioned above but the redirection when login details aren't correct always ends up on a white page. Anyway, I really thank all of the users who offered some fixes and I was just unfortunate for not making this work on my end. Phew.. Been struggling on this for days now...

Found this post -> http://wgnmedia.com/en/blog/colorbox-implementation-%E2%80%9Clogin%E2%80%9D-and-%E2%80%9Cregister%E2%80%9D-forms-drupal-6 and it did the trick. You might also want to try and follow the instructions there. Works for me! Thanks to that post!

Form support in Colorbox was a bad idea. I will most likely remove it completely in the future.

Please try out my "Modal forms" module instead, it build on top of ctools.

https://drupal.org/project/modal_forms

Also checkout the "CTools Auto-modal" module. I have not tested it but it looks really neat.

http://drupal.org/project/ctools_automodal

i looked into modal_forms module but it doesn't have a drupal 6 version. will you be creating a drupal 6 version of it? thanks!

Just for the note:
there is also Colorbox node module which already has support for webform module. Maybe it will be possible to support general forms with that.

    $opt = array(
          'attributes' => array('class' => array('colorbox-node')),
          'query' => array('width' => 300, 'height' => 240)
        );
        $link_forgot_pass = l('Forgot password', 'user/password', $opt);