Jump to content
bfncs

Char counter for text/textarea fields

Recommended Posts

Hi there,

I just recently discovered ProcessWire and am still pretty exited about it and the ways it enables you to do anything. Thanks a lot to Ryan and everything who created it!

What I was missing (or just overlooking?) recently, was some kind of char counter for textual input fields. Just an (en-/disable-able) are that shows, how many chars have been typed in. If you have some char limit defined for the field, it should show you, how many chars are left. Just think of the twitter online interface for writing new tweets.

So, did I miss something here and this is already existing? If not, I think that this would make a nice addition to the backend modules. I'd give a try to develop it, if it doesn't exist, but since I'm quite new to the PW world, I haven't ever developed a module before and it will probably take some time.

Please just let me know what you think of it.

With kind regards,

Marc

Edit:

Thanks so Soma, there is some Code there already. While still rough around the edges, it's definitely usable: https://github.com/boundaryfunctions/TextareaCounter

  • Like 4

Share this post


Link to post
Share on other sites

Hi, and welcome to the forums!

Not exactly what you are asking, but there is a TinyMCE plugin for wordcount. To enable it in any TinyMCE field go to the edit field "input settings", and in "TinyMCE configuration options" add "wordcount" to the plugins list and "theme : advanced" and "mode : textareas" in two different lines to "Aditional TinyMCE settings"

  • Like 4

Share this post


Link to post
Share on other sites

Hello diogo,

thanks a lot for pointing this out, as I wasn't aware of it! This will definitely be useful for a lot of content editing.

Still, what I was thinking about were more the text-only fields without any WYSIWYG editor or any tags. I was thinking about adding the charcounter for the meta description field, to give the content editor some immediate feedback on how much chars where used. It would also be great to have a word counter (and maybe a comma-seperated items counter).

Also, I usually like to give the content editors as few as possible opportunities to make something wrong, avoiding WYSIWYG as much as possible. So even parts of the content may be written as plain text in the backend and all converting to beautiful HTML (if any) is done in the template. For me this has lead to much less errors and more stable sites. Still I would like to give the editors feedback on char count (and even better optional/additional word count).

Because I'm still new to ProcessWire and module development for it in particular, maybe someone can give some pointers on what would be the best route to make a module for this functionality. What would be the best place to hook in to inject the JS? Can I add this to the standard text/textarea Inputfield modules without problems (which would be the more elegant solution imho) or would it be better to use the original modules as a starting point and make my own module from there (which should require a lot less work)?

With kind regards,

Marc

Share this post


Link to post
Share on other sites

You would have to build a module that extends InputfieldTextarea, limits the amount of characters, and that calls the necessary javascript counter.To know how to do this, have a look at these two examples on github AceEditor and TinyMCE. Notice how the configuration fields are created with ___getConfigInputfields() on both of them. You will need it at least to set the limit on a per field basis.

  • Like 1

Share this post


Link to post
Share on other sites

Wow, this sounds perfect, thanks a lot!

I'll definitely give it a try and will come back here, if it works out. Might take some time though...

Share this post


Link to post
Share on other sites

Nice idea, I was also thinking about some time ago.

One way is to not extend the InputfieldTextarea, and make a new Inputfield type, but Hook into the necessary methods to extend the config and rendering.

Since this made me wonder how it would go, I gave it a try. It's a nice example showing how to archive it using hooks only. It will give you a extra Input setting "Max length" in the field setup. And a counter for all InputfieldTextarea (not tinymce fields) and add a attribute "data-maxlength" to the one that have a max length value. I had to use "maxchars" as the setting field name as there's already this attribute, but not used in the context of page edit.

The script js is also added via a hook, and is a basic example of the script that counts backward while typing. Since I was already that far it was easy to add, but you might want to modify it and add features if you like.

This took me roughly 30min, and little more to add the js. I think a year ago I wouldn't knew how and would have taken ages to figure out. But it grows on you after so many modules and insight. This module shows you some good practices and maybe helps understanding modules. If you have questions please bring them in.

Module code: https://gist.github.com/4252958

JScript code: https://gist.github.com/4252962

Put them in a folder /site/modules/TextAreaCounter/..

Install, enjoy.

Edit: just found an issue... will take a look again :D

  • Like 8

Share this post


Link to post
Share on other sites

Ok fixad tha issue, damn no off to some relaxing :D

  • Like 3

Share this post


Link to post
Share on other sites

Soma, this is so great, thanks a lot for your good (and amazingly quick!) work!

