How can I get my third party script to correctly function on my website?

When the user fills out my form and clicks on the button “Generate CV”. The HTML form should automatically download as a PDF to the users download folder.

Problem one:

I tried using this third party plugin but can’t get it to function correctly as when I click on the <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a> button nothing happens. How can I get this to work?

Inspect errors

Problem two:

How can I get this button <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a> to look like <input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV"> I did use the same class. However, I think that class information in bootstrap only applies to the <input> tag so how can I get around this issue?

Below is my current code

     <!-- Form-->
     <section class="module bg-gray text-center divider-bottom p-3">
        <div class="container">
           <div class="row">
              <div class="col-md-12">
                 <form id="contact-form" method="post" novalidate>
                    <div class="row">
                       <div class="col-md-4">
                          <div class="form-group">
                             <input class="form-control" type="text" name="name" placeholder="Name (Click Me)" required="">
                             <p class="help-block text-danger"></p>
                          </div>
                       </div>
                       <div class="col-md-4">
                          <div class="form-group">
                             <input class="form-control" type="email" name="email" placeholder="E-mail (Click Me)" required="">
                             <p class="help-block text-danger"></p>
                          </div>
                       </div>
                       <div class="col-md-4">
                          <div class="form-group">
                             <input class="form-control" type="text" name="subject" placeholder="Mobile Number (Click Me)" required="">
                             <p class="help-block text-danger"></p>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <div class="form-group">
                             <textarea class="form-control" name="message" placeholder="Education History (Click Me)" rows="12" required=""></textarea>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <div class="form-group">
                             <textarea class="form-control" name="message" placeholder="Previous Employers (Click Me)" rows="12" required=""></textarea>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <div class="form-group">
                             <textarea class="form-control" name="message" placeholder="Personal Skills / Hobbies (Click Me)" rows="12" required=""></textarea>
                          </div>
                       </div>
                       <div class="col-md-12">
                          <p></p>
                          <div class="text-center">
                             <input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV">
                             <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">Generate CV</a>
                          </div>
                       </div>
                    </div>
                 </form>
                 <!-- Ajax response-->
                 <div class="ajax-response text-center" id="contact-response"></div>
              </div>
           </div>
        </div>
     </section>
     <!-- Form end-->

Here is the location of where I put the third party script.

      <!-- Scripts-->
      <script src="assets/js/custom/jquery-3.2.1.min.js"></script>
      <script src="assets/js/custom/popper.min.js"></script>
      <script src="assets/js/bootstrap/bootstrap.min.js"></script>
      <script src="assets/js/custom/plugins.min.js"></script>
      <script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script>
      <script src="assets/js/custom/custom.min.js"></script>
</html>
</body>

