Recaptcha in contact pages

Support
21

Oh man, shoot…can you possibly still edit this last post of yours, to add in new stuff? I will make a topic about this issue

Single ticks are like this ` and for me at least its the button to the left of the number one key. I can’t do three in a row, here’s 1 in code

Three ticks above, then below, here is one single tick ===> `

This page should be the best for checking this code. You may want to make a new one just with this code, to see if you can get it to work, with a blank template

https://github.com/sepiariver/recaptchav2

This sample should work right out of the box

<h2>Form Test 1</h2>
[[!FormIt?
    &hooks=`recaptchav3,FormItSaveForm`
    &validate=`testing1:required:minLength=^12^`
    &formName=`form-test-1`
    &recaptchav3.token_key=`token-1`
    &recaptchav3.action_key=`action-1`
    &recaptchav3.threshold=`0.9`
    &submitVar=`submit1`
]]

<form action="[[~[[*id]]? &scheme=`full`]]" method="POST">
    [[!+fi.error.testing1]]
    <input type="text" name="testing1" value="[[!+fi.testing1]]">
    <input type="submit" name="submit1" value="submit">
    [[!recaptchav3_render?
        &tpl=`recaptchav3_html`
        &token_key=`token-1`
        &action_key=`action-1`
    ]]
    [[!+fi.error.recaptchav3_error]]
</form>

The form would be saved as FormItSaveForm and called as [[!FormItSaveForm]]

The issue we are still having is why it seems to have recaptcha in hooks, but no output.

1 Like
22

This example uses recaptchav3. Parameters might still apply, but just to avoid confusions this might not be the right example…

2 Likes
23

Good point and thanks for your expertise here, it seems to be the same extra

From the doc there, up top

You must generate API keys for your domain here: https://www.google.com/recaptcha/admin and enter them into the System Settings before you can use ReCaptchaV2. IMPORTANT : You must choose V2 or V3 in the ReCaptcha admin, when generating your client keys. You can use both V2 and V3 on a single MODX install with this Extra— there are separate system settings for V2 and V3 .

And…let’s check system settings…filling these in might help

recapc
recapc1575×573 37.8 KB

Also! It looks like its called with either a 2 or a 3, your code has no number

Also, do you have a snippet named snippetName?

$o_form->setHooks(array('spam','recaptcha','email','redirect'));

and 

function FormItBuilder_BasicExample(modX &$modx, $snippetName)
1 Like
24

Ok looking further, so FormitBuilder seems to be depreciated, that’s a problem. We can’t be sure that this will ever work with depreciated tools. Google has probably updated things since.

Here’s the site, the new one is called

JsonFormBuilder

Its quite similar, you can use php or json to make the form.

This is an Extra that needs installation. Unfortunately it does not seem to handle recaptcha at all. I hope it can work with the recaptcha2 extra, but I didn’t find anything about that online.

So, perhaps what is happening is you are using not Recaptcha2 Extra, but rather you are trying to call using FormitBuilder.

Now pls understand that I don’t always get things right. Let’s slow down just a bit and let others weigh in.

My thinking is to make a new form with the new formbuilder, just like your old one, but not sure if recaptcha will work with it though. It might be necessary to use another form builder, which people can use formit or SPform is easy and quick…

Indeed, it might be worth considering to just go with a new contact form extra entirely, BobRay makes a great easy solution https://modx.com/extras/package/spform

1 Like
25

So after taking a closer look into your code, there’s a few things:

  1. First I suggest cleaning up your pre-code TV and implement the code directly in the template. As this is not a value which needs to change on a regular basis, this also helps with the overall performance as TVs are not really meant to be used just as simple placeholders.
  2. You are using the FormItBuilder Extra, so if you want to stick with that, I suggest following @markh’s advice from above. Your form is quite simple though, so if you are confident with a little HTML and CSS coding, I suggest building the form by yourself.

As an example, here is my code for my contact form:

Show Code 
[[!FormIt?
   &hooks=`recaptchav2,spam,email`
   &emailTpl=`email`
   &emailTo=`email@email.com`
   &emailUseFieldForSubject=`1`
   &successMessage=`Message sent!`
   &validate=`nospam:blank,
      name:required,
      email:email:required,
      subject:required,
      text:required:stripTags`
]]



[[!+fi.successMessage:notempty=`<p class="success">[[+fi.successMessage]]</p>`]]

