创建pdffrom html代码

时间:2017-02-14 12:09:49

标签: jquery html

我可以使用http://www.pdfmyform.com/

从html文件创建apdf

我只是使用

<script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script>

<a onclick="pdfmyform(this);" href="#">PDF this page!</a>

这很有效,但是我很难在我的表单上工作(所以在提交时它将pfd发送到服务器并填写了联系表格。有人可以帮忙吗?这是我的表格。

 <form class="well form-horizontal" data-toggle="validator" action=" " method="" id="contact_form">
<fieldset>

<!-- Form Name -->
<legend>TO BE COMPLETED BY THE INTERESTED PARTY</legend>

<!-- Text input-->

<div class="form-group">
  <label class="col-md-4 control-label">* Full Name:</label>  
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input data-minlength="5" id="first_name" placeholder="Full Name" class="form-control" data-error="There is a minimum of 5 characters" type="text" required>
    </div>
    <div class="help-block with-errors"></div>
  </div>
</div>

<!-- Text input-->

<div class="form-group">
  <label class="col-md-4 control-label" >* Postal Address:</label> 
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
  <input name="Address" placeholder="Address" class="form-control" data-minlength="6"  type="text" required>
    </div>
    <div class="help-block with-errors"></div>
  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label">* Post Code:</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
  <input name="zip" placeholder="Post Code" class="form-control" data-minlength="6"  type="text" required>
    </div>
    <div class="help-block with-errors"></div>
</div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label">* Mobile (numeric):</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
  <input name="phone" placeholder="07712345678" data-minlength="10" class="form-control" type="number" required>
    </div>
    <div class="help-block with-errors"></div>
  </div>
</div>
<div class="form-group">
  <label class="col-md-4 control-label">Home (numeric):</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
  <input name="phone2" placeholder="07712345678" class="form-control" type="number">
    </div>

  </div>
</div>



<div class="form-group">
  <label class="col-md-4 control-label">* Date of Birth: </label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
  <input name="dob" placeholder="" class="form-control" data-minlength="6" type="date" required>
    </div>
    <div class="help-block with-errors"></div>
  </div>
</div>

       <div class="form-group">
  <label class="col-md-4 control-label">* E-Mail:</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  <input name="email" placeholder="E-Mail Address" class="form-control"  id="email" type="email" data-error="Please enter a valid email address." required>

    </div>
       <div class="help-block with-errors"></div>
  </div>
</div>
       <div class="form-group">
  <label class="col-md-4 control-label">* Confirm E-Mail:</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  <input name="email" placeholder="E-Mail Address" class="form-control" data-match="#email" data-match-error="Email does not match." type="email"  required>

    </div>
       <div class="help-block with-errors"></div>
  </div>
</div>
       <div class="form-group">
  <label class="col-md-4 control-label">* Profession / Company:</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
  <input name="company" placeholder="Company" class="form-control" data-minlength="2" type="text" required>
    </div>
    <div class="help-block with-errors"></div>
  </div>
</div>
       <div class="form-group">
  <label class="col-md-4 control-label"> Notes:</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-list-alt"></i></span>
  <textarea style="height:100px" name="Notes" placeholder="Please detail all information which you feel is relevant (finance, experience, previous acquisitions, timescales, professional advice obtained, etc)" class="form-control" data-minlength="1" type="text"></textarea>
    </div>
    <div class="help-block with-errors"></div>
  </div>
</div>
<div class="form-group">
  <label class="col-md-4 control-label">* Sign:</label>  
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
  <input data-minlength="5" id="Sign" placeholder="Print Name" class="form-control" data-error="There is a minimum of 5 characters" type="text" required>
    </div>
    <div class="help-block with-errors"></div>
  </div>
</div>
<div class="form-group">
  <label class="col-md-4 control-label">Date: </label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
  <input name="date" placeholder="date" disabled="true" class="form-control" data-minlength="6" id="date" type="date">
    </div>
    <div class="help-block with-errors"></div>
  </div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Upon receipt of the completed form we will revert back to our client and obtain their instructions regarding discourse of information.</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label"></label>
  <div class="col-md-4">

  <a><button id="mainsub" class="btn btn-warning"> Accept Agreement <span class="glyphicon glyphicon-send"></span></button></a>
  </div>
</div>

</fieldset>
</form>

1 个答案:

答案 0 :(得分:0)

目前,您使用的网站不支持可填写表格PDF。您可以在FAQ部分查看。 http://www.pdfmyform.com/frequently-asked-questions/

您可以使用mpdf(https://mpdf.github.io/)或fpdf代替。我建议你去找mpdf。