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