TFmail Contact Form with reCAPTCHA v2 and Perl
I thought I would share my experience here with others. I am evolving my own website and also create websites for others. I like to have a contact form and have endured SPAM in the past. I really liked the new Version 2 of Google's reCAPTCHA, so tried to integrate that. I also have preference for a form that is handled by my own web sever -- not one that is outsourced to a 3rd party like Jotform or another. Controlling everything on your own server seems like it gives you a lot more control. I am still working out a few bugs.
My experience in the past was with the old "BNBForm" code, which was in Perl. I decided to try TFMail package which is also in Perl. I like a scripting language so one can modify the results. I am not a Perl programmer but know how to teach myself with some old experience in many other languages.
Accomplishments:
==============
(1) Got TFMail going on my own form. I coded a form by hand in HTML. Using a generator and modifying it would be just as good... or better.
It is fairly powerful and flexible, once all the peculiarities are worked out with your server.
(2) Got Google reCAPTCHA working on the form in a placeholder in Xara and using very simple server-side Perl programming.
There is almost no documentation on the Version 2 reCAPTCHA for Perl. I had to scrounge all over the web and teach myself a little Perl. There is a Captcha::reCAPTCHA:V2 library out there (V2.pm) but it didn't work for me and it is way more than I needed since I was handling the form in HTML as Google seems to suggest is easiest.
(3) I modified TFmail to handle capturing an error from no reCAPTCHA on a submitted form.
This uses a new template in TFmail to explain to the user that they should push the back button and do it again.
I would be happy to share my code changes with anyone if they want to do this.
Issues Remaining:
=============
(1) I have not yet gotten TFmail to send a confirmation notice to the user if they entered their email address. Not sure why yet. TFmail authors were adamant that this should not be done because it would allow others to SPAM people via your email server. I think this almost goes away with reCAPTCHA, but I think the authors may be causing this issue with too much caution. Need to learn more Perl or get help from one of you.
(2) Two Xara variants are not displaying the reCAPTCHA box on the form.
I am not sure why this is. The first website I am trying this on has three variants. I have HTML/Javascript statement for the code in the head of the placeholder. I also have the form showing in all variants via placeholder body code. The reCAPTCHA shows and works on the main variant, but does not show on the other two variants -- although the form and submit button show on those two variants.
I speculated that Google would only serve one, but when I reload in the errant variants, the reCAPTCHA does not show there -- only on the main. I read this forum in a few places and it seems that <iframe> export on Jotforms solved this similar problem on other sites. I have since forgotten what <iframe> is, but will look it up and give it a try.
If anyone has solutions to the above two issues or wants to see the whole Perl code for the reCAPTCHA v2, let me know here.
Re: TFmail Contact Form with reCAPTCHA v2 and Perl
I have an update about the second issue... reCAPTCHA not displaying in the placeholder on the two smaller variants out of three.
I performed two experiments.
(A) Tried a fresh browser that was very narrow to bring up the mobile variant immediately, no cookies, etc. When I did that no reCAPTCHA appeared. Widening the display it only came up under the main widest variant. So, it's not the variant that comes up first that gets the reCAPTCHA, it is likely the main variant.
(B) I eliminated the reCAPTCHA and web form from just the main variant without altering the two smaller variants. Upon loading the web page, the middle variant got the reCAPTCHA, not the smaller one. Therefore this is not an issue with the middle variant being able to display the reCAPTCHA.
This appears to be an incompatibility with Google serving up the reCAPTCHA box and Xara's variants. Xara seems to deliver the reCAPTCHA box to only the main or widest variant -- even if it is not being displayed. It is not re-rendered or called upon the browser width dynamically changing. Furthermore, the initial browser width does not matter -- XARA seems to deliver the reCAPTCHA box to the widest variant or perhaps some other order in how the variants are stored.
It would seem that Xara needs to both re-render the variant page upon dynamic changes and make sure external content is delivered to the correct variant. Xara, what do you have to say about this? Thanks!
Re: TFmail Contact Form with reCAPTCHA v2 and Perl
To continue "dancing with myself" I thought of another experiment. I obtained a second Google reCATPCHA V2 key pair. You can get more than one key pair from Google. I placed different public keys in the main and medium variants of my website. I thought it might eliminate one potential problem -- Google serving out more than one reCAPTCHA widget near the same time with the same public key. Worth a try.
Didn't work. Same behavior. Only the main variant displays a box. The medium variant didn't display the reCATPCHA box/widget even if I reloaded the page.
This makes me think there is some issue with Xara.
If this had worked, it would have been a pain because then I would have to try multiple keys on my server-side handling of the second response from Google. That might not have even worked because of some limitation with Google -- dunno.
Re: TFmail Contact Form with reCAPTCHA v2 and Perl
Interesting to see a fellow New Mexican working this out.
Maybe one of our more recaptcha savvy members will check in with a suggestion.
Re: TFmail Contact Form with reCAPTCHA v2 and Perl
Quote:
Originally Posted by
gwpriester
Interesting to see a fellow New Mexican working this out.
Maybe one of our more recaptcha savvy members will check in with a suggestion.
Yes-- you and I know that New Mexico exists because we are. It's between Arizona and Texas!
Stereograms? I used to have a program that I kept working forever until Windows 7 or 10 called "Stare-EO Workshop" and made my own stereograms (not that sophisticated). Wrote NE Thing Enterprises and found out they no longer did this. Didn't realize another company did it!
Re: TFmail Contact Form with reCAPTCHA v2 and Perl
I heard back from Xara that they have received your ticket and will have a better idea what is going on when they see the script.
Nobody knows about New Mexico because the weather person always stands in front of the state on the weather map and points to Arizona and California, and turns and points to Texas and the southern states. :O
Re: TFmail Contact Form with reCAPTCHA v2 and Perl
Thanks gwpriester... I sent them the script a day or two ago in a file because it was apparently stripped out of an email with that information originally. An alternative approach is an example that does work from someone else using a POST form and the Google javascript statements available on their reCAPTCHA v2 web pages.
Re: TFmail Contact Form with reCAPTCHA v2 and Perl
FYI, just found a relevant link to a thread on the forum with a similar problem:
http://www.talkgraphics.com/showthre...aceholder-html
Re: TFmail Contact Form with reCAPTCHA v2 and Perl
I'd really like to see a solution from Xara on this issue -- forms differences and missing items in variants with use of a placeholder; however, to document it, I worked on a different solution inspired by the post in the link in my last comment above.
The solution is this so far:
(1) For each placeholder use <iframe> construct to reference the form code. This apparently had worked for jotforms and others, so why not give it a shot. Note that the placeholder only has body code, not head code. The head code now goes into (2) below.
Code:
<iframe src="http://yourdomain.com/Form1.htm" width="665" height ="565" seamless scrolling="no"></iframe>
The width and height options can be different for each variant and are necessary so the iframe is not to small. Attribute scrolling="no" removes the scroll handles. Attribute "seamless" would be nice if it worked -- removing the whole frame around an iframe, but it doesn't work on all browsers. I read boarder="0" does not work with HTML5, but you might try to add that.
(2) Place the entire code of the form within a htm/html file, in this case named form1.htm. You could easily have form1, form2, and form3.htm files for each variant if you wanted to work on widths of things. This htm file now includes the header javascript from Google and all the formatting you need to make the table. This is an abbreviated example.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
...whatever code you needed before this
<form method="post"
action="/cgi-bin/TFmail.cgi">
<input type="hidden" name="_config" value="name of your trc file in TFmail" />
<input name="first_name" size="25"
maxlength="50">
<td><input name="last_name" size="25"
maxlength="50">
... etc for all your form entries. Formatting as needed as well.
<div class="g-recaptcha" data-theme="light" data-sitekey="your Google Public Key" style="transform:scale(1.00);-webkit-transform:scale(1.00);transform-origin:0 0;-webkit-transform-origin:0 0;"></div><br>
<div style="text-align: left;"><input
value="Send Now!" type="submit">
</div>
</form>
(2) Modify your error codes if needed, to realize they are in a frame. The only modification are links. I no links, then no modification. The missing fields message should be generated through TFmail missing.trt template:
Code:
%% NMS html template file %%
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Missing Fields - Companyname Contact Us</title>
</head>
<body>
<h1>Oops! There were missing fields.</h1>
<p>
The following fields were left blank in your submission form.
We need them to be able to contact you. We could use your
first and last name, comments, and a means to contact you!
</p>
<ul>
{= FOREACH missing_field =}
<li>{= name =}</li>
{= END =}
</ul>
<p>
Please fill in at least these fields before
successfully submit the form.
</p>
<p>
Please use your back button to return to the form and
try again.
</p>
</body>
</html>
This would also be displayed in the iframe.
A missing reCAPTCHA is handled through the modified TFmail template nocaptcha.trt that mimics missing.trt. This requires some modification of the TFmail.pl/cgi file parameters and the code that checks the reCAPTCHA. It cannot be used with standard TFmail. I can provide the modified TFmail.
Code:
%% NMS html template file %%
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>No Captcha - Companyname Contact Us</title>
</head>
<body>
<h1>Oops! You forgot to enter the reCAPTCHA.</h1>
<p>
Before you press the "Send now!" button, you must click
on the "I'm not a robot" check box and complete any tasks
required there.
</p>
<p>
Please use your back button to return to the form and
try again.
</p>
</body>
</html>
The success message can be a redirect. if so, make sure the target="_parent" is used in the <a> link so it does not render your thank you message within the frame. If a TFmail success message is used, make sure any internal link there also uses target="_parent" as well. Do not echo all the parameters back to the user because the g-recaptcha-response parameter will also be echoed and it is a big ugly bunch of characters.
Here is an example trt file if a redirect is not used:
Code:
%% NMS html template file %%
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Thank You from Companyname</title>
</head>
<body>
<h1>Thank You from Companyname</h1>
<p>Thank you for submitting a contact request on {= date =}.
We will get back to you as soon as possible.
If you would like, you may also send an email or call. Please continue to browse our website.</p>
<p><a href="http://companyname.com" target="_parent">Return to Companyname</a>
</body>
</html>
This also displays in the iframe, but the link at the bottom redirects out of the iframe back to the parent. I am not sure if i prefer a redirect or the code rendering in the iframe.
Hopefully Xara will come up with a solution to all the variant issues with forms and scripts as well!
Re: TFmail Contact Form with reCAPTCHA v2 and Perl
To add more information, Xara user support commented that another solution is offered here:
http://stackoverflow.com/questions/1...-a-single-page
In particular, the second solution there is apparently successful and likely better than an IFRAME solution.
