Closed Bug 807155 Opened 12 years ago Closed 11 years ago

Make get involved form embeddable

Categories

(www.mozilla.org :: General, defect)

Product:
www.mozilla.org
Component:
General
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: Nukeador, Assigned: rrosario)

References

Details

(Whiteboard: r=112879 b=trunk) 

Hi,

It would be great if we could be able to embed the get involved form outside mozilla.org site, for example in community sites.

CC'ing Pierros since he did some work wrapping the form and making it usable in the Reps portal.
+1

It would be great to make this embeddable.
If manpower is needed, I can ask to Mozilla Hispano Labs team, we really LOVE to have this ready ASAP.
(In reply to Rubén Martín [:Nukeador] from comment #2)
> If manpower is needed, I can ask to Mozilla Hispano Labs team, we really
> LOVE to have this ready ASAP.

Ruben, great, glad to know the Mozilla Hispano Labs team can help with this.  For coordinating about this, this seems like a good fit to include in the discussions we're having about community building tools.
Reading the code I think maybe we can do something without modifying the mozilla.org code.

I'm going to ping some people and we'll see.
Hi!

I have a question for embed form.

how to send data  for this form?

normally I use ajax like this example:

http://stackoverflow.com/questions/10673250/processing-jquery-ajax-form-submit-with-php
I would like to implement alternative of recaptcha like this: http://areyouahuman.com/
Can i implent into the form?
(In reply to Willy Aguirre from comment #6)
> I would like to implement alternative of recaptcha like this:
> http://areyouahuman.com/
> Can i implent into the form?

Thanks for your interest in improving the current recaptcha.  There's a bug open where we can discuss this.  Please feel free to post more information about the alternative or any patches in 

https://bugzilla.mozilla.org/show_bug.cgi?id=767151

This bug is about embedding the form in other sites, so it's better to keep these discussions separate.
(In reply to Willy Aguirre from comment #5)
> I have a question for embed form.
> 
> how to send data  for this form?

To find out more about how the current form is set up, you can check out the code at

https://github.com/mozilla/bedrock/blob/master/apps/mozorg/email_contribute.py
We will probably need a new page (let say /contribute/external) that just loads the form, so it would be super easy to embed it using an few lines of code with an iframe.

David, should we request that here, on github, or code and send a pull request with the changes needed to display this new page?
(In reply to Rubén Martín [:Nukeador] from comment #9)
> David, should we request that here, on github, or code and send a pull
> request with the changes needed to display this new page?

I'd ask the developers working on Bedrock in #www.  I imagine they'd be happy to review a pull request with the change.
(In reply to Rubén Martín [:Nukeador] from comment #9)
> We will probably need a new page (let say /contribute/external) that just
> loads the form, so it would be super easy to embed it using an few lines of
> code with an iframe.

Since this is blocking us to improve the contribute page at Mozilla Hispano, I've asked again our devs to help with this.

Creating a standalone page we can use from an iframe should be easy, the problem here is that our devs have to learn how to set up the site locally first and I think that's what is blocking them to help here.
I have this working:
http://cl.ly/image/25460P2T193z

I'll submit the pull request shortly.
Assignee: nobody → rrosario
OS: Linux → All
Hardware: x86_64 → All
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/0ad080c29e3864d5d9a39ad06e2d1cc06c5adfc0
[bug 807155] Add missing lang files.

https://github.com/mozilla/bedrock/commit/2ffb12a29b56080e1602247480550d7182d23741
Bug 807155: Fix form string that was broken for l10n.

The text for the privacy policy string was changed recently
for the hacks blog form to add the "target" attribute to
the link for more appropriate behavior when framed. This broke
existing translations however. This commit reverts the string
and uses JS to add the target attribute.

https://github.com/mozilla/bedrock/commit/b2aea7f2e443884b9f74c159f1516a17e931d633
Merge pull request #627 from rlr/fix-contribute-lang-files

[bug 807155] Add missing lang files.
I tested this on dev with en-US and es-ES, and submitted both forms correctly.
This is in production.

http://www.mozilla.org/en-US/contribute/embed/

The same languages that the contribute page is enable for will be enabled shortly. I have to activate the new page in the lang files. This change was committed to trunk in r112879.
Whiteboard: r=112879 b=trunk
Committed lang file activations in r112883. This should be fully functional in prod now.
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Thanks everyone for making this happen.

Nukeador, once Mozilla Hispano has a chance to use this to improve the Get Involved page it would be great if you could write a blog post describing what you did that we could share with other local communities.
Thank you very much everyone for moving this forward, it will allow everyone at mozilla to work using the same form :)

I will try to implement the embed form this week at Mozilla Hispano and will write about it.

Thanks again!
One thing more: Would it be possible to hide captcha and description fields till the user clicks on the form? (Same behaviour as in the /contribute page)

It would be nicer to embed ;)
Reopening to ensure every detail is fixed.

Can we confirm if callbackurl parameter is working in this embed form too?

The normal one can be called this way:

http://www.mozilla.org/contribute/event/?callbackurl=https://reps.mozilla.org/e/mobile-world-congress-mwc/plusoneconverted/

So we can track where people come from.

Pending things are:

* Hiding captcha and description (I guess is a matter of including the same js)
* Confirm if callbackurl is working here too.
Status: VERIFIED → REOPENED
Resolution: FIXED → ---
The embeded form does have the callbackurl function. The page embedding the form would just have to use the correct URL (like above but for /contribute/embed/) to trigger it.

The correct JS for revealing the form on focus is also there, but the CSS isn't hiding it initially, so there is nothing to reveal. My guess is that the form was intentionally expanded so that the height of the embedding frame wouldn't have to be adjusted or left strangely tall to allow for expansion. I'll let those interested in embedding discuss that though. It could be a query parameter to have the form initially collapsed or not.
Good to know, adding a code example on my post about contribute form here:

http://www.nukeador.com/12/02/2013/contribute-form-for-everyone/

Then I think we can close the bug and then open a new one to improve it based on our needs.
Status: REOPENED → RESOLVED
Closed: 11 years ago → 11 years ago
Resolution: --- → FIXED
In terms of the callbackurl function, where do we go to see that data about where this form is embedded?  Would it show up in the Google Analytics for www.mozilla.org?
David, I though that info was passed to the dashboard, maybe I was mistaken.
(In reply to Rubén Martín [:Nukeador] from comment #28)
> David, I though that info was passed to the dashboard, maybe I was mistaken.

OK.  If it wouldn't show up in the web stats, we can talk to Metrics about capturing this information in the dashboard.  We can sort that out in bug 754902.
You need to log in before you can comment on or make changes to this bug.