649382 - Make the 'I'm interested in...' a required field in Get In Touch form

Status: RESOLVED FIXED

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

Description

[David Boswell]

When people use the Get In Touch form they sometimes don't add any information about what they are interested in and it is difficult to know how to help them.

We'd like to try to make this a required field to see if that helps with this or not (if it doesn't we'll turn it back to being optional).

If someone is interested in updating the form to make this field optional and adding the relevant error message, I'm happy to help get the patch on
stage for testing and then get it through the review process to make it
live.

Comment 1

[David Boswell]

The code for the Get Involved page is at

http://viewvc.svn.mozilla.org/vc/projects/mozilla.org/trunk/contribute/index.html?revision=87161&view=markup

The Get In Touch form is pulled in to the page from an include and the code for the include is at

http://viewvc.svn.mozilla.org/vc/projects/mozilla.org/trunk/includes/community-sub.inc.php?revision=84923&view=markup

If someone wants to make changes to either of these files, I can help test this on our staging site at:

http://www-stage.mozilla.org/contribute/

Changes to this file can be attached to this bug.  Feel free to either edit the file and post the whole new file here or you can read about how to create a patch at

https://developer.mozilla.org/En/Creating_a_patch

If there are any questions about this or if you need additional information, please comment in this bug.

Comment 2

[Jenson M John]

Hi David, 

I've done validation for 'Get In Touch' form in http://www-stage.mozilla.org/contribute/ 

<!--Modified community-sub.inc.php Page starts From here -->
<div id="community-sub">
  <h3>Get In Touch</h3>
  <p>Want to get involved? Send us a note and we can get you started right away.</p>
  <p class="note">This is for volunteer inquiries.  If you are interested in a job, please visit our <a href="http://www.mozilla.com/about/careers.html">Careers</a> page.</p>
<!--Form name Nosnej -->
  <form id="get-involved-form" action="email/" method="post" accept-charset="utf-8" name="gitForm">
    <p><label for="get-involved-email-input">Your email address</label><input type="text" name="address" class="filled" id="get-involved-email-input" value="" placeholder="Your email address" /></p>
    <p><label for="get-involved-interest">Area of interest</label>
      <select id="get-involved-interest" name="area">
        <option selected="selected" disabled="disabled" value="">Area of interest?</option>
        <option value="Support">Helping users</option>
        <option value="Localization">Localization</option>
        <option value="QA">Testing and QA</option>
        <option value="Add-ons">Add-ons</option>
        <option value="Coding">Coding</option>
        <option value="Marketing">Marketing</option>
        <option value="Interface Design">Interface Design and Usability</option>
        <option value="Firefox Suggestions">Firefox Suggestions</option>
        <option value=" ">Something else</option>
      </select>
    </p>
    <p class="comments"><label for="get-involved-comments">Comments</label><textarea id="get-involved-comments" name="comments" class="filled" rows="4" cols="12">Hi! I'm interested in...</textarea></p>
    <input type="hidden" name="robot" value="">
    <input type="hidden" name="cmd" value="sendemail">
    <p><button type="submit" class="submit" onclick="return formValid();">Submit</button></p>
  </form>
</div>
<script type="text/javascript">
//Validation Nosnej
function validemail(email) {
   var mail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
 
   if(mail.test(email) == false) {
          return false;
   }
}

function formValid()
{
var form=document.gitForm;
var email=document.getElementById('get-involved-email-input').value;
var interest=document.getElementById('get-involved-interest').value;
var comments=document.getElementById('get-involved-comments').value;

if(email=='')
{
alert("Please Provide Your Email Id!");
form.address.focus();
return false;
}
else
 {
 if(validemail(email)==false)
					 {
					 alert("Please Enter A Valid Email!");
					 form.address.focus();
					 return false;
					 }
 }
				 
if(interest=='')
{
alert("Please Select Area Of Interest!");
form.area.focus();
return false;
}

if(comments=='' || comments=="Hi! I'm interested in...")
{
alert("Please Provide some additional information in 'Comments' field!");
form.comments.focus();
return false;
}
return true;
}
</script>

<script type="text/javascript" src="/script/1.0/mozilla-input-placeholder.js"></script>

<!--Modified community-sub.inc.php Page Ends here -->

Comment 3

[David Boswell]

That's great.  Thanks for posting this change.  Do you want to take a pass at posting this as a patch?  It will make the review and staging process go quicker and is a good thing to get familiar with.  More about creating patches is at

https://developer.mozilla.org/En/Creating_a_patch

Comment 4

[Jenson M John]

Yes David, I want to take a pass.

Comment 5

[David Boswell]

Great.  Let us know if you have any questions about the patch process.

Comment 6

[Jenson M John]

Thanks. But Could you please help me to create it as a patch @ this time. I'll take care from next time onwards.

Comment 7

[David Boswell]

Sure.  One way to do it involves checking out the relevant files from our Subversion repository to your local machine, making the change to the file and then running a command to make a diff.

So on my Mac, I did this with the following commands:

> svn co https://svn.mozilla.org/projects/mozilla.org/trunk/includes/

Change into the includes directory, edit the file and then run this command:

