HTML Formatting Contact Form 7 with Images

Contact Form 7 is most WordPress Developer’s go-to form for clients because a) it is free, b) it works and c) if you can write html and css, you can make it do whatever your client wants for a form.

This week I had a client send me a request for a form on their website that looked like this (formatted in a Word Document by the client) 

So I gave them this on their WordPress site:

So how did that happen? Here’s the code I used for the Contact Form 7 Form tab. The code for sending the information back on the Mail tab should be obvious.

Contact Form 7 Form Tab

**I have inserted (don’t copy) in the Contact Form 7 Shortcode because it is not, obviously, recognized by the code formating shortcode that I use 🙂

<p>First Name (required)<br> 
[(don't copy)text* FirstName class:mg-form-border placeholder "First Name" ]</p>
<p style="float:right;">
<img src="http://otcbi.com/impact/wp-content/uploads/2016/04/request-a-quotation300x200.jpg" alt="Request A Quotation" />
</p>
<p>Last Name (required)<br>
[(don't copy)text* LastName class:mg-form-border placeholder "Last Name" ]</p>
<p>Telephone Number (required)<br>
[(don't copy)tel* tel-655 class:mg-form-border placeholder "telephone number" ]</p>
<p>Email (required)<br>
[(don't copy)email* your-email class:mg-form-border placeholder "email address" ] </p>

<p>Company Name (required)<br> 
[(don't copy)text* CompanyName class:mg-form-border placeholder "Company Name" ]</p>

<p style="width:100%;">Mailing Address<br>
[(don't copy)text MailingAddress class:mg-form-border placeholder "Mailing Address" ]
<p>[(don't copy)text city class:mg-form-border placeholder "City" ]&nbsp;[(don't copy)text state class:mg-form-border class:mg-state placeholder "state" ]&nbsp[(don't copy)text zip class:mg-form-border class:mg-zip placeholder "Zip" ]</p>

<table class="mg-form">
  <tr>
     <td colspan="3">Part Number or Description</td>
  </tr>
  <tr>
     <td colspan="3">[(don't copy)text* PartNumber placeholder "Part Number or Description" ]</td>
  </tr>
  <tr>
    <td>Quantity Needed</td>
    <td>Required Date</td> 
    <td>Estimated Annual Usage</td>
  </tr>
  <tr>
    <td>[(don't copy)number* QuantityNeeded placeholder "Quantity Needed" ]</td>
    <td>[(don't copy)text* RequiredDate placeholder "Part Number or Description" ]</td> 
    <td>[(don't copy)number* AnnualUsage placeholder "Estimated Annual Usage" ]</td>
  </tr>
</table>

<!--additional 1-->

<table class="mg-form">
  <tr>
     <td colspan="3">Additional Part Number or Description</td>
  </tr>
  <tr>
     <td colspan="3">[(don't copy)text PartNumber1 placeholder "Part Number or Description" ]</td>
  </tr>
  <tr>
    <td>Quantity Needed</td>
    <td>Required Date</td> 
    <td>Estimated Annual Usage</td>
  </tr>
  <tr>
    <td>[(don't copy)number QuantityNeeded1 placeholder "Quantity Needed" ]</td>
    <td>[(don't copy)text RequiredDate1 placeholder "Part Number or Description" ]</td> 
    <td>[(don't copy)number AnnualUsage1 placeholder "Estimated Annual Usage" ]</td>
  </tr>
</table>

<!--additional 2-->

<table class="mg-form">
  <tr>
     <td colspan="3">Additional Part Number or Description</td>
  </tr>
  <tr>
     <td colspan="3">[(don't copy)text PartNumber2 placeholder "Part Number or Description" ]</td>
  </tr>
  <tr>
    <td>Quantity Needed</td>
    <td>Required Date</td> 
    <td>Estimated Annual Usage</td>
  </tr>
  <tr>
    <td>[(don't copy)number QuantityNeeded2 placeholder "Quantity Needed" ]</td>
    <td>[(don't copy)text RequiredDate2 placeholder "Part Number or Description" ]</td> 
    <td>[(don't copy)number AnnualUsage2 placeholder "Estimated Annual Usage" ]</td>
  </tr>
</table>

<!--additional 3-->

<table class="mg-form">
  <tr>
     <td colspan="3">Additional Part Number or Description</td>
  </tr>
  <tr>
     <td colspan="3">[(don't copy)text PartNumber3 placeholder "Part Number or Description" ]</td>
  </tr>
  <tr>
    <td>Quantity Needed</td>
    <td>Required Date</td> 
    <td>Estimated Annual Usage</td>
  </tr>
  <tr>
    <td>[(don't copy)number QuantityNeeded3 placeholder "Quantity Needed" ]</td>
    <td>[(don't copy)text RequiredDate3 placeholder "Part Number or Description" ]</td> 
    <td>[(don't copy)number AnnualUsage3 placeholder "Estimated Annual Usage" ]</td>
  </tr>
</table>
<p>[(don't copy)submit class:mg-submit "Submit" ]</p>

And then, of course, the CSS to make it all look right.

/*Contact Form 7*/
.mg-zip {
   width: 30px !important;
}
.mg-state {
   width: 30px !important;
}
.mg-textarea {
   width: 900px !important;
}
table.mg-form {
    border: 1px solid #213083 !important;
    margin: 0 -1px 24px 0;
    text-align: left;
    max-width: 800px !important;
    table-layout: fixed; 
    width: 800px;
}
.mg-submit {
   background-image: url("http://otcbi.com/impact/wp-content/uploads/2016/04/submit1.jpg");
   background-repeat: no-repeat;
   width: 100px;
   height: 34px;
   color: white;
   border: none;
}
#main img {
    background-color: white;
    padding: 1px;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    moz-box-shadow: none;
}
/* End Contact Form 7 */