Hi Guido,
1)
Yes.
If you could add another list of options for the placeholder text as well.
Then, the user can add both if he wants to.
https://www.w3schools.com/tags/att_input_placeholder.asp
2)
For the labels, the colon ‘:’ symbol is unessesairy.
It’s added automatically, but sometimes it doesn’t fit the design.
Also, it may not be grammatically correct for all languages.
3)
It would be nice to have a few additional custom fields, to ask the user a question, like:
– Your location
– Your budget
– Where did you hear about us
– …
4)
Would be nice to have a redirect to a page after the from has been submitted.
5)
I know that you want the from to be super lite.
And that’s why I like it.
But, how about giving the user the option to inject a little bit of JS that prevents the page from being closed if someone started writing, but did not submit the form.
Or maybe they clicked the button, but it didn’t send.
And they try to leave quickly without realizing that it didn’t get sent.
"use strict";
(() => {
const modified_inputs = new Set;
const defaultValue = "defaultValue";
// store default values
addEventListener("beforeinput", (evt) => {
const target = evt.target;
if (!(defaultValue in target || defaultValue in target.dataset)) {
target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
}
});
// detect input modifications
addEventListener("input", (evt) => {
const target = evt.target;
let original;
if (defaultValue in target) {
original = target[defaultValue];
} else {
original = target.dataset[defaultValue];
}
if (original !== ("" + (target.value || target.textContent)).trim()) {
if (!modified_inputs.has(target)) {
modified_inputs.add(target);
}
} else if (modified_inputs.has(target)) {
modified_inputs.delete(target);
}
});
// clear modified inputs upon form submission
addEventListener("submit", (evt) => {
modified_inputs.clear();
// to prevent the warning from happening, it is advisable
// that you clear your form controls back to their default
// state with evt.target.reset() or form.reset() after submission
});
// warn before closing if any inputs are modified
addEventListener("beforeunload", (evt) => {
if (modified_inputs.size) {
const unsaved_changes_warning = "Changes you made may not be saved.";
evt.returnValue = unsaved_changes_warning;
return unsaved_changes_warning;
}
});
})();
I was just plaining to answer your question, but then got these ideas ??
If it had all this, it would be the perfect form plugin.
Regards,
Jovan