FULL WEBPAGE CODE BELOW IF REQUIRED

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="">
      <meta name="author" content="">
      <title>CV expert | Developed by Liam Docherty</title>
      <!-- Plugins -->
      <link href="assets/css/plugins.min.css" rel="stylesheet">
      <!-- Animate CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
      <!-- Fonts -->
      <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600%7cPlayfair+Display:400i" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
      <!-- CSS -->
      <link href="assets/css/design.css" rel="stylesheet">
   </head>
   <body>
      <!-- GOOGLE AN -->
      <!-- Global Site Tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129603102-1"></script>
      <script>
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());

         gtag('config', 'X XV XV');
      </script>
      <!-- GOOGLE AN end-->
      <!-- Header-->
      <header class="header header-transparent">
         <div class="container-fluid">
            <!-- Brand-->
            <div class="inner-header"><a class="inner-brand" href="index.html">CVE</a></div>
            <!-- Navigation-->
            <div class="inner-navigation collapse">
               <div class="inner-nav">
                  <ul>
                     <li><a href="index.html"><span class="menu-item-span">Home</span></a></li>
                     <li><a href="about.html"><span class="menu-item-span">About Us</span></a></li>
                     <li><a href="services.html"><span class="menu-item-span">Services</span></a></li>
                     <li><a href="portfolio.html"><span class="menu-item-span">CV Maker</span></a></li>
                     <li><a href="contact.html"><span class="menu-item-span">Contact Us</span></a></li>
                  </ul>
               </div>
            </div>
            <div class="extra-nav">
               <ul>
                  <li class="nav-toggle"><a href="#" data-toggle="collapse" data-target=".inner-navigation"><span class="menu-item-span"><i class="ti-menu"></i></span></a></li>
               </ul>
            </div>
         </div>
      </header>
      <!-- Header end-->
      <!-- Wrapper-->
      <div class="wrapper">
         <!-- Hero-->
         <section class="module-cover parallax text-center" data-background="assets/images/apple-computer-desk-41227.jpg" data-overlay="0.85">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <h2>CV Maker</h2>
                     <p>Below represents a CV maker program which converts the form to a word file document.</p>
                  </div>
               </div>
            </div>
         </section>
         <!-- Hero end-->

         <!-- Form-->
         <section class="module bg-gray text-center divider-bottom p-3">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <form id="contact-form" method="post" novalidate>
                        <div class="row">
                           <div class="col-md-4">
                              <div class="form-group">
                                 <input class="form-control" type="text" name="name" placeholder="Name (Click Me)" required="">
                                 <p class="help-block text-danger"></p>
                              </div>
                           </div>
                           <div class="col-md-4">
                              <div class="form-group">
                                 <input class="form-control" type="email" name="email" placeholder="E-mail (Click Me)" required="">
                                 <p class="help-block text-danger"></p>
                              </div>
                           </div>
                           <div class="col-md-4">
                              <div class="form-group">
                                 <input class="form-control" type="text" name="subject" placeholder="Mobile Number (Click Me)" required="">
                                 <p class="help-block text-danger"></p>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <textarea class="form-control" name="message" placeholder="Education History (Click Me)" rows="12" required=""></textarea>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <textarea class="form-control" name="message" placeholder="Previous Employers (Click Me)" rows="12" required=""></textarea>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <textarea class="form-control" name="message" placeholder="Personal Skills / Hobbies (Click Me)" rows="12" required=""></textarea>
                              </div>
                           </div>
                           <div class="col-md-12">
                              <p></p>
                              <div class="text-center">
                                 <input class="btn btn-circle btn-outline-brand" type="submit" value="Generate CV">
                                 <a class"btn btn-circle btn-outline-brand" onclick="pdfmyform(this);" href="#">PDF this page!</a>
                              </div>
                           </div>
                        </div>
                     </form>
                     <!-- Ajax response-->
                     <div class="ajax-response text-center" id="contact-response"></div>
                  </div>
               </div>
            </div>
         </section>
         <!-- Form end-->

      <!-- Copyright -->
      <div class="footer-copyright text-center text-black py-3">© Copyright 2018 Handcrafted By Zeplur. All Rights Reserved |
         <a href="terms.pdf">Terms and conditions</a>
      </div>
      <!-- To top button--><a class="scroll-top" href="#top"><i class="fas fa-angle-up"></i></a>
      <!-- Scripts-->
      <script src="assets/js/custom/jquery-3.2.1.min.js"></script>
      <script src="assets/js/custom/popper.min.js"></script>
      <script src="assets/js/bootstrap/bootstrap.min.js"></script>
      <script src="assets/js/custom/plugins.min.js"></script>
      <script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script>
      <script src="assets/js/custom/custom.min.js"></script>
   </body>
</html>

Okay, so at a guess, you’re running this page locally? You are running it from a directory on your local computer, and not on a server (either local or remote). I can see that from viewing your errors:

file:///www.pdfmyform.com/pdfform?0...

Because you’re running it from a local filesystem, rather than a local server or a remote server, the first bit of that URL, the file:///, is what’s going on. Try hosting this on a server somewhere.

In a more esoteric language, you’re encountering a CORS error (Cross Origin Resource Sharing), because you’re trying to access pdfmyform via the file protocol, when CORS is only allowed via HTTP.