> svn diff community-sub.inc.php

The advantage of doing it this way is that it introduces you to our source code repository but it may be a little complicated at first.  There are some simpler online tools that will probably also work, such as

http://www.quickdiff.com/

If you have any questions about this, let me know.

Comment 8

[Jenson M John]

Sure. Thanks David.

Comment 9

[Jenson M John]

Hi David,

I'm Posting Patch for 'community-sub.inc.php' file here...

Index: community-sub.inc.php
===================================================================
--- community-sub.inc.php	(revision 87706)
+++ community-sub.inc.php	(working copy)
@@ -1,27 +1,79 @@
-<div id="community-sub">
-  <h3>Get In Touch</h3>
-  <p>Want to get involved? Send us a note and we can get you started right away.</p>
-  <p class="note">This is for volunteer inquiries.  If you are interested in a job, please visit our <a href="http://www.mozilla.com/about/careers.html">Careers</a> page.</p>
-
-  <form id="get-involved-form" action="/contribute/email/" method="post" accept-charset="utf-8">
-    <p><label for="get-involved-email-input">Your email address</label><input type="text" name="address" class="filled" id="get-involved-email-input" value="" placeholder="Your email address" /></p>
-    <p><label for="get-involved-interest">Area of interest</label>
-      <select id="get-involved-interest" name="area">
-        <option selected="selected" disabled="disabled" value="">Area of interest?</option>
-        <option value="Support">Helping users</option>
-        <option value="Localization">Localization</option>
-        <option value="QA">Testing and QA</option>
-        <option value="Add-ons">Add-ons</option>
-        <option value="Coding">Coding</option>
-        <option value="Marketing">Marketing</option>
-        <option value="Firefox Suggestions">Firefox Suggestions</option>
-        <option value=" ">Something else</option>
-      </select>
-    </p>
-    <p class="comments"><label for="get-involved-comments">Comments</label><textarea id="get-involved-comments" name="comments" class="filled" rows="4" cols="12">Hi! I'm interested in...</textarea></p>
-    <input type="hidden" name="robot" value="">
-    <input type="hidden" name="cmd" value="sendemail">
-    <p><button type="submit" class="submit">Submit</button></p>
-  </form>
-</div>
-<script type="text/javascript" src="/script/1.0/mozilla-input-placeholder.js"></script>
+<!--Modified community-sub.inc.php Page JMJ-->
+<div id="community-sub">
+  <h3>Get In Touch</h3>
+  <p>Want to get involved? Send us a note and we can get you started right away.</p>
+  <p class="note">This is for volunteer inquiries.  If you are interested in a job, please visit our <a href="http://www.mozilla.com/about/careers.html">Careers</a> page.</p>
+<!--Form name Nosnej -->
+  <form id="get-involved-form" action="email/" method="post" accept-charset="utf-8" name="gitForm">
+    <p><label for="get-involved-email-input">Your email address</label><input type="text" name="address" class="filled" id="get-involved-email-input" value="" placeholder="Your email address" /></p>
+    <p><label for="get-involved-interest">Area of interest</label>
+      <select id="get-involved-interest" name="area">
+        <option selected="selected" disabled="disabled" value="">Area of interest?</option>
+        <option value="Support">Helping users</option>
+        <option value="Localization">Localization</option>
+        <option value="QA">Testing and QA</option>
+        <option value="Add-ons">Add-ons</option>
+        <option value="Coding">Coding</option>
+        <option value="Marketing">Marketing</option>
+        <option value="Interface Design">Interface Design and Usability</option>
+        <option value="Firefox Suggestions">Firefox Suggestions</option>
+        <option value=" ">Something else</option>
+      </select>
+    </p>
+    <p class="comments"><label for="get-involved-comments">Comments</label><textarea id="get-involved-comments" name="comments" class="filled" rows="4" cols="12">Hi! I'm interested in...</textarea></p>
+    <input type="hidden" name="robot" value="">
+    <input type="hidden" name="cmd" value="sendemail">
+    <p><button type="submit" class="submit" onclick="return formValid();">Submit</button></p>
+  </form>
+</div>
+<script type="text/javascript">
+//Validation Nosnej
+function validemail(email) {
+   var mail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+ 
+   if(mail.test(email) == false) {
+          return false;
+   }
+}
+
+function formValid()
+{
+var form=document.gitForm;
+var email=document.getElementById('get-involved-email-input').value;
+var interest=document.getElementById('get-involved-interest').value;
+var comments=document.getElementById('get-involved-comments').value;
+
+if(email=='')
+{
+alert("Please Provide Your Email Id!");
+form.address.focus();
+return false;
+}
+else
+ {
+ if(validemail(email)==false)
+					 {
+					 alert("Please Enter A Valid Email!");
+					 form.address.focus();
+					 return false;
+					 }
+ }
+				 
+if(interest=='')
+{
+alert("Please Select Area Of Interest!");
+form.area.focus();
+return false;
+}
+
+if(comments=='' || comments=="Hi! I'm interested in...")
+{
+alert("Please Provide some additional information in 'Comments' field!");
+form.comments.focus();
+return false;
+}
+return true;
+}
+</script>
+
+<script type="text/javascript" src="/script/1.0/mozilla-input-placeholder.js"></script>
\ No newline at end of file

