• I am working in a site where the client wants to have a Purchase order form not attached with product management in the site, just an open form where the user just fills up what they need.

    I was wondering if there is a way to integrate contact form 7 within a table with the ability to generate rows if the user wants to add, in this case, another row of products.

    For now this is my base template.

    <div id="POform">
    
    <style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;border-color:#aabcfe;width: 100%;}
    .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#669;background-color:#e8edff;}
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#039;background-color:#b9c9fe;}
    .tg .tg-0ord{text-align:right}
    .tg .tg-ifyx{background-color:#D2E4FC;text-align:right}
    .tg .tg-s6z2{text-align:center}
    .tg .tg-vn4c{background-color:#D2E4FC}
    </style>
    <table class="tg">
      <tr>
        <th class="tg-031e" colspan="3">
    <div style="font-size:11px; padding:25px;">
    <div id="header-left" style="width:50%; float:left;">
    <p>Your Name (required)<br />
        [text* your-name] </p>
    
    <p> Company (required) </br/>
    [text* company]</p>
    
    <p>Your Email (required)<br />
        [email* your-email] </p>
    </div>
    <div id="header-right" style="width:50%; float:left;">
    <p>Phone Number (required)<br />
       [tel* telephone] </p>
    
    <p>P.O. Number (optional)</br>
       [text PONumber]</p>
    </div></div>
        </th>
      </tr>
      <tr>
        <td class="tg-031e">Product / Part #</td>
        <td class="tg-031e">Quantity</td>
        <td class="tg-031e">Extra Notes</td>
      </tr>
      <tr>
        <td class="tg-031e">[text Product1]</td>
        <td class="tg-031e"></td>
        <td class="tg-031e"><p>[textarea your-message] </p></td>
      </tr>
    </table>
    
    </div>
    
    <p>[submit "Send"]</p>

    Thanks

    https://wordpress.org/plugins/contact-form-7/

Viewing 1 replies (of 1 total)
  • Thread Starter designium

    (@designium)

    This is the updated code:

    <div id="POform">
    
    <style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;border-color:#aabcfe;width: 100%;}
    .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#669;background-color:#e8edff;}
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#039;background-color:#b9c9fe;}
    .tg .tg-0ord{text-align:right}
    .tg .tg-ifyx{background-color:#D2E4FC;text-align:right}
    .tg .tg-s6z2{text-align:center}
    .tg .tg-vn4c{background-color:#D2E4FC}
    </style>
    <table class="tg">
      <tr>
        <th class="tg-031e" colspan="3">
    <div style="font-size:11px; padding:25px;">
    <div id="header-left" style="width:50%; float:left;">
    <p>Your Name (required)<br />
        [text* your-name] </p>
    
    <p> Company (required) </br/>
    [text* company]</p>
    
    <p>Your Email (required)<br />
        [email* your-email] </p>
    </div>
    <div id="header-right" style="width:50%; float:left;">
    <p>Phone Number (required)<br />
       [tel* telephone] </p>
    
    <p>P.O. Number (optional)</br>
       [text PONumber]</p>
    </div></div>
        </th>
      </tr>
      <tr>
        <td class="tg-031e">Product / Part #</td>
        <td class="tg-031e">Quantity</td>
        <td class="tg-031e">Extra Notes</td>
      </tr>
      <tr>
        <td class="tg-031e">[text Product1]</td>
        <td class="tg-031e">[select quantityproduct1 include_blank "1 - 10" "10 - 25" "25 - or more"]</td>
        <td class="tg-031e"><p>[textarea notes-product1] </p></td>
      </tr>
    </table>
    
    </div>
    
    <p>[submit "Send"]</p>
Viewing 1 replies (of 1 total)

The topic ‘Generating multiple fields in the front-end’ is closed to new replies.