Captcha

Captcha Form

The sample captcha form is a HTML form with an accessible captcha and database support.

Overview

The captcha form sample extends the feedback form with an accessible captcha. The purpose of the captcha form is to show how to change an existing form. A server-based accessible captcha with a dedicated captcha input field is on the agenda.

Form Design

Start with the feedback form.

Drag-and-drop a text field symbol on the bottom of the text area symbol to create a text field as the second form component.

Dropping a textfield component on the feedback textarea component as second form component

Right-click the text field symbol to open the context menu and change the text field type to "Integer".

Double-click the text fields's label cell and change the label to "Captcha: 8 plus one is what?" (or something that really confuses the bot).

The integer textfield component as with the label Captcha:-8-plus-one-is-what

Double-click the text field's properties cell to open the properties dialog. Set the input required and define the value 9 as the only valid input. Click OK …

The properties dialog of the captcha textfield component

…to confirm the changes.

Add the invalid-input error message header ("Invalid input:"), the missing-input error message text ("Please solve the captcha."), and the invalid-input error message text ("Your captcha solution is wrong.").

Specifying the error messages of the captcha textfield component

Form Layout

Switch to the layout view with the updated form layout. Toggle the view mode The zoom and view mode toggle as convenient.

Two additional drawing objects were added to the canvas, a text field object and a label. Both were put on the bottom of the form. The page size was increased to hold the new objects.

Increase the page height, rearrange the drawing objects, and reduce the page width.

Finally, double-click the page background and select a page border and a background.

Save the form's source code to the file system and run the captcha form client-only or client-server.

Database Support

Click the settings tab, select the client-server code and the database "MySQL" options. Enter the MySQL root password if required - MySQL has no initial root password, MAMP's initial MySQL root password is "root" (see LAMP, MAMP, or WAMP).

The code generator will create a database

Click the product tab and save the captcha HTML form to the server folder as index.php.

Load the captcha HTML form in your browser, complete its fields, and submit it.

Shown below is what we have in our database.

                "1"  
                "Men are all alike."  
                "9"  
                "2020-02-04 16:53:03"

The last entry is the record's timestamp (sample update on 2020-Feb-04).

Source Code

Below is the source code of the captcha form sample.

<?xml version="1.0" encoding="us-ascii" standalone="yes"?>
<!-- Created on Tue Feb 04 17:02:29 CET 2020 -->
<form>
	<settings>
		<form-settings code="1" database="1" host="bG9jYWxob3N0" port="8888" user="cm9vdA==" password="cm9vdA==" layout="2"/>
	</settings>
	<pages>
		<page width="1500" height="1240" border="1" border-color="C0C0C0" border-opacity="10" background="1" background-color="FFFFFF" background-opacity="10">
			<defaults>
				<shape border="1" border-color="6699FF" border-opacity="10" background="1" background-color="FFFFFF" background-opacity="10"/>
				<label alignment="left" font-family="THVjaWRhIFNhbnMgVW5pY29kZQ==" text-color="000000" text-opacity="10" border="0" background="0"/>
			</defaults>
			<shapes>
				<shape type="roundrect" x="40" y="40" width="1420" height="1020" border-radius="20"/>
			</shapes>
			<components>
				<component type="textarea">
					<control x="80" y="220" width="1340" height="500"/>
					<label x="80" y="80" width="410" height="100">RmVlZGJhY2s=</label>
					<properties type="editable" required="true">
						<placeholder>UGxlYXNlIHRlbGwgdXMgd2hhdCB5b3UgdGhpbmsu</placeholder>
						<max-length>1000</max-length>
					</properties>
					<messages>
						<missing-input>UGxlYXNlIHRlbGwgdXMgd2hhdCB5b3UgdGhpbmsu</missing-input>
					</messages>
				</component>
				<component type="textfield">
					<control x="80" y="920" width="400"/>
					<label x="80" y="780" width="1210" height="100">Q2FwdGNoYTogOCBwbHVzIG9uZSBpcyB3aGF0Pw==</label>
					<properties type="integer" required="true">
						<min-value>9</min-value>
						<max-value>9</max-value>
					</properties>
					<messages>
						<missing-input>UGxlYXNlIHNvbHZlIHRoZSBjYXB0Y2hhLg==</missing-input>
						<invalid-input>WW91ciBjYXB0Y2hhIHNvbHV0aW9uIGlzIHdyb25nLg==</invalid-input>
					</messages>
				</component>
				<component type="button">
					<control x="1060" y="1100" width="400"/>
					<label>U3VibWl0</label>
					<properties type="submit">
					</properties>
				</component>
			</components>
			<messages>
				<missing-input>TWlzc2luZyBpbnB1dDo=</missing-input>
				<invalid-input>SW52YWxpZCBpbnB1dDo=</invalid-input>
			</messages>
		</page>
	</pages>
</form>