This works like a charm and the best thing is, that you can literally read through the code and grasp anything that is done there. Not that I would have been able to do it like this, especially not in that amount of time. This really shows how much thought was put into the PW API.

Are you going to submit this to the official module repo?

There's are still possibilities for improvement, like but not limited to:

  • apply to flat textfields as well,
  • making it count words, and
  • preventing the user from typing more than allowed in a more drastic way.

With your foundation, I will definitely be able to implement this. By the way, did I thank you already?

  • Like 3

Share this post


Link to post
Share on other sites

Feel free to take it and improve it. Make it your own whatever and be sure to submit it to modulers page. You're welcome. Glad if it helps people.

  • Like 4

Share this post


Link to post
Share on other sites

Hi,

just wanted to let you know, that I started another gist for this here:

https://gist.github.com/4258927

I added the word count thingy and some smaller tweaks, but I'm definitely going to add the rest (particularly proper documentation), when I find time for it.

Thanks, Soma, for kickstarting me on this!

Ah, and another question for everyone:

Would it be more elegant to integrate the functionality for plain text inputfields in this module or would you prefer to have it as a seperate one?

  • Like 4

Share this post


Link to post
Share on other sites

Greetings,

Well, what do you know. I was wondering about a counter for my textarea fields, and there it is.

THANK YOU SOMA FOR CREATING THIS!

I've not only installed it, but studied it. I like how clean this code is and how easy it is to understand what it does. That says a lot about Soma's ability to create modules, and also about ProcessWire's module-building system.

Has this been entered into the official ProcessWire module listing?

Thanks again,

Matthew

EDIT: Thank you boundaryfunctions for running further with this! I can do some documentation for this, if you need me to.

  • Like 1

Share this post


Link to post
Share on other sites

Hey Matthew,

you're welcome. Thanks for the feedback and you're right, most oft the credit goes to Soma. This isn't in the Moduls repo for now because I wanted to get some things right in the first place, but I hope it's going there soon.

I did some searching but didn't really solve this problem, so I hope someone can give me a pointer on this: where would I hook to do some custom validation for my input field (including error reporting)? Any help is very much appreciated.

  • Like 1

Share this post


Link to post
Share on other sites

Hello boundaryfunctions,

I installed your Github version (extension?) and it works great.

This is a terrific addition to the text and textarea fields. The only thing left is to figure out how to make it so a user cannot enter more than the character limit. I'm thinking a good way to do this is by not allowing any more characters to be entered once the limit is reached (rather than a validation error).

These snippets seem to have elements that can work for us:

http://www.yourinspi...ide-a-textarea/

http://unwrongest.com/projects/limit/

http://stackoverflow...rea-with-jquery

http://www.devcurry....n-textarea.html

http://www.scriptiny...xtarea-limiter/

http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/

This is definitely also a good way to get into PW module creation...

Thanks,

Matthew

Share this post


Link to post
Share on other sites

Hi Matthew,

thanks for testing and doing research! :)

The only thing left is to figure out how to make it so a user cannot enter more than the character limit. I'm thinking a good way to do this is by not allowing any more characters to be entered once the limit is reached (rather than a validation error).

I'll definitely add some means of limiting the input clientside, but I also want to validate this clientside. I know, that the inputfields should have to deal with thrusted content only, but still, I think it is a question of good coding style to validate everything serverside as well, just to be really sure.

I looked into other modules to see how they do it, and it looked to me, that all of them do their "validation" in Fieldtype::sanitizeValue() (apigen) and without throwing any errors. Is this really the proposed way to do this? This seems really strange to me, why is there no Fieldtype::validate()?

Even if this is the way to go: Fieldtype:sanitizeValue() isn't hookable, so how could I slip my own code into FieldtypeTextarea then?

Can someone please shed some light on this?

Edit: Since I think answers to these questions might prove helpful to others as well, I opened a new thread in the Module Development Forum, asking the question a little more generalized. You can find it here:

http://processwire.com/talk/topic/2365-validation-for-own-inputfieldfieldtype-modules/

  • Like 1

Share this post


Link to post
Share on other sites

Hi boundaryfunctions,

This topic has me thinking of validation in general.

Validation is such a crucial part of any CMS, but I wonder whether there are better practices than what has always been done before? For example, can we get away from the "receive-an-error-upon-form-submission" scenario? Using JQuery or HTML input restrictors might be better in many cases. With text/textarea character limits, I feel like an immediate response in the field (not allowing you to type more characters) is better than waiting until you submit the form. That way, you prevent situations where someone composes a long entry only to find out later that it must be cut.

