Contact Custom data


So an non API person here but quick learner. I have created a bootstrap theme site through Dreamweaver and the contact part is like below.
In simple language or step by step what I have to do, how do I connect the submission data through to my Hubspot form?
I don’t want to use the embeded JavaScript form as doesn’t match the style I want

<div class="container clear">
        <div class="row">
          <div class="col-md-5 col-md-offset-0 col-sm-6 col-sm-offset-6 padd-80-top padd-80-btm">
            <h2 class="text-center text-big marg-40-btm">Discover</h2>
            <form class="contact-form contact-form-ninja">
              <div class="form-group">
                <input type="text" class="form-control" id="contact_name">
                <label for="contact_name">Name</label>
              <div class="form-group">
                <input type="email" class="form-control" id="contact_email">
                <label for="contact_email" class="form-label">Email</label>
              <div class="form-group">
                <input type="text" class="form-control" id="contact_company">
                <label for="contact_email" class="form-label">Company</label>
              <div class="form-group">
                <textarea class="form-control" rows="6" id="contact_message"></textarea>
                <label for="contact_message" class="form-label">Message</label>
              <button type="submit" class="button">Submit</button>
          </div><!-- .col-## -->
        </div><!-- .row -->
      </div><!-- .container -->