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?
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', 'UA-129603102-1');
</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>