Comment 10

[Robert Kaiser]

Jenson, thanks for doing a patch, but please do it as an attachment on the bug, not inline in a comment, as Bugzilla adds linebreaks in comments that make the patch not apply.

Comment 11

[Jenson M John]

Attachment: Patch for 'community-sub.inc.php' file

Hi All,

I'm Posting Patch for 'community-sub.inc.php' file here...

Thanks,
Jenson

Comment 12

[David Boswell]

Comment on attachment 527778 [details] [diff] [review]
Patch for 'community-sub.inc.php' file

Jenson, thanks for posting that patch.  It looks like this patch is picking up some areas of the file that haven't been changed (maybe due to formatting issues?) but this is good for now.

Paul, would you have a chance to review this and suggest any changes that are needed or give any advice on optimizing the patch process?  Thanks.

Comment 13

[Paul Osman [:paulosman]]

(In reply to comment #12)
> Comment on attachment 527778 [details] [diff] [review]
> Patch for 'community-sub.inc.php' file
> 
> Jenson, thanks for posting that patch.  It looks like this patch is picking up
> some areas of the file that haven't been changed (maybe due to formatting
> issues?) but this is good for now.
> 
> Paul, would you have a chance to review this and suggest any changes that are
> needed or give any advice on optimizing the patch process?  Thanks.

Sure, I'm on PTO this week but I'll make this a priority for Monday.

Comment 14

[Kevin Brosnan [Ex-Mozilla]]

Ping for review.

Comment 15

[Paul Osman [:paulosman]]

Comment on attachment 527778 [details] [diff] [review]
Patch for 'community-sub.inc.php' file

Would it not make more sense to do this validation server-side? We already do some validation for this form in contribute/email/index.php, I would add code for validating the "I'm Interested In.." field there. Easier to follow the convention instead of doing something new.

Comment 16

[David Boswell]

Paul, thanks for taking a look at this.

Jenson, would you be interested in moving this error checking in to contribute/email/index.php ?

Comment 17

[David Boswell]

Jenson, I just talked with Paul Biggar from the Javascript team and he's interested in helping with your patch as well if you are still interested in working on it.

Comment 18

[Jenson M John]

Hi David,

#cmmnt 16 : Yes I'm interseted.


#cmmnt 17 : Yes I'm still interested. Please help me to connect with Paul Biggar.

Thanks,
Jenson

Comment 19

[David Boswell]

Jenson, great.  Paul Osman is suggesting adding the form checking in the following file:

http://viewvc.svn.mozilla.org/vc/projects/mozilla.org/trunk/contribute/email/index.php?revision=87889&view=markup

It is true that there is form checking in that file, although the current way errors are handled is not ideal -- people submit the form and are taken to a white page with an error message at the top and they need to go back to re-fill in the form.

Ideally we'd have the error message appear in the form itself so people stay on the page and can more easily change things.  Is it possible to do that by updating the contribute/email/index.php file?  If not, we should re-examine Jenson's original patch.

Any help or guidance from Paul Osman or Paul Biggar would be welcome.

Comment 20

[Paul Biggar]

Hi Jenson,

I'm not familiar with the code just yet, but I'll happily review a patch if you move this into contribute/email/index.php. Also, please feel free to ask any specific questions you need answered.

Comment 21

[Jenson M John]

Hi Paul,

But Moving into email directory or merging into index.php file. Can you please explain.

Thanks,
Jenson

Comment 22

[Paul Osman [:paulosman]]

(In reply to comment #21)
> Hi Paul,
> 
> But Moving into email directory or merging into index.php file. Can you
> please explain.
> 
> Thanks,
> Jenson

Hi Jenson, try to use the reply feature in Bugzilla, especially since there are two Paul's on this bug :-)

By moving the validation into contribute/email/index.php I'm suggesting two things: 1) that the validation should be done server-side and 2) that it should be in the same place where other form validation is currently being done. 

As David mentioned, the current validation workflow is not very friendly. Ideally, input should be validated in one place (server-side) and if the input fails validation, the user should be redirected back to the form with a friendly error message. Does that make sense?

Comment 23

[Jenson M John]

(In reply to comment #22)
> (In reply to comment #21)
> > Hi Paul,
> > 
> > But Moving into email directory or merging into index.php file. Can you
> > please explain.
> > 
> > Thanks,
> > Jenson
> 
> Hi Jenson, try to use the reply feature in Bugzilla, especially since there
> are two Paul's on this bug :-)
> 
> By moving the validation into contribute/email/index.php I'm suggesting two
> things: 1) that the validation should be done server-side and 2) that it
> should be in the same place where other form validation is currently being
> done. 
> 
> As David mentioned, the current validation workflow is not very friendly.
> Ideally, input should be validated in one place (server-side) and if the
> input fails validation, the user should be redirected back to the form with
> a friendly error message. Does that make sense?

Yes. Thanks Paul.

Comment 24

[Steven Garrity [:sgarrity]]

This was fixed over in Bug 523403.