[Fred] Form Builder POC - Share of Ideas and some help

Support Extras
1

Hi All,

I remember that I promised to share my ideas and proof of concept about a Form Builder created with Fred (I just can’t remember who asked me to share this), but I am now reaching a phase on my project that I will have to start thinking about this.

I found a very interesting concept on Fred that can be used for this purpose: fred-bind:

First things first:

  1. The form concept:

I am starting now to implement the form in HTML and the idea is to use the Javascript ValidityState method in order to apply customized HTML5 validation model:

Possible Custom messages per validity events:
	ValidityState = {
		badInput: false,
		customError: false,
		patternMismatch: false,
		rangeOverflow: false,
		rangeUnderflow: false,
		stepMismatch: false,
		tooLong: false,
		tooShort: false,
		typeMismatch: false,
		valid: false,
		valueMissing: true
	};

Support material:
		https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api
		https://medium.com/the-ui-files/form-validation-with-javascript-4fcf4dd32846
		https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
		
Check patters:
		http://html5pattern.com/Names

I am thinking about a dynamic Javascript function that will read some expected data- attributes and use them as data feeder for custom errors and validation patterns.

The HTML of a simple text field shall look like this:

<div class="form-group form-label-group col-12 col-lg-6">
	<input 
		type="text" 
		class="form-control form-control-lg" 
		id="InputIdNumber" 
		name="InputIdNumber" 
		placeholder="ID Card number" 
		aria-describedby="InputIdNumberHelp" 
		data-toggle="tooltip" 
		data-placement="top" 
		data-html="true" 
		title="Insert your complete ID Card Number.<br>Example: 11111111 1<span class='text-danger font-weight-bold'>*</span>" 
		pattern="[A-Z0-9 ]{1,14}" 
		minlength="7" 
		onChange="validateField('InputIdNumber')" 
		data-label="ID Card Number" 
		data-specialValitation = "2" 
		data-badInput="Format not recognized by the browser" 
		data-patternMismatch="The inserted ID Card number is not recognized as valid."
		data-rangeOverflow="" 
		data-rangeUnderflow="" 
		data-stepMismatch="" 
		data-tooLong="You can only insert up to 14 caracters" 
		data-tooShort="Insert at least 7 characters" 
		data-typeMismatch="Please insert a valid ID Card number. Example: 11111111 1" 
		data-valueMissing="This field is mandatory!" 
		data-valid="OK" 
		required>
	<label for="InputIdNumber" class="">ID Card Number</label>
	<small id="InputIdNumberHelp" class="form-text"><span class="text-danger font-weight-bold">*</span> Mandatory Field</small>
	<div class="invalid-tooltip" id="InputIdNumberErrMsg">
		This is a mandatory field.
	</div>
	<div class="valid-tooltip" id="InputIdNumberSucMsg">
		Valid ID Card.
	</div>
</div>
  1. The Fred idea:

Create a Fred element with option set having regular configurations to be passed to FormIt parameters in order to build the snippet call.
Then, we can create a dropzone in order to allow to drag and drop the abive HTML code that would have this on the bottom of it:

<div class="modal">
	<div class="modal-header">New Field Parameters:</div>
	<div class="modal-content">
	
		<div class="my-3 border">
			<div>Tooltip helper text</div>
			<div data-fred-name="fred-form-field-title" data-fred-bind="fred-form-field-title-attr">Insert your complete ID Card Number.<br>Example: 11111111 1<span class='text-danger font-weight-bold'>*</span></div>
		</div>
		
		<div class="my-3 border">
			<div>Bad Input Error Message</div>
			<div data-fred-name="fred-form-field-badInput" data-fred-bind="fred-form-field-badInput-attr">Format not recognized by the browser</div>
		</div>
		
		...
		
	</div>
   
</div>

In order to activate this modal, We can add a div with data-fred-render="false" that would call this modal, and then change a bit the HTML of the field to have this working:

<div class="form-group form-label-group col-12 col-lg-6">
	<input 
		...
		title="<span data-fred-name='fred-form-field-title-attr'></span>" 
		...
		data-badInput="<span data-fred-name='fred-form-field-badInput-attr'></span>" 
		...
		>
</div>

This way we would be able to allow user to customize the different field options, including field type, different parameters, etc.

Couple of things missing:

  • I think I cannot have bindings to placeholders. This would make our life a lot easier;
  • minlenght is just a number, so I am still thinking how I can handle this without using a span for the fred binding to work;
  • How can I handle select boxes options? I believe that there is nothing like migx for the frontent (there is MIGXfe, but it is not documented);

Please share your ideas, as this can also help Fred devs to optimize fred for these use cases as well.

Many thanks in advance all for your opinions and help.
Cheers

3 Likes
2

Hi All,

This is a complex work, but I won’t be able to use the Modal window as parameter module.
I’ll have to use a Fred element for the form fields having the optionset ready to configure the field type and options.

On the formit body I will have to specify the form name, The Chunk names for the e-mail and auto-responder, type of options needed (recaptcha v2 or v3, spam, success message, failure message).

Then for the form field, we will have to define field type (text, email, select, radio, etc), field name, placeholder, required flag, error messages for the Form Validator (data tags shown above), and have a sub-set for each field type (for text, email and other similar input types, this will be simple. For select, radios and similars, I will need to use a slider from 1 to 10 or 15, and then have individual fields for each of the 15 possible options for the slider).

On formit type forms I will have to keep same text for the values of the selects and radios as of the label itself. To this will be easy to do.

This will work, but will be time consuming.

Now the problem I am still trying to solve:

I need to figure out how I can have dynamic chunks for the e-mails, considering that same chunk has to be used for the various different forms. Still couldn’t find a way to dynamically “print” all Formit fields to the chunk.
Do you have any Idea how to do this?

3

Hi guys,

This is not forgotten. Just had to focus on other tasks first, but this will continue.
As soon as I have more details, I will share.

2 Likes
4

Just replying to this as a reminder for me. I’ve created a beta extra that auto generates the submitted form fields and repeats them into the email chunk. I’ll send you a link when I’m back at the computer.

2 Likes
5

Many thanks! On my side this shouldn’t be far as well, but it is being done on a slow pace as.long as my short spare time allows it.

cheers

1 Like
6

Hey,

Ok finally managed to get some time to publish this extra on Github. I haven’t added it to the Modx Extras as I don’t think it’s ready for a full public release. But have a look over it and let me know what you think.

https://github.com/NatemcM/Modx-Form-Fields

Initially we developed this for a site that used a lot of different contact forms for lead generation and we got fed up creating new email templates each time :D. We now use this with nearly all of our Fred installs as it makes life super easy. Just set up your form, include the formFields in your FormIt hook (before the email hook) and it’ll do the rest.

Also, this was created with the Modx Extra Packman… it should still work alright (only adds two chunks and a snippet) if I decide it’s worth adding to Modx Extras i’ll do it properly…

1 Like