I'm looking at your code and Soma's code and trying to figure out how to use the JS to disallow further characters after a certain point. As I said, I'm looking at this as a way to get a useful module, and also to document how to do modules in ProcessWire.

Thanks,

Matthew

Share this post


Link to post
Share on other sites

Hey Matthew,

I'm totally with you about the immediate-response-thing, that's absolutely something that has to be there. You already posted some links to jQuery plugins that do this yourself, they all work basically the same way: on every interaction with the input, check whether the limit was reached and if it was, cut away all characters beyond the limit. Since the rise of HTML5, there's the maxlength attribute, too.

While this is all nice and therefore should and will be used, client-side validation can never substitute server-side validation.

I know, that in the normal use scenario, you only have accredited users on the system that don't want to do anything nasty with it, but still:

  • you may always have a Javascript error somewhere else that prevents your validation code from execution,
  • Javascript may be switched off,
  • the maxlength attribute isn't supported in older browsers,
  • everything that can possibly go wrong will go wrong,
  • everything that can't go wrong will almost certainly go wrong, and
  • it would be nice if this would module could be used safely in all kinds of frontend forms, too (because it probably will the sooner or the later).

All of these are imho good reason to do server side validation, even if you don't expect the evil user.

  • Like 1

Share this post


Link to post
Share on other sites

Hi boundaryfunctions,

We are totally in alignment. We need...

1. The immediate-response thing for stopping innocent people from wriitng a novel only to find out afterwards that we only want 100 characters

2. The server-side validation to make sure the 100 characters are not evil

Just for the moment, I'm trying to integrate number 1 into the plugin under discussion.

I also leave open the possibility that PW has validation elements already available, and I just am not yet using them.

Thanks,

Matthew

  • Like 1

Share this post


Link to post
Share on other sites

Ah ok, I somehow got you wrong in that you wanted to point out that server-side validation wouldn't be necessary, please don't mind! ;)

Your work on No. 1 is very much appreciated. Maybe your or I or someone else should put it in a complete github repository...

Share this post


Link to post
Share on other sites

Hey boundaryfunctions,

As soon as I get it working properly I will definitely add it!

I'm trying to do two things:

1. Cut the entry off after the maximum characters

2. Make the "characters left" turn red when the user gets to < 10 characters remaining

The first one is really required. The second one is just a nicde touch, but again this is all about getting faster with ProcessWire as well as making a functional module.

Thanks,

Matthew

  • Like 1

Share this post


Link to post
Share on other sites

Hi everyone,

I just worked on this a little and added client- and server-side validation. It would be great to get some feedback on this, so if anyone has some time to do testing, please check it out here:

https://github.com/boundaryfunctions/TextareaCounter

If there are no crucial bugs coming up for you, I'm going to submit this to the module repo soon.

  • Like 1

Share this post


Link to post
Share on other sites

Hello Boundaryfunctions,

I replaced the old one with this, and a look at the code tells me this is definitely heading in the right direction!

Here's what I'm seeing:

1. When I enter text, the "Characters left:" counter does not update as I'm typing

2. If I type some text, then hit "save," the "Characters left:" number updates properly

3. If too many characters are entered, it deletes everything that was entered in that "session"

Let me know if I can be of any further help with this. I'm looking at your code and trying to get a handle on all that this is doing.

Thank you for your excellent work.

Matthew

Share this post


Link to post
Share on other sites

Hi Matthew,

thanks a lot for your quick feedback, this is very much appreciated!

Strange, so it looks like the JS isn't loaded/doesn't work, but it certainly does for me. How did you update the code? The name changed from "TextAreaCounter" to "TextareaCounter", so the folder has to be renamed to "TextareaCounter", too, just a quick guess that it might have to do with this.

If this doesn't help: can you check whether TextareaCounter.js is loaded and whether there are any JS exceptions in your browsers' console? If you find any error messages there, please just paste them in here.

With kind regards,

Marc

Share this post


Link to post
Share on other sites

Hello,

I pasted the new code over the old code, then realized it wasn't working in the back end. Then I tried to delete the old module from the back-end, but it was no longer recognized (i.e., it was listed in the modules but not actually functional). The admin message I see is this:

Can't uninstall module - Module is not already installed

I then deleted the folder on my server and re-created the folder with the new name, uploaded the new files, then looked for "new" modules with PW back end. It did not find it, but the "old" module was still listed.

