0

In my WordPress Website, I am using Pirate Forms Plugin for showing a contact form on my Website. It works fine and everything is ok. However, I want to allow my users to be able to put a limited number of characters both in Subject and Message fields of my contact form.

There isn't an option in the plugin settings which can help me limit the number of characters when a user will submit the form.

Although, Pirate Forms Plugin is now owned by WPForms and no further maintenance support is provided to this plugin but due to my site requirements, I can't use another plugin.

I have tried adding a CSS class to those specific fields of the form and then applied some custom code for limiting down their characters limit, but the code is not working.

Here is the code that I have applied for it.

function wpf_char_limit_textbox() { ?> <script> document.addEventListener( "DOMContentLoaded", function( event ) { //$('.pirate-forms-fields-container form-control input').addClass('wpf-char-limit'); var maxLength = 1000; // set for how many characters var targetTextarea = document.querySelector( ".wpf-char-limit" ); var charsNotification = document.querySelector( ".wpf-char-limit .wpforms-field-description" ); targetTextarea.setAttribute( "maxlength", maxLength ); targetTextarea.addEventListener( "input", function() { var charsEntered = this.value.length; if( charsEntered >= maxLength ) { charsNotification.textContent = "*You have reached the " + maxLength + " characters limit"; } else { charsNotification.textContent = "*" + ( maxLength - charsEntered ) + " characters remaining"; } }); }); </script><?php } add_action( 'wpforms_wp_footer', 'wpf_char_limit_textbox' );

  • That looks reasonable at first glance. When you say it's not working do you mean it's just not applying the limit? Or the CSS properties too? Can you work out why, e.g. errors in your browser's JavaScript console? If you put console.log()s in that code do they get hit? – Rup Mar 27 at 10:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.