Lead form for React JS
First you need to create an account with Boontar TV
Features
- Faster than Boontar TV widget
- You can use your own style classes
- Install the module and start collecting requests, ratings, reviews
- Admin panel for viewing incoming requests Boontar TV
- Export requests
- Embedded analytics
Admin panel
List of incoming requests in the admin panel Boontar TV
Getting Started
To install the module, run the following in the command line:
npm i react-lead-form --save
Use within your application with the following line of JavaScript:
const ReactLeadForm = require('react-lead-form');
or
import ReactLeadForm from 'react-lead-form'
Available props
Name | Type | Required | Default | Description |
---|---|---|---|---|
getId |
number |
Yes |
- | Lead form unique ID at Boontar TV |
apiKey |
string |
Yes |
- | Key that you generate in the admin panel Boontar TV |
classNameInputLabel |
string |
No |
- | Custom class for InputLabel |
classNameInput |
string |
No |
- | Custom class for inputs |
classNameButton |
string |
No |
- | Custom class for button |
classNameSuccessText |
string |
No |
- | Custom class for success notification |
classNameFailedText |
string |
No |
- | Custom class for failed notification |
classNameContainer |
string |
No |
- | Custom class for main container |
classNameTitle |
string |
No |
- | Custom class for title |
classNameDesc |
string |
No |
- | Custom class for description |
classNameInputsContainer |
string |
No |
- | Custom class for form container |
classNameButtonContainer |
string |
No |
- | Custom class for button and notification block |
statusVisible |
boolean |
Yes |
true |
Show form submission status |
successStatus |
string |
No |
Form sent successfully |
Text on success |
failedStatus |
string |
No |
Failed to submit form |
Text on failed |
requiredStatus |
string |
No |
You have not filled in the required fields |
Text if all required fields were not filled |
validateStatus |
string |
No |
Check the correctness of the filled data |
Text if email or phone types fail validation |
onSuccess |
func |
No |
- | Callback function after successful form submission |
onFailed |
func |
No |
- | Callback function after failed form submission |
onLoad |
func |
No |
- | Callback function after the lead form is loaded |
onLoadFailed |
func |
No |
- | Callback function if lead form fails to get |
Error codes
Code | Description |
---|---|
1 |
Failed to submit form |
2 |
Required fields not filled |
3 |
Not correct email |
4 |
Not correct phone number |
Available input fields
Name | Included |
---|---|
Text |
|
Number |
|
Date & Time |
|
Date |
|
Time |
|
Slider |
|
Select |
Example
import React, { Component } from "react";
import ReactLeadForm from 'react-lead-form'
import 'react-lead-form/dist/index.css'
class HelloWorld extends Component {
onSuccess = () => {
}
onFailed = (errorCode) => {
console.log(errorCode)
}
render() {
return(<ReactLeadForm
getId={481}
apiKey={'b0f36535c5752895a8f359fcce725cb0d32f51f2'}
statusVisible={true}
onSuccess={this.onSuccess}
onFailed={this.onFailed}
/>)
}
}
We also have a plug-in widget, the appearance of which is edited only in your personal account: https://github.com/boontar-ltd/react-lead-form-widget