React-lead-form NPM

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');

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