Banhawy / custom-contact-form

customisable-contact-form

a simple but highly customisable react contact form component

First...head to the DEMO and check out how it works!

click here!

Install

npm i customisable-contact-form

you might also need to install peer dependencies

npm i styled-components react-hook-form

How to use!

After checking out the demo make sure you copy your code snippet at the end of the page

Import what you need from the package - if you don't need a last name component then don't import it!!!

import Form from customisable-contact-form import {Heading, FirstName, LastName, Email, Message, SubmitButton} from 'customisable-contact-form

Grab the code and paste it into your project!

Next - use it in your application!

function example() {

    return (
      <Form theme={
        buttonBackgroundColor = "red",
        }
      <Heading title={'Hey guys!}/>
      <FirstName/>
      <LastName/>
      <Email/>
      <Message/>
      <SubmitButton buttonTitle={'Send'}/>
    />
    )
}

Config

Please remember that theme accepts an Object and can accept the following parameters!

const theme = {
  primaryColor,
  primaryFont,
  buttonLetterSpacing,
  buttonPadding,
  buttonBackgroundColor,
  buttonFontColor,
  headingBackgroundColor,
  headingBorderRadius,
  headingSize,
  headingColor,
  inputBackgroundColor,
  inputBorderRadius,
  inputBorderWeight,
  inputBorderColor,
  formPadding,
  formBorderRadius,
  formBorderWeight,
  formBorderColor,
  backgroundColor',
  title,
  fontWeight,
  width,
  headingBorderBottom,
  headingBorderColor,
  messageInputHeight,
  buttonHoverColor'
}

remember all of these fields are OPTIONAL and will revert back to the default if left untouched!

Contributions

To contribute please refer to the Contributing.md

License

MIT © ritammv