DevOps:Doc/FlexForm/2.1/Form options - Revision history

Ebc16062-dd09-4928-8cf3-821f492b0c44: /* Use reCaptcha Version 3 on a flexform */

2025-08-21T09:36:57Z

Use reCaptcha Version 3 on a flexform

← Older revision		Revision as of 11:36, 21 August 2025
Line 77:		Line 77:
	===== '''recaptcha-action ( since v.2.2.11 ) =====		===== '''recaptcha-action ( since v.2.2.11 ) =====

	====== ''Use reCaptcha Version 3 on a flexform'' ======		====== Use reCaptcha Version 3 on a flexform ======
	Have FlexForm use Google reCAPTCHA v3 to prevent spamming in a form.		Have FlexForm use Google reCAPTCHA v3 to prevent spamming in a form.

Maintenance script: Imported by PageSync

2025-07-15T08:35:16Z

Imported by PageSync

ws-class-props
← Older revision		Revision as of 10:35, 15 July 2025
Line 1:		Line 1:
	{{~~Doc~~ properties		{{Csp class properties
	\|Subject version=2.1		\|Subject version=2.1
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: /* Note */

2025-05-16T08:58:23Z

Note

← Older revision		Revision as of 10:58, 16 May 2025
Line 243:		Line 243:

	===Note===		===Note===
	If you want your form to have at least a bit of styling, you can use FlexForm's CSS. Simple add class="simple" to your form tag.		If you want your form to have at least a bit of styling, you can use FlexForm's CSS. Simple add class="simple" to your form tag. This class will only work on FlexForm Forms. Not on any other element in HTML.
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form class="simple">		<form class="simple">

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: /* Note */

2025-05-16T08:45:15Z

Note

← Older revision		Revision as of 10:45, 16 May 2025
Line 269:		Line 269:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form action="get" class="simple">		<form action="get" class="simple">
	<label for="~~testnostyle~~">My label</label><br>		<label for="teststyle">My label</label><br>
	<input type="text" name="~~testnostyle~~" id="~~testnostyle~~" />		<input type="text" name="teststyle" id="teststyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />
	</form>		</form>
Line 276:		Line 276:

	<form action="get" class="simple">		<form action="get" class="simple">
	<label for="~~testnostyle~~">My label</label><br>		<label for="teststyle">My label</label><br>
	<input type="text" name="~~testnostyle~~" id="~~testnostyle~~" />		<input type="text" name="teststyle" id="teststyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />
	</form>		</form>

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: /* Note */

2025-05-16T08:44:09Z

Note

← Older revision		Revision as of 10:44, 16 May 2025
Line 254:		Line 254:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form action="get">		<form action="get">
	<label for="testnostyle">My label</label>		<label for="testnostyle">My label</label><br>
	<input type="text" name="testnostyle" id="testnostyle" />		<input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />
	</form>		</form>
	</syntaxhighlight>		</syntaxhighlight>
	<form action="get">		<form action="get">
	<label for="testnostyle">My label</label>		<label for="testnostyle">My label</label><br>
	<input type="text" name="testnostyle" id="testnostyle" />		<input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />
Line 269:		Line 269:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form action="get" class="simple">		<form action="get" class="simple">
	<label for="testnostyle">My label</label>		<label for="testnostyle">My label</label><br>
	<input type="text" name="testnostyle" id="testnostyle" />		<input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />
	</form>		</form>
Line 276:		Line 276:

	<form action="get" class="simple">		<form action="get" class="simple">
	<label for="testnostyle">My label</label>		<label for="testnostyle">My label</label><br>
	<input type="text" name="testnostyle" id="testnostyle" />		<input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: /* Note */

2025-05-16T08:43:11Z

Note

← Older revision		Revision as of 10:43, 16 May 2025
Line 254:		Line 254:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form action="get">		<form action="get">
	<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle" />		<label for="testnostyle">My label</label>
			<input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />
	</form>		</form>
	</syntaxhighlight>		</syntaxhighlight>
	<form action="get">		<form action="get">
	<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle" />		<label for="testnostyle">My label</label>
			<input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />
	</form>		</form>
Line 267:		Line 269:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form action="get" class="simple">		<form action="get" class="simple">
	<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle" />		<label for="testnostyle">My label</label>
			<input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />
	</form>		</form>
Line 273:		Line 276:

	<form action="get" class="simple">		<form action="get" class="simple">
	<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle" />		<label for="testnostyle">My label</label>
			<input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok" />		<input type="submit" value="ok" />
	</form>		</form>

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: /* Note */

2025-05-16T08:42:07Z

Note

← Older revision		Revision as of 10:42, 16 May 2025
Line 244:		Line 244:
	===Note===		===Note===
	If you want your form to have at least a bit of styling, you can use FlexForm's CSS. Simple add class="simple" to your form tag.		If you want your form to have at least a bit of styling, you can use FlexForm's CSS. Simple add class="simple" to your form tag.
	c		<syntaxhighlight lang="html">
	<form class="simple">		<form class="simple">
	Your flexform elements here		Your flexform elements here

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295 at 08:41, 16 May 2025

2025-05-16T08:41:27Z

← Older revision		Revision as of 10:41, 16 May 2025
Line 254:		Line 254:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form action="get">		<form action="get">
	<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle">		<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok">		<input type="submit" value="ok" />
	</form>		</form>
	</syntaxhighlight>		</syntaxhighlight>
	<form action="get">		<form action="get">
	<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle">		<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok">		<input type="submit" value="ok" />
	</form>		</form>

Line 267:		Line 267:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form action="get" class="simple">		<form action="get" class="simple">
	<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle">		<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok">		<input type="submit" value="ok" />
	</form>		</form>
	</syntaxhighlight>		</syntaxhighlight>

	<form action="get" class="simple">		<form action="get" class="simple">
	<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle">		<label for="testnostyle">My label</label><input type="text" name="testnostyle" id="testnostyle" />
	<input type="submit" value="ok">		<input type="submit" value="ok" />
	</form>		</form>

	===Links===		===Links===
	https://developers.google.com/recaptcha/docs/v3		https://developers.google.com/recaptcha/docs/v3

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: /* Note */

2025-05-16T08:40:05Z

Note

@@ Line 244: / Line 244: @@
 ===Note===
 If you want your form to have at least a bit of styling, you can use FlexForm's CSS. Simple add class="simple" to your form tag.
-<syntaxhighlight lang="html">
 <form class="simple">
      Your flexform elements here
 </form>
 </syntaxhighlight>
 ===Links===
 https://developers.google.com/recaptcha/docs/v3

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295 at 08:30, 16 May 2025

2025-05-16T08:30:52Z

← Older revision		Revision as of 10:30, 16 May 2025
Line 138:		Line 138:
	This will set autosave to auto.		This will set autosave to auto.
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ id="unique id per form" autosave=""></form>		<form id="unique id per form" autosave=""></form>
	</syntaxhighlight>		</syntaxhighlight>

Line 144:		Line 144:
	Set autosave to interval only :		Set autosave to interval only :
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ id="unique id per form" autosave="oninterval"></form>		<form id="unique id per form" autosave="oninterval"></form>
	</syntaxhighlight>		</syntaxhighlight>

Line 150:		Line 150:
	Set autosave to change only :		Set autosave to change only :
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ id="unique id per form" autosave="onchange"></form>		<form id="unique id per form" autosave="onchange"></form>
	</syntaxhighlight>		</syntaxhighlight>
	'''Note: A form needs to have an unique identifier set by its id'''		'''Note: A form needs to have an unique identifier set by its id'''
Line 158:		Line 158:

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ id="unique id per form" autosave="onintervalafterchange"></form>		<form id="unique id per form" autosave="onintervalafterchange"></form>
	</syntaxhighlight>		</syntaxhighlight>

Line 164:		Line 164:

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ id="test-autosave-form" autosave="{{#if:...\|auto\|none}}" >		<form id="test-autosave-form" autosave="{{#if:...\|auto\|none}}" >
	<input type="text" />		<input type="text" />
	<input type="submit" />		<input type="submit" />
Line 176:		Line 176:
	This can be really handy to describe what form or action was responsible for the changes in the Wiki.		This can be really handy to describe what form or action was responsible for the changes in the Wiki.
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ setwikicomment="Edit user preference form" >		<form setwikicomment="Edit user preference form" >
	Your flexform elements here		Your flexform elements here
	</form>		</form>
Line 198:		Line 198:
	You can create an extension for FlexForm that can do additonal tasks to a Form. See extension Docs for more information		You can create an extension for FlexForm that can do additonal tasks to a Form. See extension Docs for more information
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ extension="<name of your extension" >		<form extension="<name of your extension" >
	Your flexform elements here		Your flexform elements here
	</form>		</form>
Line 219:		Line 219:
	Example 1 : formtarget		Example 1 : formtarget
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ formtarget="https://example.com/handleform.php" >		<form formtarget="https://example.com/handleform.php" >
	Your flexform elements here		Your flexform elements here
	</form>		</form>
Line 225:		Line 225:
	Example 2 : messageonsuccess		Example 2 : messageonsuccess
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ messageonsuccess="Information posted, thanks!">		<form messageonsuccess="Information posted, thanks!">
	Your flexform elements here		Your flexform elements here
	</form>		</form>
Line 231:		Line 231:
	Example 3 : no_submit_on_return		Example 3 : no_submit_on_return
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ no_submit_on_return>		<form no_submit_on_return>
	Your flexform elements here		Your flexform elements here
	</form>		</form>
Line 237:		Line 237:
	Example 4 : reCaptcha v3		Example 4 : reCaptcha v3
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<form ~~action="addToWiki"~~ recaptcha-v3-action="contactform">		<form recaptcha-v3-action="contactform">
	Your flexform elements here		Your flexform elements here
	</form>		</form>
Line 244:		Line 244:
	===Note===		===Note===
	If you want your form to have at least a bit of styling, you can use FlexForm's CSS. Simple add class="simple" to your form tag.		If you want your form to have at least a bit of styling, you can use FlexForm's CSS. Simple add class="simple" to your form tag.
			<syntaxhighlight lang="html">
			<form class="simple">
			Your flexform elements here
			</form>
			</syntaxhighlight>

	===Links===		===Links===
	https://developers.google.com/recaptcha/docs/v3		https://developers.google.com/recaptcha/docs/v3