<form action="[[~[[*id]]]]" method="post" id="contact" class="alt">
   <input type="hidden" name="nospam" value="" />
        
   <label for="name"><span class="error">[[!+fi.error.name]]</span></label>
    <input type="text" name="name" id="name" value="[[!+fi.name]]" placeholder="Name" />
        
    <label for="email"><span class="error">[[!+fi.error.email]]</span></label>
    <input type="text" name="email" id="email" value="[[!+fi.email]]" placeholder="E-Mail" />
        
    <label for="subject"><span class="error">[[!+fi.error.subject]]</span></label>
    <input type="text" name="subject" id="subject" value="[[!+fi.subject]]" placeholder="Subject" />
       
   <label for="text"><span class="error">[[!+fi.error.text]]</span></label>
   <textarea name="text" id="text" cols="55" rows="7" value="[[!+fi.text]]" placeholder="Your Message">[[!+fi.text]]</textarea>
     
    [[!recaptchav2_render?
       &tpl=`recaptchav2_invisible_html`
       &form_id=`contact`
    ]]
</form>

// recaptchav2_invisible_html Chunk:

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=[[++cultureKey]]"></script>
<script>function recaptchaV2SubmitForm(response){return new Promise(function(){document.getElementById('[[+form_id]]').submit();})}</script>
<ul class="actions">
	<li><input type="submit" class="g-recaptcha" name="login" data-sitekey="[[+site_key]]" data-callback="recaptchaV2SubmitForm" value="Sent Message">
	</li>
</ul>

In general I would suggest trying to simplify everything as much as possible (or maybe setup a testing resource to not interfere with the live site) and try to build up a new form instead of wasting hours trying to fix probably outdated code.

2 Likes
26

I think I may try and make a new, default contact form using the newer JSON but saving and calling the HTML elements.
Thank you again for your help. :slight_smile:

Oh! It worked… Seems I am out of Coventry :wink: Thank you!
It’s late here and been at this for some time, (3 weeks and over 12 hours today alone) so have upgraded to what was recommended and see what I can do from there. -Thank you to @nuan88 & @vibedesign so far who have been really helpful in their responses and thank you too to @markh for cleaning up my coded text :smiley:
Will give it a go and see what I can do.
It’s the first time I have ever used this and it’s a bit overwhelming at first but am sure it’s easier over time.
Our issue is probably deprecated forms et al.

3 Likes
28

Great! Wow good news.

1 Like
29

Indeed I can reply again - thank you for your help & input @nuan88
Okay so I have installed the latest version, installed JsonFormBuilder - am reading the docs and have already started editing some of the templates I have here.
I’ve installed in a local server while locked out, and have a db backup so it’s a true replica. Am happy with HTML/CSS etc and some PHP. Not brilliant with it but can understand a basic amount.
The rest of the tools and the logic, I can pretty much get my head around quite quickly.

What fails me on this is the calls are the same as highlighted. I know it’s there because if I mess around with some of the code I get "The reCAPTCHA wasn’t entered correctly. Go back and try it again. "
So I know that me changing it has an effect, it’s just what isn’t working and why. Again, deprecation & markup will no doubt have an effect.
Bearing in mind of course, the site which I had taken on, is easily 6+ years out of date! :scream:

30

Yeah chasing down a problem is always tough, especially on a whole site someone else setup.

I am concerned about recaptcha with that Json builder. I did not get one hit for recaptcha on that site or just using the name of the builder. It seems like a feature that hasn’t been added yet…

31

You’re telling me! Imagine doing it on a system I’ve never used before too. Sorry ModX. I feel bad, but I’d never heard of this before either… (Yes have read threads about how it’s advertised etc so … maybe some insights into that?)

Tbh I am still struggling.
Not one to quit but I am now slowly starting to get confused with added/not added and so forth.
The funny thing is, using the existing setup and adding this code from @vibedesign adds a login checkbox, so obviously something is working while the rest isn’t;

32

To use his code, make sure you have formit extra installed, and the recaptcha2 extra as well

The core is kept apart from a lot of ‘basic’ functionality, for security and continuity. Some basic user capabilities exist, but the core is ‘just’ the core. Most ‘core’ functionality are extras, even basic stuff

Modx seems mostly marketed towards developers. Its got a secure framework unlike wordpress.

This forum is part of an attempt to make access easier for all types of users, and make it easier for new users to get up and running. Modx can do so many things, that figuring out how to do something can be a task ha