So, I guess I have to try to clean this up first!

When I try to delete the module now, I keep getting the same "Can't uninstall" message.

No JS errors, and the "TextareaCounter.js" file is being loaded.

Thanks,

Matthew

EDIT: I successfully stopped the module from appearing in the module list by deleting it again from the server. But after re-creating the directory again and re-uploading the files, then asking to "find new modules" it appears in the modules list automatically without adding it. But if I click on the module name, then "submit" it, I get this error:

Unable to find ID for Module 'TextareaCounter'

This might have nothing to do with the module! But I'm reporting it. Trying to fix it now.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Juergen
      Hello @ all,
      I have created an inputfield with a configuration field in the backend where you can set a time format for every language (see screenshot below).

      As you can see both language values (default and German) have the default value(%R), but I have set different values, which were correctly stored in the DB (see screenshot below):

      As you can see the values are '%R' and '%r'.
      I have created the configuration inputfield like this:
      /** @var InputfieldText $f */ $languages = $this->wire('languages'); $f = $this->wire('modules')->get('InputfieldText'); $f->attr('name+id', 'timeformat'); $f->label = $this->_('Timeformat on frontend'); $f->initValue = '%R';//default value $f->attr('value', $this->timeformat ? $this->timeformat : '%R'); $this->message($this->get('timesformat')); if($languages) { $f->useLanguages = true; foreach($languages as $language) { if($language->isDefault()) continue; $f->set("value$language", (string) $this->get("timeformat$language->id")); } } $f->inputType = 'text'; $f->description = $this->_('Please enter the time format that the times should appear on the frontend in strftime format.'); $f->notes = sprintf($this->_('For example shows the time as 08:00, as 08:00 AM. You can find more examples at %s.'), '<a href="https://www.php.net/manual/de/function.strftime.php">https://www.php.net/manual/de/function.strftime.php</a>'); $f->columnWidth = 100; The important part here is:
      if($languages) { $f->useLanguages = true; foreach($languages as $language) { if($language->isDefault()) continue; $f->set("value$language", (string) $this->get("timeformat$language->id")); } } I have borrowed the code from the DateTimeInputfield (https://github.com/processwire/processwire/blob/master/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.module), but the field values will be always populated with the default value ('%R').
      Are I am missing something? Does anyone has experience with multilanguage fields and could help me out?
      Thanks in advance.
    • By Juergen
      Hello @ all,
      I am creating a new inputfield/fieldtype to store opening hours, but I am struggeling to save values from multiple dynamic created inputfields in 1 column of the database.
      Scenario:
      The user can enter one or more opening times per day in a UI.
      Fe:
      Monday open from 08:00 to 12:00 and from 14:00 to 17:00 Tuesday open from 08:00 to 12:00 and from 14:00 to 19:00 and so on
      Via a little JavaScript you can add as much opening times as you need per day - the additional inputfield will be created dynamically.
      After form submission all the values are in the POST array -> this works (see example below):
      ProcessWire\WireInputData Object ( [openinghours_mo-0-start] => 09:00 [openinghours_mo-0-finish] => 13:00 [openinghours_mo-1-start] => 14:00 [openinghours_mo-1-finish] => 18:00 [openinghours_mo-2-start] => 21:00 [openinghours_mo-2-finish] => 23:00 [openinghours_tu-0-start] => 09:00 [openinghours_tu-0-finish] => 13:00 [openinghours_tu-1-start] => 14:00 [openinghours_tu-1-finish] => 18:00 [openinghours_we-0-start] => 09:00 [openinghours_we-0-finish] => 13:00 [openinghours_we-1-start] => 14:00 [openinghours_we-1-finish] => 18:00 [openinghours_th-0-start] => 09:00 [openinghours_th-0-finish] => 13:00 [openinghours_th-1-start] => 14:00 [openinghours_th-1-finish] => 18:00 [openinghours_fr-0-start] => 09:00 [openinghours_fr-0-finish] => 13:00 [openinghours_fr-1-start] => 14:00 [openinghours_fr-1-finish] => 18:00 [openinghours_sa-0-start] => [openinghours_sa-0-finish] => [openinghours_so-0-start] => [openinghours_so-0-finish] => ) The property name is always the name attribute of the field 😉 . If the property is empty means closed on that day.
      Now I need to combine all those values into 1 array (or json array) and store it in the database in 1 column called 'hours' in my case (see screenshot below):

      In my ___processInput(WireInputData $input) method I have tried to make it work like this:
      public function ___processInput(WireInputData $input): self { $name = $this->attr('name'); $value = $this->attr('value'); //input object includes always every input on the page, so lets filter out only inputs from this field //we need to do this, because the number of values is variable - so extract only values that starts with $name.'_' $nameAttributes = []; foreach($input as $key=>$value){ if(substr($key, 0, strlen($name.'_')) === $name.'_'){ $nameAttributes[$key] = $value; } } // loop through all inputfields of this fieldtype $time_values = []; foreach($nameAttributes as $nameAttr => $value) { $time_values[$nameAttr] = $value; } } //save it in the database $input->set('hours', serialize($time_values)); return $this; } The only important part of this code is the last part with the serialize function.
      After saving it will create a record in the database, but the value is always NULL (default value) (see below).

      Checking $time_values returns all the values, but printing out "$this" shows me that the property "hours" inside the Openinghours object is empty (see below) - so the mistake must be there, but I dont know where?!?!?!?
      [title] => Home [openinghours] => ProcessWire\OpeningHours Object ( [data] => Array ( [hours] => ) ) If I check the sleepValue() method or the sanitizeValue() - they are also empty. So it seems that the values will not reach these methods. I havent found a clear documentation of whats going on behind the saving process of an inputfield.
      As far as I know the saving process starts with the form submission. The values are in the POST array and will be processed by the processInput() method. Before they will be saved in the database they will be sanitized by the sanitizeValue() mehtod and afterwards they will be prepared for storage in the sleepValue() method.  The last step is the storage itself.
      Has someone an idea what is missing by storing values from multiple fields into 1 database column or has someone a working example of such a scenario on github to help me out.
      A clear explanation of the storage process will be also helpful.
      Thanks and best regards
    • By Juergen
      Hello @ all!
      I want to share a simple fieldtype and inputfield to store address data with you.
      I have created this inputfield for learning purposes and it has no fancy functionality. It is simply for storing address data such as street, number, postalcode and so on in one table. As an addition you can store latitude and longitude too, so you can use them in maps.
      Here is a screenshot of what it looks like:

      You can select which fields are mandatory and you can choose if the inputs for longitude and latitude should be displayed. These settings can be configured in the field configuration.
      If you find this inputfield useful you can download it at https://github.com/juergenweb/FieldtypeSimpleAddress
      There you will find a detailed explanation. If you have an idea of an usefull feature that can be added or you have detected a bug, please report it in my github account.
       
    • By MarkE
      Please note that the updated version of this script and any other associated info is now at https://github.com/MetaTunes/Form-update
      I had a need to interactively update the page choices in a multi-choice page select field. I chose to do this with a general-purpose piece of jQuery. By combining it with a InputfieldPage::getSelectablePages hook, you can get the trigger field to alter the selectable pages interactively.  I have also found this to be useful in a number of other situations - e.g. updating a RuntimeMarkup field for changes on a page. There may be more elegant ways of achieving this (I'm open to suggestions), but in case it is useful to others, I'll post it here. Hopefully the comments in the script are self-explanatory and describe how to use it. Note that there are several console.log statements to help with debugging, which you can remove once happy with its operation.
      Happy to answer any questions (if I can 😉 ). Also, if anyone can explain how to get it working fully with checbox/toggle ad radio buttons, I would be grateful.
      /* Script to refresh a form content when an element gets changed To work across all admin pages, this script needs to be loaded in admin.php – add the line $config->scripts->add($config->urls->templates . "scripts/form-update.js"); before the final require in templates/admin.php. Typical use is to modify other elements based on a select drop-down change The trigger element can have the following data attributes assigned to it (typically set these with $myInputfield->attr() in a module or hook): * data-action="form-update" : Required to run the script. * data-update-target="#myid1" : Required - the element to change. Note that this should not be the whole form, otherwise .find(target) will not find it. * data-confirm="Some confirmation text": Optional - if you want to show a confirmation before the update, this holds the text to display. If absent, there will be no confirmation dialogue. If the user chooses ‘cancel’, the script will revert the change and terminate. * data-alert="Some alert text": Optional – if you want to warn the user that the update cannot happen for some reason (the script will then revert the change and terminate). * data-cache="#myid2" : Optional - if you want to cache the (changed) value, this element stores it. * data-cache-prefix="Some prefix string" : Optional (requires data-cache) - a prefix to prepend the value stored in the cache This currently works with the following trigger elements: * select options * select page (single and multiple) * page list select (single and multiple) * asm select * page autocomplete (but note that data attributes must be set in the wrapper element - e.g. $myInputfield->wrapAttr() ) * checkboxes (set attributes in wrapper as above) but not with: * toggle * checkbox * radio buttons (These partly work - the attributes need to be in the wrapper -, but doesn't work completely as wrapper 'value' attribute is not updated by PW (always 0) ) NOTE: If you are using this with other js scripts (e.g. in a module) that listen for events in the target, you must use event delegation (e.g. $(document).on("change","#myid", function(){}); NOT $("#myid").onchange(function(){}); ) because #myid is dynamic if it is inside the target) */ $(document).on('focusin', '[data-action="form-update"]', function(){ // get the value before the element is changed console.log("Saving value " + $(this).val()); $(this).data('val', $(this).val()); }).on('change','[data-action="form-update"]', function(event){ var prev = $(this).data('val'); var current = $(this).val(); console.log("Prev value " + prev); console.log("New value " + current); // if trigger element has data-confirm attribute, confirm or revert and exit var confirmText = $(this).data('confirm'); if (confirmText) { if (!confirm(confirmText)) { $(this).val(prev); return; } } // if trigger element has data-alert attribute, show alert and exit var alertText = $(this).data('alert'); if (alertText) { alert(alertText); $(this).val(prev); return; } // cache the value before proceeding (if data-cache set) var cache = $(this).data('cache'); var cachePrefix = ($(this).data('cache-prefix')) ? $(this).data('cache-prefix') : ''; $(cache).val(cachePrefix + current); var $form = $(this).closest('form'); var target = $(this).data('update-target'); console.log("Target is " + target); var method = $form.attr('method'); var action = $form.attr('action'); var data = $form.serialize(); var encodedName; // .serialize() will omit select elements that do not have a 'null' option (e.g. asm select, page list select) // or checkboxes with nothing selected // so find them and add empty parameters to the data string, otherwise the page field will not be updated $($form.find('select, input').each(function(index){ console.log('Select element no. ' + index + ' with name ' + $(this).attr("name") + ' has serialize = ' + $(this).serialize()); encodedName = encodeURI($(this).attr("name")) if (data.search(encodedName) === -1) { data += ('&' + encodeURI($(this).attr("name")) + '='); } })); console.log("Submitted data: " + data); if (!method) method = 'get'; if (!action) action = window.location.href; // If you want to fade the affected inputfields then assign the loading class to their wrappers with method wrapClass(loading) $(target).find('.loading').css({ display: 'block', opacity: 0.2 }).animate({ opacity: 1 }, 5000); // then send your request $.ajax(action, { type: method, // type used, not method, for older versions of jquery data: data, // you can also add an error handler here if required, in case the server returns an error on the request success: function (data) { // Initial ajax just returns an array with message. Need to GET the form data. $.ajax(window.location.href, { type: 'GET', cache: false, success: function (data) { // then just take the target, and replace it with the target div from the returned data console.log("Returned data: " + data); console.log("Updating html with: " + $(data).find(target).html()); $(target).html($(data).find(target).html()); } }); } }); });  
    • By MoritzLost
      This module allows you to integrate hCaptcha bot / spam protection into ProcessWire forms. hCaptcha is a great alternative to Google ReCaptcha, especially if you are in the EU and need to comply with privacy regulations.

      The development of this module is sponsored by schwarzdesign.
      The module is built as an Inputfield, allowing you to integrate it into any ProcessWire form you want. It's primarily intended for frontend forms and can be added to Form Builder forms for automatic spam protection. There's a step-by-step guide for adding the hCaptcha widget to Form Builder forms in the README, as well as instructions for API usage.
      Features
      Inputfield that displays an hCaptcha widget in ProcessWire forms. The inputfield verifies the hCaptcha response upon submission, and adds a field error if it is invalid. All hCaptcha configuration options for the widget (theme, display size etc) can be changed through the inputfield configuration, as well as programmatically. hCaptcha script options can be changed through a hook. Error messages can be translated through ProcessWire's site translations. hCaptcha secret keys and site-keys can be set for each individual inputfield or globally in your config.php. Error codes and failures are logged to help you find configuration errors. Please check the README for setup instructions.
      Links
      Github Repository and documentation InputfieldHCaptcha in the module directory (pending approval) Screenshots (configuration)

      Screenshots (hCaptcha widget)

       
       

       
×
×
  • Create New...