Pls add captcha field to this DotNetNuke form and

I have this form which I need the resulting data entered by user to be sent to my email address. But this form should work in DotNetNuke . I understand there's some kind of action that is missing here so please help.

Also can please help me add the Captcha field before the user click on 'Send button'?

Also pls help me make All field required to be entered by user so to be sure the user enters all information.

I think that is all. Pls ask if you need clarification

thanks

    </div>                      
        <ul >

                <li id="li_1" >
    <label class="description" for="element_1">Please select a specific date : </label>
    <span>
        <input id="element_1_1" name="element_1_1" class="element text" size="2" maxlength="2" value="" type="text"> /
        <label for="element_1_1">MM</label>
    </span>
    <span>
        <input id="element_1_2" name="element_1_2" class="element text" size="2" maxlength="2" value="" type="text"> /
        <label for="element_1_2">DD</label>
    </span>
    <span>
        <input id="element_1_3" name="element_1_3" class="element text" size="4" maxlength="4" value="" type="text">
        <label for="element_1_3">YYYY</label>
    </span>

    <span id="calendar_1">
        <img id="cal_img_1" class="datepicker" src="calendar.gif" alt="Pick a date.">   
    </span>
    <script type="text/javascript">
        Calendar.setup({
        inputField   : "element_1_3",
        baseField    : "element_1",
        displayArea  : "calendar_1",
        button       : "cal_img_1",
        ifFormat     : "%B %e, %Y",
        onSelect     : selectDate
        });
    </script>

    </li>       <li id="li_2" >
    <label class="description" for="element_2">Please select a desired time : </label>
    <span>
        <input id="element_2_1" name="element_2_1" class="element text " size="2" type="text" maxlength="2" value=""/> : 
        <label>HH</label>
    </span>
    <span>
        <input id="element_2_2" name="element_2_2" class="element text " size="2" type="text" maxlength="2" value=""/> : 
        <label>MM</label>
    </span>
    <span>
        <input id="element_2_3" name="element_2_3" class="element text " size="2" type="text" maxlength="2" value=""/>
        <label>SS</label>
    </span>
    <span>
        <select class="element select" style="width:4em" id="element_2_4" name="element_2_4">
            <option value="AM" >AM</option>
            <option value="PM" >PM</option>
        </select>
        <label>AM/PM</label>
    </span> 
    </li>       <li id="li_3" >
    <label class="description" for="element_3">Full name : </label>
    <span>
        <input id="element_3_1" name= "element_3_1" class="element text" maxlength="255" size="8" value=""/>
        <label>First</label>
    </span>
    <span>
        <input id="element_3_2" name= "element_3_2" class="element text" maxlength="255" size="14" value=""/>
        <label>Last</label>
    </span> 
    </li>       <li id="li_4" >
    <label class="description" for="element_4">Email address : </label>
    <div>
        <input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value=""/> 
    </div> 
    </li>       <li id="li_5" >
    <label class="description" for="element_5">Contact Phone number : </label>
    <span>
        <input id="element_5_1" name="element_5_1" class="element text" size="3" maxlength="3" value="" type="text"> -
        <label for="element_5_1">(###)</label>
    </span>
    <span>
        <input id="element_5_2" name="element_5_2" class="element text" size="3" maxlength="3" value="" type="text"> -
        <label for="element_5_2">###</label>
    </span>
    <span>
        <input id="element_5_3" name="element_5_3" class="element text" size="4" maxlength="4" value="" type="text">
        <label for="element_5_3">####</label>
    </span>

    </li>       <li id="li_6" >
    <label class="description" for="element_6">Reason for appointment : </label>
    <div>
        <textarea id="element_6" name="element_6" class="element textarea medium"></textarea> 
    </div> 
    </li>

                <li class="buttons">
            <input type="hidden" name="form_id" value="331313" />

            <input id="saveForm" class="button_text" type="submit" name="Submit" value="Submit Appointment Request" />
    </li>
        </ul>
    </form> 
    <div id="footer"></div>
</div>

回答1:

A simple javascript check will validate that the fields are filled out. Then checkout the recapcha site for instructions on implementing their capcha.

回答2:

for Captcha, try below link

http://www.encaps.net/software/php-captcha/

http://www.white-hat-web-design.co.uk/blog/php-captcha-security-images/

http://www.phpcaptcha.org/

Good Luck!!!