2.0.5 • Published 5 years ago
simple-react-form-builder v2.0.5
Simple React Form Builder
Build simple forms with bootstrap 3 markup using config files within react.
Requires REACT 16
Example useage:
Example index.js
import FormBuilder from 'simple-react-form-builder'
const formProps = require('/path/to/formConfig.js')
render () {
return(
<FormBuilder {...formProps} />
)
}
Example props to generate a form with a submit function that serializes form data
Example formConfig.js
const expires = new Date()
expires.setDate(expires.getDate() + 14)
module.exports = {
submitClass: 'btn btn-primary',
submitText: 'Send!',
inputClass: 'form-builder-input',
checkboxContainerClass: 'checkbox form-group',
formAction: 'javascript:void(0)',
onSubmit: function (e) {
const formInputs = e.target.querySelectorAll('.form-builder-input')
const submitObject = {}
Object.keys(formInputs).forEach(key => {
const item = formInputs[key]
if (!item.name) return
if (item.type === 'checkbox') submitObject[item.name] = item.checked
else submitObject[item.name] = item.value
})
console.log(submitObject)
},
cookies: {
namePrefix: 'example_cookies',
path: '/',
expires
},
inputs: {
firstName: {
type: 'text',
label: 'First Name',
attributes: {
name: 'first_name',
placeholder: 'First Name',
required: 'required',
defaultValue: 'Waza'
}
},
RoomType: {
type: 'select',
label: 'Options',
attributes: {
name: 'options',
placeholder: 'Options',
defaultValue: '2'
},
options: {
'1': 'One',
'2': 'Two',
'3': 'Three'
}
},
test: {
type: 'hidden',
attributes: {
name: 'hidden_input',
required: 'required',
value: '1'
}
},
yourEmail: {
type: 'email',
label: 'Your Email',
attributes: {
name: 'email',
placeholder: 'Your Email Address',
required: 'required'
}
},
enquiry: {
type: 'textarea',
label: 'Enquiry',
attributes: {
name: 'enquiry',
rows: 3,
required: 'required'
}
},
signup: {
type: 'checkbox',
label: 'Signup to our newsletter',
attributes: {
name: 'newsletter',
defaultChecked: false
}
}
}
}
Optional Props for customisation:
If you want to include cookies you can use the cookies
prop, everything in the cookies object is optional apart from namePrefix which is required. Your cookies will be named like this ${cookies.namePrefix}_${name of input}
if your input does not have a name, then no cookie will be stored for it.
{
cookies: {
namePrefix: 'example_cookies',
path: '/',
expires,
maxAge: 1000,
domain: 'https://example-domain.com',
secure: true,
httpOnly: false
},
onSubmit: func, // Function to run when the form submits
submitText: 'Send', // Defaults to 'Submit'
formAction: '/where-to-submit.html',
submitClass: 'btn btn-primary', // Goes onto the submit button
inputClass: 'form-builder-input', // This class gets applied to all inputs generated
checkboxContainerClass: 'checkbox form-group', // This class gets applied to checkbox containers
submitButton: false // Set to false to not render a submit button
}
2.0.5
5 years ago
2.0.4
5 years ago
2.0.3
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago