@tehw0lf/contact-form
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.12 • Public • Published

    contact-form

    This provides a simple way to let your users contact you. The component takes as input an API-URL.

    Default is 'https://forwardmethis.com/tehwolf@pm.me' - please change it, as you will need to confirm the API access for the first email you will receive.

    Installation

    Peer Dependencies

    The following dependencies are needed:

        @angular/animations
        @angular/cdk
        @angular/common
        @angular/core
        @angular/flex-layout
        @angular/forms
        @angular/material

    Module

    If it's not added already, please run ng add @angular/material prior to adding this module. Run ng add @tehw0lf/contact-form in the workspace root of your angular application.

    Usage

    The contact form component takes an apiURL and an email as input. By default, this is set to ForwardMeThis and the email address is blank. You can set the variables on the component tag:

    <contact-form
      [apiURL]="emailBackendURL"
      [email]="yourEmailAddress"
    ></contact-form>

    In your component, set the emailBackendURL and yourEmailAddress properties. The naming of these variables is arbitrary:

    emailBackendURL = 'https://forwardmethis.com/';
    yourEmailAddress = 'my@mail.com'; //this is optional, if your API URL doesn't require an email address parameter

    This contact form will send a POST request to the API, containing the following data structure:

    {
      "name": "your entered name",
      "email": "your entered email address",
      "message": "your entered message"
    }

    You can of course use your own backend with this data structure, as the API-URL and E-Mail address can be overridden as shown above.

    Theming

    The colors of card background, button and text as well as the backdrop filter can be customized with optional input parameters:

    backgroundColor; //default: 'rgba(34, 34, 34, 0.75)';
    backdropFilter; //default: 'blur(50px)';
    buttonColor; //default: '#cc7832';
    buttonBackgroundColor; //default: ''
    buttonTextColor; //default: '#cc7832';
    labelColor; //default: 'lightgray';
    textColor; //default: 'lightgray';

    Development

    Serve

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    Build

    Run ng build contact-form to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build (e.g. when building to publish to npm).

    Running unit tests

    Run ng test to execute the unit tests via Jest.

    To Do

    Apply Material Design Extract CSS variables

    Contributing

    Contributions are welcome, although the library is still in an alpha stage. Feel free to open a PR and I'll have a look!

    Keywords

    none

    Install

    npm i @tehw0lf/contact-form

    DownloadsWeekly Downloads

    13

    Version

    0.0.12

    License

    MIT

    Unpacked Size

    94.4 kB

    Total Files

    46

    Last publish

    Collaborators

    • tehw0lf