• Tweet

• Tweet

My guess, you just did a Google search to find out how to customize your Infusionsoft order forms because the current option within Infusionsoft’s order forms is still evolving. Through the grapevine I have heard that an Order Form builder is on the way, hopefully by the end of 2012 :::fingers crossed:::

There are many ways to go about customizing your Infusionsoft order forms. Luckily for us, Infusionsoft does have a built-in mechanism (Configure Templates) to simplify this customization. However, the problem that still drives us all crazy is that you are very limited to what you can customize.

BEFORE YOU JUMP IN…
The following technique is far from “standard” in the world of code, however, it works, looks good, and is easy to apply to each of your Order Forms. It is recommended that you download and host a copy of the checkout button image (https://tek.infusionsoft.com/Download?Id=5510) on your own Infusionsoft application.

Paste the following code into the Source of template (see red arrow below):

 

<style type=”text/css”>
  <!–
  /* you have to place the style before and after the formbody in order
  for it to work properly */ /* this is for the page */ body { font-family:
  “Georgia”; background: #FFFFFF; } /* this is for the form */ #orderForm
  { width:750px; margin:0 auto; padding:10px; background: white; border:
  0px solid #0c1626; text-align: center; } /* this is for the black bars,
  Contact Information etc. */ .sale-header { font-size: 17px; font-weight:bold;
  background: transparent; color: #00AADB; } /* Center Req Contact info */
  .sale-label-req {text-align: left;} /* center non req info */ .sale-label
  {text-align: left;} /* for centering images */.centeredImage { text-align:center;
  margin-top:0px; margin-bottom:0px; padding:0px; }
  –>
</style>
<div align=”center”>
  <!– /*Uncomment to add header image*/ <img src=”http://www.mywebsite.com/images/header.jpg”/>–>
  <br />
  <hr size=”2″ width=”750″ />
  ~formbody~
</div>
<style type=”text/css”>
  <!–
  #orderForm { width:750px; margin:0 auto; padding:10px; background:
  white; text-align:center; border: 0px solid #0c1626; text-align: center;
  } .sale-header { font-size: 17px; background: transparent; color: #00AADB;
  } body { font-family: “Trebuchet MS”, sans-serif; background: #ffffff;
  }#Order { width: 750px; height: 200px; padding: 210px 200px 0; margin:
  0; border: 0; background: transparent url(https://tek.infusionsoft.com/Download?Id=5510)
  no-repeat center top; overflow: hidden; cursor: pointer; /* hand-shaped
  cursor */ cursor: hand; /* for IE 5.x */ }
  –>
</style>

That’s really it! All you have to do is paste the code (available in the link below) into a template, hit Save and then select it for every Infusionsoft order form you wish to customize. If you noticed, there is also code that can be uncommented in the middle allowing for a header image; this image should be less than 700 pixels wide.

Should you not know how to uncomment code, you can relax and forget all about that last sentence.

http://jivesystems.com/blog/wp-content/uploads/customize_your_infusionsoft_order_forms.txt

If you need additional help, leave a comment below and we will gladly assist.