forms.js

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import normalizePhone from './normalizePhone'
import {
    Alert, ProgressBar, Nav, Navbar, NavItem, MenuItem, NavDropdown, FormGroup,
    ControlLabel, FormControl, Button, Radio, Checkbox, HelpBlock, Col, Pagination,
} from 'react-bootstrap';

import input from './Input'

const ReduxFormControl = ({input, meta, ...props}) => {
    return <FormGroup bsSize={props.size}>
    <FormControl
        {...props}
        {...input}
    />
    </FormGroup>
};

const FieldInput = ({ input, meta, type, placeholder, min, max, size }) => {
    return (
        <FormGroup bsSize={size}>
            <FormControl
                type={type}
                placeholder={placeholder}
                min={min}
                max={max}
                value={input.value}
                onChange={input.onChange}
            />
        </FormGroup>
    )
};


const SelectInput = ({ input, meta, type, placeholder, min, max, size, options }) => {
    return (
        <FormGroup bsSize={size}>
            <FormControl
                componentClass="select"
                type={type}
                placeholder={placeholder}
                min={min}
                max={max}
                value={input.value}
                onChange={input.onChange}
            >
                <option>{options[0]}</option>
                <option>{options[1]}</option>
                <option>{options[2]}</option>
                <option>{options[3]}</option>
            </FormControl>
        </FormGroup>
    )
};

let ContactForm = props => {


    const { handleSubmit } = props;
    return (
        <div>
            <Col xs={12} md={2} />
            <Col xs={12} md={8}>
                <form onSubmit={ handleSubmit }>
                    <div>
                        <Field name="agentName"
                               type='text'
                               component={ReduxFormControl}
                               placeholder='Agent Name'
                               size="large"
                               label="Agent Name"
                        />
                    </div>
                    <div>
                        <Field name="agencyName"
                               type='text'
                               component={FieldInput}
                               placeholder='Agency Name'
                               size="large"
                        />
                    </div>
                    <div>
                        <Field name="agencyPhone"
                               type='text'
                               component={FieldInput}
                               placeholder='Agency Phone Number'
                               size="large"
                               phone="333-333-3333"
                        />
                    </div>
                    <div>
                        <Field name="applicantName"
                               type='text'
                               component={FieldInput}
                               placeholder='Applicant Name'
                               size="large"
                        />
                    </div>
                    <div>

                        <Field name='State'
                               type='text'
                               component={SelectInput}
                               placeholder='Applicant Name'
                               size='large'
                               options={ ["NC","SC","GA","VA"] }
                        />
                    </div>
                    <div>
                        <Field name="miniStorageContentValue"
                               type='number'
                               component={FieldInput}
                               placeholder='Value of Mini Storage contents'
                               min="0" max="9999999999"
                               size="large"
                        />
                    </div>
                    <Button type="submit" bsStyle="primary" bsSize="large">
                        Submit
                    </Button>
                </form>
            </Col>
            <Col xs={12} md={2} />
        </div>
    )
};

ContactForm = reduxForm({
    // a unique name for the form
    form: 'contact'
})(ContactForm);

export default ContactForm;