I am teaching British Sign Language on my website, on the alphabet section I have an image of 'signs' that spell out a word. Below I would like a text box that requires the user to input the correct word and for the text box to validate live and appear with a tick next to it.

Much like the functionality of the 'Homepage Example' seen here where you have to enter the word 'hello':


Does anyone know how I would implement this on a Wordpress Site, or is there a plugin that allows custom or 'this type' of validation?

I have been searching and reading for hours and only being a novice at programming I am unable to find a solution.

I am trying to keep my site clean and easy to use. I know a quiz or something similar would work, but it's too many clicks, too bloated etc. I just want a quick text box that turns green or a tick appears when the correct answer is entered.

I am also aware that plugins such as Gravity Forms & Contact Form 7 do validate but only dates & email addresses etc.

Any help is greatly appreciated!

  • Sounds like a neat project but it may be "too localized" for this site, and if you don't know how to write PHP you may be better off hiring someone.
    – s_ha_dum
    Feb 24, 2013 at 14:25

1 Answer 1


If you are looking for a shortcode like this:

[question text="What has four legs?" answer="Horse" message="Right answer!" messageid="message1" ]

with output like this:

enter image description here

then here is a very simple non-jQuery skeleton version:

function question_func_wpse_88192($atts, $content = null ){
    extract( shortcode_atts( array(
        'text' => '',
        'answer' => '',
        'message' => 'Right answer!',
        'messageid' => 'message', 
    ), $atts ) );

    // format input:

    // inline js:

    // html output:
    $output  = "<div class=\"question\">";
    $output .= "<span class=\"question_text\">".$text."</span>";
    $output .= "<input type=\"text\" class=\"question_input\"";
    $output .= " onkeyup=\"".$onkeyup."\" />";
    $output .= "<span id=\"".$messageid."\" class=\"question_message\" style=\"display:none;\">".$message."</span>";
    $output .= "</div>";

    return $output;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.