33

Yes, have both working here. I installed recaptcha add-on/plugin/mod which has V.2 and V.3 combined, and am using Formit Extra.
Oddly it pulled a login field which was uneditable and didn’t work. But had a click response.
So something happened, but not sure what exactly.

On that note, I am thinking of still making new templates, new pages and adding things from there (including the HTML elements set up) and seeing what happens.
It must be purely from having out of date coding in there. It’s all I can think of.
I’ll make a new page & template and see if I can pull it all from that.

34

Yes pls start fresh, this code should work. If you are ok with your html, then take for example the site’s standard template, copy it, cut out the [[*contents]] tag and put your call right in the template along with the form html. Then you’ve got basic styling. Attach the template to an empty resource and view the resource.

Although for testing just make the roughest of html structures, just in case the regular template has something conflicting, doesn’t seem likely but…if it works in the simple one, its likely to work with the real one.

1 Like
35

Thank you.
It’s almost midnight here but will be back on it again in a few hours.
I can’t work out why some snippets (as in code snippets) will work while others don’t. It’s very perplexing. Almost like a total language failure.
Anyway, fresh eyes tomorrow. Will definitely take you up on the rest tomorrow and see what happens. Will drop all but the basic of HTML to see what is going on.
Thank you so much for all of your help so far.

2 Likes
36

The login field comes from the default recaptchav2_invisible_html chunk. Have you created this for your own yet? Like in my code example above, I’ve deleted the login part (which is the last line in the default chunk).

// I removed this part in my chunk:

<!-- <button type="submit" class="g-recaptcha" name="login" data-sitekey="[[+site_key]]" data-callback="recaptchaV2SubmitForm">Login</button> -->
1 Like
37

Ah great mystery solved. And proper form is to change the name of that chunk and in the call, so that it won’t get overwritten later. But, with Modx, that would happen pretty rarely

@vibedesign great help

@Squashed_Tomato well with the formitbuilder call, we know that’s old, so while the problem could be simple, we would never know really. And it could break again tomorrow. Extras in Modx can last a very long time, so when they are depreciated then I think its truly over lol.

You’ll get there!

38

Right… am with you!
Okay so a chunk is the same as the same as a basic code macro yes?
Then no, I literally (lazily) copied your text into some basic page & templates I made to see what happened. Think I need to just do some more homework and see what’s up here.

Something so simple, adding a recaptcha, has turned into such a time consuming, massive, and page upon page search request.
Sheesh…
That said, I can’t justify £100 just to add ReCaptcha which the devs are requesting to help. I know we all need to make £s but it’s not justifiable for something as basic as anti-spam. (Don’t shoot me, am the messenger)

Will come at this again later tomorrow morning to see what I have missed and what needs adding.
Thanks again for the really helpful support… :slight_smile:

39

Well, again you’ve upgraded, because things were a bit broken. For an experienced developer, this is certainly a few hours work max.

For @vibedesign s code, first paste it into a simple html structure, then if it works paste it as I said into the content section of a copied standard website template from the site. Then you can style more if needed, it will match the site, and you can implement it. Then, if you want to get fancy, take that same piece of code, put it into a chunk, and call the chunk in the template.

The behavior will be exactly the same.

Chunks are pieces of code, I guess any code can go in there. They are handy for example to hold your header, so that you can go right to that code really easily, and change it on multiple templates.

Like contact details could be in chunks, easy to get at and change, and also you can deliver the chunks you want, might have a quick location checker and deliver local info. Or head contents, which need to be updated sitewide. Keep in mind some sites will have multiple banners, footers, everything

Snippets are more the tools, its easy to make a snippet to get all the products and sort or search them for something, or users or whatever data you want.

1 Like
40

I’m late to this party, but have a couple of comments:

  1. The UpgradeMODX extra makes it a lot easier and more reliable to upgrade MODX.

  2. The SPForm extra installs a spam-proof contact form and is quite simple to install (it usually works out of the box). I use it at Bob’s Guides and get no spam at all without using any form of Captcha. It has a number of spam-proofing options (including traditional Captcha with the math option).

2 Likes
41

To be a little more precise, chunks are used for general HTML code (and scripts, etc.). Like @nuan88 mentioned you want to use those for elements on your site which occur in several templates (like a navigation, head-section, footer, etc.) so you have one place to update them on all sites.

Snippets are used the same way, but are made for processing PHP code.

1 Like