Config.js

const Config = {
  url: 'http://localhost:9001'
};
export default Config;

ContactForm.js

import React from 'react';
import axios from 'axios';
import { compose } from 'recompose';
import { Form, FastField, ErrorMessage, withFormik } from 'formik';
import * as Yup from 'yup';
import { SmallerContainer, CustomButton } from './common';
import { Wrapper, InputField, Center, Error, Text } from './styles';
import swal from 'sweetalert2';
import Config from '../Config';

require('dotenv').config();

console.log(Config.url);

const ContactForm = ({ errors, touched, isSubmitting }) => (
  <SmallerContainer contact tl className="text-center">
    <Text as="h3">fill in the contact form down below</Text>
    <Form method="post">
      <noscript>
        <p>This form won’t work with Javascript disabled!</p>
      </noscript>
      <Wrapper>
        <label htmlFor="email" aria-label="Your best email">
          E-mail:
          <InputField
            component="input"
            as={FastField}
            type="email"
            error={touched.email && errors.email ? 1 : 0}
            name="email"
            placeholder="Your best email:"
          />
        </label>
        <ErrorMessage component={Error} name="email" />
      </Wrapper>
      <Wrapper>
        <label htmlFor="message" aria-label="please insert your message">
          Message:
          <InputField
            component="textarea"
            as={FastField}
            error={touched.message && errors.message ? 1 : 0}
            name="message"
            textarea="true"
            placeholder="Your message here:"
          />
        </label>
        <ErrorMessage component={Error} name="message" />
      </Wrapper>
      <Center>
        <CustomButton type="submit" disabled={isSubmitting}>
          Send
        </CustomButton>
      </Center>
    </Form>
  </SmallerContainer>
);

const enhance = compose(
  withFormik({
    mapPropsToValues: () => ({
      email: '',
      message: ''
    }),
    validationSchema: () =>
      Yup.object().shape({
        email: Yup.string()
          .email('Please enter a valid email!')
          .required('Email is required!'),
        message: Yup.string().required('Message is required')
      }),
    handleSubmit: async ({ email, message }, { setSubmitting, resetForm }) => {
      // Here put the endpoint url you want to post your data to.
      const encode = data => {
        return Object.keys(data)
          .map(
            key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
          )
          .join('&');
      };
      await axios({
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        url: `${Config.url}/contact`,
        data: encode({
          email,
          message
        })
      })
        .then(data => {
          setSubmitting(false);
          resetForm();
          swal('Good job!', 'Your data is on the way!', 'success');
          console.log(data.message);
        })
        .catch(err => {
          console.log(err);
          setSubmitting(false);
          swal('Oops!', 'Something went wrong, please try again!', 'error'); // eslint-disable-line
        });
    }
  })
);

export default enhance(ContactForm);