Yesterday, I was charged with the task of validating a simple HTML form in WordPress. I needed to make sure certain text input fields and a drop-down box contained information before the form was submitted. Surprisingly, WordPress seems to make this a bit difficult.
Here is my solution:
I used Marc Grabanski’s “Clean Form Validation” script. I did the following:
- Downloaded cleanValidator.js from Marc’s website.
- Added this code to my header:
<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/cleanValidator.js”></script>
- Added this code after the “</form>” tag in my WordPress template file:
<script type=”text/javascript”>
cleanValidator.init({
formId: ‘example’,
inputColors: [‘#EDEDED’, ‘#FFFFFF’],
errorColors: [‘#FFFF99’, ‘#CF3339’],
isRequired: [‘first_name’, ‘last_name’, ’email’,’phone’, ‘company’],
isEmail: [’email’]
});
</script> - Added “id=example” to the form tag:
<form id=example action=…. - That’s it!
I hope this helps you to create a beautifully-simple validated form in WordPress!
3 Comments
From Toby’s Blog
- WordPress Hacked? Here’s Your Recovery GuideWordPress hacked? Stay calm and follow this step-by-step guide to recover your site. Learn the signs, recovery steps, and how to secure your site for the future.
- WordPress Maintenance Checklist: Keep Your Site Running SmoothlyDiscover the essential tasks for effective WordPress maintenance and ensure your website runs smoothly and securely with our comprehensive guide.
- Why We Don’t Automate Our WordPress Hosting BusinessThere are some great platforms out there to automate your website hosting biz: But we don’t use any of them. Here’s why: Hosting companies only get worse over time. Over the years, I’ve hosted websites on a bunch of platforms: All of these hosting companies share one thing in common: Over time, they all got…
More posts from themightymo.com
The Ultimate Guide to WordPress Support: Why it’s Essential for Your Website’s Success
Whether you’re situated in Minneapolis, St. Paul, Illinois, New York, or any other corner of the globe, ensuring reliable WordPress Support is paramount for the continued success of your website. In this comprehensive guide, we will delve into the crucial role that WordPress support plays in your website’s journey to success.
How to optimize your Google Crawl Budget using SEM Rush Log File Analyzer and Rank Math SEO
Today I ran the SEM Rush Log File Analyzer tool, and it showed some interesting things that are a complete waste of our Google Crawl Budget. Specifically, I learned that Google is wasting some of our crawl budget on the /wp-includes/ directory, certain plugin directories, and cache directories. I also noticed random files being crawled…
Where is the Google Analytics Measurement ID?
In the vast, evolving world of web development and analytics, keeping up with terminologies and tools can sometimes feel like trying to chase a mischievous cat in a maze. You think you’ve got a grip, only for it to slip right through your fingers! Enter the mysterious “Measurement ID” from Google Analytics 4 (GA4), a…
From Toby’s Blog
- WordPress Hacked? Here’s Your Recovery GuideWordPress hacked? Stay calm and follow this step-by-step guide to recover your site. Learn the signs, recovery steps, and how to secure your site for the future.
- WordPress Maintenance Checklist: Keep Your Site Running SmoothlyDiscover the essential tasks for effective WordPress maintenance and ensure your website runs smoothly and securely with our comprehensive guide.
- Why We Don’t Automate Our WordPress Hosting BusinessThere are some great platforms out there to automate your website hosting biz: But we don’t use any of them. Here’s why: Hosting companies only get worse over time. Over the years, I’ve hosted websites on a bunch of platforms: All of these hosting companies share one thing in common: Over time, they all got…
is your for located in the admin or front end?My attempt in the admin on custom post type is not working.Thanks for the tip.
Sorry for the unclearness of my earlier comment.Is your form located the admin or front end?My attempt in the admin on custom fields is not working.Thanks for the tip.
It seems to work fine now.However, the alert message is not really friendly. i suggest to make few changes to the js file so that when the object is created a function is assigned to the printError propery.