<!-- this should be placed in the HEAD -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/danbars/form-builder@0.1/dist/themes/default.imports.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/danbars/form-builder@0.1/dist/themes/default.css">
<!-- this should be placed anywhere you want the form to appear -->
<div id="form" class="fb-theme-default">
<form 
    action="https://www.form-data.com/fb" 
    method="post" 
    autocomplete="on">
    <h1>合作表單</h1>
    <input type="hidden" name="_charset_" />
    <section><h2>*為必填欄位</h2><div class="form-field form-text form-text required">
    <label for="fieldname37">姓名<abbr class="required" title="required">*</abbr></label>
    <div class="input-wrapper ">
        <input type="text" 
            id="fieldname37" 
            name="fieldname" 
            value="default_value"
            required
            
            
            placeholder="placeholder_text" > </input>
         
    </div>
        <span class="form-hint">field_hint</span>
</div><div class="form-field form-text form-email required">
    <label for="email45">Email<abbr class="required" title="required">*</abbr></label>
    <div class="input-wrapper with-icon">
        <input type="email" 
            id="email45" 
            name="email" 
            value="default_value"
            required
            
            
            placeholder="Please enter your email" > </input>
        <i class="fas fa-envelope" aria-hidden="true"></i> 
    </div>
        <span class="form-hint">We hate spam too. We will never spam you.</span>
</div><div class="form-field form-text form-tel ">
    <label for="phone22">電話</label>
    <div class="input-wrapper with-icon">
        <input type="tel" 
            id="phone22" 
            name="phone" 
            value="default_value"
            
            
            
            placeholder="Please enter your phone" > </input>
        <i class="fas fa-phone" aria-hidden="true"></i> 
    </div>
        <span class="form-hint">field_hint</span>
</div><div class="form-field form-text form-textartea required">
    <label for="message23">合作內容<abbr class="required" title="required">*</abbr></label>
    <div class="input-wrapper with-icon"">
        <textarea 
            id="message23" 
            name="message" 
            required
            
            
            placeholder="We would love to hear what you have to say" >default_value</textarea>
        <i class="fas fa-comment-alt" aria-hidden="true"></i> 
    </div>
        <span class="form-hint">field_hint</span>
</div><input type="submit" value="送出"
    id="undefined"></section>
</form>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.