<script src="vanillaform.js"></script>
<link rel="stylesheet" href="vanillaform.css">
vanillaform.js
is the master file of this project. It contains one main JavaScript function called VanillaForm
.
vanillaform.css
give you a basic CSS code that you can adapt to your needs.
<div class="targeted-wrapper"></div>
<style>
.targeted-wrapper {
width: 768px;
margin: 1em auto;
}
</style>
You can use both VanillaForm(settings)
or new VanillaForm(settings)
to get an instance.
Instances have the following methods.
render
method allow you to render the form in the dom element you specify during initialization. See el
in settings section. This function does not receive parameters.
set_values
method allow you to set form values. You must call the render method to see changes. This function does receive an object that contains the values.
form.set_values({
firstname: 'John',
lastname: 'Doe',
email: '[email protected]',
message: 'An exemple of message',
});
form.render();
var targeted_wrapper = document.querySelector('.targeted-wrapper');
var form = VanillaForm({
el: targeted_wrapper,
submit_btn_label: 'Send The Message',
fields: [
{
label: "Lastname",
name: "lastname",
type: "text",
class: "half"
},
{
label: "Firstname",
name: "firstname",
type: "text",
class: "half"
},
{
label: "Email",
name: "email",
type: "email"
},
{
label: "Message",
name: "message",
type: "textarea"
}
]
});
form.render();
el
is the wrapper element where the form is inserted.
You can use document.querySelector(selector)
if you need to use a selector.
{
el: document.querySelector('.targeted-wrapper')
}
method
allows you to specify the method used to send the form. The default value is post
.
submit_btn_label
allow you to specify the label of the submit button.
endpoints
is an object that contain the locations to where to send data.
{
endpoints: {
action: '/path/to/backend',
upload: '/path/to/upload_file',
}
}
upload
is the path where files are sent via ajax immediately after a file has been selected.
action
is the path where the data is sent when the form is submitted.
callbacks
is an object that contain function called at some point.
{
callbacks: {
before_render: function (){},
after_render: function (){},
on_upload_response: function (){},
}
}
before_render
is fired before rendering the form.
after_render
is triggered after the form is rendered. It is useful to attach external field customization libraries such as a WYSIWYG, a complex selector or a date picker.
on_upload_response
is triggered after the server has responded to the file upload. It is used to set the value of the file
field.
Considering the following php code at the upload
endpoint.
/**
* This is a simple exemple that do not take safety in consideration.
* Do not forget to put some limitation to file upload.
*/
$base_dir = __DIR__ . "/../..";
$target_dir = $base_dir . "/exemples/data/";
$target_file = $target_dir . uniqid() . '_' . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
echo json_encode([
"success" => true,
"path" => str_replace($base_dir, '', $target_file)
]);
} else {
echo json_encode([
"error" => true
]);
}
exit;
You will need to set on_upload_response
callback like this.
{
on_upload_response: function(response, field_el) {
var r = JSON.parse(response);
if (r.success) {
field_el.value = r.path;
}
}
}
fields
is an array of objects that follow the field's structure.
{
fields: [
{
label: "Exemple of label 1",
name: "field_name_1",
},
{
label: "Exemple of label 2",
name: "field_name_2"
}
]
}
label
is used to set the label of the field.
Default value : Label N
name
is used to set the name of the field.
Default value : field_N
type
is the type of fields (text, textarea, file, select, checkbox, radio, etc... )
Default value : text
choices
is an array of string or object. You will use it when type is set to checkbox
, radio
or select
.
Example with string.
{
label: "Subject",
name: "subject",
type: "radio",
choices: [ "Information request", "Billing", "Emergency", "Other" ]
}
Example with object.
{
label: "Subject",
name: "subject",
type: "radio",
choices: [
{label:"Information request", value: "information_request"},
{label:"Billing", value: "billing"},
{label:"Emergency", value: "emergency"},
{label:"Other", value: "other"}
]
}
multiple
is useful when using type select
if you need to select multiple option.
class
is used to add css classes on the dom element that wraps the field.
condition
is a hook function that determines if a field should be visible.
For example, if you want the field phone
to be visible only when the field contact_method
is equal to phone
you will write that.
{
label: "Phone",
name: "phone",
type: "tel",
condition: function(e) {
for (let i = 0; i < e.fields.length; i++) {
const field = e.fields[i];
if (field.name == 'contact_method') {
return (field.value == 'phone');
}
}
}
}
branches
, components
, repeater
and fields
are array of fields.
branches
is a structure where objects can be repeated and have children that contain the same fields. (Family tree, hierarchical representation)
{
label: "Hierarchy",
name: "hierarchy",
add_childrens_label: 'Add Subitems',
branches: [
{
label: "Lastname",
name: "lastname",
type: "text",
class: "half"
},
{
label: "Firstname",
name: "firstname",
type: "text",
class: "half"
},
]
}
repeater
allow you to repeat fields. (List of tasks, Participants, Slider)
{
label: "Todos",
name: "todos",
repeater: [
{
label: "Task",
name: "task",
type: "textarea"
},
{
label: "Status",
name: "status",
type: "select",
choices: [
{value: "new", label: "New"},
{value: "doing", label: "Doing"},
{value: "label", label: "Done"}
]
},
]
}
fields
is a group of fields.
components
is like a repeater with the possibility to choose the group of fields (or the field) you want to add.
{
label: "Blocks",
name: "blocks",
components: [
{
label: "Slides",
name: "slides",
repeater: [
{
label: "Title",
name: "title",
type: "text",
},
{
label: "Image",
name: "image",
type: "file",
},
]
},
{
label: "Content",
name: "status",
fields: [
{
label: "Title",
name: "title",
type: "text",
},
{
label: "Content",
name: "content",
type: "textarea",
},
]
},
]
}