l

How to Format Infusionsoft Web Forms for Your Website

Customizing the Look of Infusionsoft Web Forms for Your Website

It’s no secret that we love Infusionsoft. For small and medium-sized businesses, it is the gold standard for CRM and Sales & Marketing Automation solutions.

The ability to integrate Infusionsoft web forms into your business website is a true must for any serious Infusionsoft user and business owner. This integration allows you to capture precious visitor information, conduct follow up campaigns, and above all – provide your potential clients with a safe and secure method for getting in touch.

It’s no secret, however, that the out of the box look of the Infusionsoft web form leaves a little something to be desired, which may deter some Infusionsoft users from taking advantage of this excellent marketing tool.

Below is a tutorial for integrating your Infusionsoft web form into your business website and styling it to align with your unique needs.

Here’s what we’re doing:

BEFORE YOU BEGIN: Some Basic Requirements for Implementing Infusionsoft’s Web Form Into Your Website

PRO TIP: The tutorial below is written for WordPress websites, however, can be followed for other types of sites as well.

Z

Some basic knowledge of HTML and CSS

Z

Access to your website’s page where you would like to insert the web form

Z

Access to make changes to your website’s custom CSS

Z

An already created Infusionsoft web form

Get Your Infusionsoft Web Form Code

1. In Infusionsoft’s campaign builder, double click your web form, go to the Code tab, select “HTML Code (unstyled)” and copy the code

2. Paste the code into a text editor

** This code for example purposes only. Be sure to paste your own code generated from your Infusionsoft application.


<form accept-charset=”UTF-8″ action=”https://XXXXX.infusionsoft.com/app/form/process/xxxxxxxxxxxxxxxxx” class=”infusion-form” method=”POST”><input name=”inf_form_xid” type=”hidden” value=” xxxxxxxxxxxxxxxxx ” />
<input name=”inf_form_name” type=”hidden” value=”Website Template&#a;Dashboard Form” />
<input name=”infusionsoft_version” type=”hidden” value=”1.67.0.54″ />
<div class=”infusion-field”>
<label for=”inf_field_FirstName”>First Name *</label>
<input class=”infusion-field-input-container” id=”inf_field_FirstName” name=”inf_field_FirstName” type=”text”  />
</div>
<div class=”infusion-field”>
<label for=”inf_field_LastName”>Last Name *</label>
<input class=”infusion-field-input-container” id=”inf_field_LastName” name=”inf_field_LastName” type=”text”   />
</div>
<div class=”infusion-field”>
<label for=”inf_field_Email”>Email *</label>
<input class=”infusion-field-input-container ” id=”inf_field_Email” name=”inf_field_Email” type=”text”  />
</div>
<div class=”infusion-field”>
<label for=”inf_field_Phone1″>Phone 1</label>
<input class=”infusion-field-input-container ” id=”inf_field_Phone1″ name=”inf_field_Phone1″ type=”text” ” />  </div>
<div class=”infusion-field”>
<label for=”inf_custom_WebformMessage”>Webform Message *</label>
<textarea cols=”24″ id=”inf_custom_WebformMessage” name=”inf_custom_WebformMessage” rows=”5″  >
</textarea> </div>
<div class=”infusion-submit”>
<input  type=”submit” value=”Submit” />
</div>
</form>
<script type=”text/javascript” src=”https://XXXXX.infusionsoft.com/app/webTracking/getTrackingCode”></script>

Clean Up the Code

Unfortunately, there’s a lot of unnecessary stuff going on in this code, so we’re going to clean it up a bit. Do this carefully, as one mistake can render your form useless.

3. Delete the indicated code below (Don’t freak out.  We do this all the time! But if you’re ready to tap out at the words “delete the code” drop us a note in the webform below and we are happy to help you out.)


<form accept-charset=”UTF-8″ action=”https://XXXXX.infusionsoft.com/app/form/process/xxxxxxxxxxxxxxxxx” class=”infusion-form” method=”POST”><input name=”inf_form_xid” type=”hidden” value=” xxxxxxxxxxxxxxxxx ” />
<input name=”inf_form_name” type=”hidden” value=”Website Template&#a;Dashboard Form” />
<input name=”infusionsoft_version” type=”hidden” value=”1.67.0.54″ />
<div class=”infusion-field”>
<label for=”inf_field_FirstName”>First Name *</label>
<input class=”infusion-field-input-container” id=”inf_field_FirstName” name=”inf_field_FirstName” type=”text”  />
</div>
<div class=”infusion-field”>
<label for=”inf_field_LastName”>Last Name *</label>
<input class=”infusion-field-input-container” id=”inf_field_LastName” name=”inf_field_LastName” type=”text”   />
</div>
<div class=”infusion-field”>
<label for=”inf_field_Email”>Email *</label>
<input class=”infusion-field-input-container ” id=”inf_field_Email” name=”inf_field_Email” type=”text”  />
</div>
<div class=”infusion-field”>
<label for=”inf_field_Phone1″>Phone 1</label>
<input class=”infusion-field-input-container ” id=”inf_field_Phone1″ name=”inf_field_Phone1″ type=”text” ” />  </div>
<div class=”infusion-field”>
<label for=”inf_custom_WebformMessage”>Webform Message *</label>
<textarea cols=”24″ id=”inf_custom_WebformMessage” name=”inf_custom_WebformMessage” rows=”5″  >
</textarea> </div>
<div class=”infusion-submit”>
<input  type=”submit” value=”Submit” />
</div>
</form>
<script type=”text/javascript” src=”https://XXXXX.infusionsoft.com/app/webTracking/getTrackingCode”></script>

Add to the Code

4. Add placeholder text into your form’s input fields (since we got rid of the labels in step 3).  This makes for a very neat looking form.  Obviously, the placeholder text you use will depend on the type of input field you have.

**Note, I’ve added in some extra spaces just to make the illustration a bit more clear.

<form accept-charset=”UTF-8″ action=”https://XXXXX.infusionsoft.com/app/form/process/xxxxxxxxxxxxxxxxx” class=”infusion-form” method=”POST”>
<input name=”inf_form_xid” type=”hidden” value=” xxxxxxxxxxxxxxxxx ” />
<input name=”inf_form_name” type=”hidden” value=”Website Template&#a;Dashboard Form” />
<input name=”infusionsoft_version” type=”hidden” value=”1.67.0.54″ /><input class=”infusion-field-input-container ” id=”inf_field_FirstName” name=”inf_field_FirstName” type=”text” placeholder=”First Name *” />

<input class=”infusion-field-input-container ” id=”inf_field_LastName” name=”inf_field_LastName” type=”text” placeholder=”Last Name *”   />

<input class=”infusion-field-input-container ” id=”inf_field_Email” name=”inf_field_Email” type=”text” placeholder=”Email *” />

<input class=”infusion-field-input-container” id=”inf_field_Phone1″ name=”inf_field_Phone1″ type=”text” placeholder=”Phone” />

<textarea  id=”inf_custom_WebformMessage” name=”inf_custom_WebformMessage”  placeholder=”How can we help you today? *” >
</textarea>

<input  type=”submit” value=”Submit” />

</form>
<script type=”text/javascript” src=”https://XXXXX.infusionsoft.com/app/webTracking/getTrackingCode”></script>

5. Add the following CSS classes to your fields for styling.  (Note:  you can name your classes anything you’d like, just as long as you apply them correctly.)

  • half-field (for all fields that will be half-width)
  • marR (for all half-width fields that are on the left side.  This will add a right margin so the two fields don’t butt up next to each other.)
  • infusion-textarea (for the text box)
  • infusion-submit (for the submit button)
<form accept-charset=”UTF-8″ action=”https://XXXXX.infusionsoft.com/app/form/process/xxxxxxxxxxxxxxxxx” class=”infusion-form” method=”POST”>
<input name=”inf_form_xid” type=”hidden” value=” xxxxxxxxxxxxxxxxx ” />
<input name=”inf_form_name” type=”hidden” value=”Website Template&#a;Dashboard Form” />
<input name=”infusionsoft_version” type=”hidden” value=”1.67.0.54″ />

<input class=”infusion-field-input-container half-field marR” id=”inf_field_FirstName” name=”inf_field_FirstName” type=”text” placeholder=”First Name *” />

<input class=”infusion-field-input-container half-field” id=”inf_field_LastName” name=”inf_field_LastName” type=”text” placeholder=”Last Name *”   />

<input class=”infusion-field-input-container half-field marR” id=”inf_field_Email” name=”inf_field_Email” type=”text” placeholder=”Email *” />

<input class=”infusion-field-input-container half-field” id=”inf_field_Phone1″ name=”inf_field_Phone1″ type=”text” placeholder=”Phone” />

<textarea  id=”inf_custom_WebformMessage” name=”inf_custom_WebformMessage”  placeholder=”How can we help you today? *” class=”infusion-textarea”>
</textarea>

<input class=”infusion-submit” type=”submit” value=”Submit” />

</form>
<script type=”text/javascript” src=”https://XXXXX.infusionsoft.com/app/webTracking/getTrackingCode”></script>

More Housekeeping

6. Remove the spacing between any half-width fields that you want on the same line (Ex. first name & last name should be next to each other without any spaces.  Same for email & phone.)

7.  Remove the spacing of the text area closing bracket so it is on the same line (otherwise you’ll end up with a weird “</br>” listed in your text box.)

<form accept-charset=”UTF-8″ action=”https://XXXXX.infusionsoft.com/app/form/process/xxxxxxxxxxxxxxxxx” class=”infusion-form” method=”POST”>
<input name=”inf_form_xid” type=”hidden” value=” xxxxxxxxxxxxxxxxx ” />
<input name=”inf_form_name” type=”hidden” value=”Website Template&#a;Dashboard Form” />
<input name=”infusionsoft_version” type=”hidden” value=”1.67.0.54″ />

<input class=”infusion-field-input-container half-field marR” id=”inf_field_FirstName” name=”inf_field_FirstName” type=”text” placeholder=”First Name *” /><input class=”infusion-field-input-container half-field” id=”inf_field_LastName” name=”inf_field_LastName” type=”text” placeholder=”Last Name *”   />

<input class=”infusion-field-input-container half-field marR” id=”inf_field_Email” name=”inf_field_Email” type=”text” placeholder=”Email *” /><input class=”infusion-field-input-container half-field” id=”inf_field_Phone1″ name=”inf_field_Phone1″ type=”text” placeholder=”Phone” />

<textarea  id=”inf_custom_WebformMessage” name=”inf_custom_WebformMessage”  placeholder=”How can we help you today? *” class=”infusion-textarea”></textarea>

<input class=”infusion-submit” type=”submit” value=”Submit” />

</form>
<script type=”text/javascript” src=”https://XXXXX.infusionsoft.com/app/webTracking/getTrackingCode”></script>

Integrating Multiple Infusionsoft Forms

8.  OPTIONAL – if you will be using multiple Infusionsoft web forms and want to style them independently of each other, add a unique CSS ID to each form.

**Just the first line of code where the change occurs is shown below.

id=”yourformid” accept-charset=”UTF-8″ action=”https://XXXXX.infusionsoft.com/app/form/process/xxxxxxxxxxxxxxxxx” class=”infusion-form” method=”POST”>

For users of the Divi theme, you can simply add the unique form ID to the ID field in the Advanced tab of a Text module instead.

Adding the Infusionsoft Web Form to Your Website

9.  Copy and paste your final code into the “Text” tab of your WordPress page (not the Visual tab.)

For Divi theme users, we recommend pasting the code into a Text module, not a Code module.

Styling the Infusionsoft Web Form with CSS

10.  Copy and paste the following CSS to your custom CSS file and modify the settings accordingly.

**The form ID (#yourformid) is optional only if you proceeded with step 8.

For Divi theme users, you can place this CSS in your child theme’s style.css file or in the CSS box in Divi – Theme Options – General – Custom CSS

For all users, DO NOT PASTE THIS CODE IN YOUR THEME’S STYLE.CSS or it will be overwritten on your next theme update.  If you don’t have a child theme or custom CSS option built into your theme, simply download the Really Simple CSS plugin and add it there.

** Note the media query at 640px which will cause the half-width fields to pop to full width as the screen gets smaller.
/*formatting Infusionsoft Forms*/
#yourformid .infusion-field-input-container, #yourformid .infusion-textarea {
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top:10px !important;
}

#yourformid .infusion-textarea {height:200px;}

#yourformid .half-field {width:49% !important;}
#yourformid .marR {margin-right:2% !important;}

#yourformid .infusion-submit {
color: #ffffff !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: #4fb7ca !important;
border: 2px solid #f5f5f5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
float:right;
}

#yourformid .infusion-submit:hover {
background: #eee;
color:#4fb7ca;
padding: 6px 20px !important;
}

@media only screen and (max-width:640px) {

#yourformid .half-field {width:100% !important;}
#yourformid .marR {margin-right:0% !important;}

}

Customizing the CSS to Your Needs

In order to make changes to the form styling (like background color, font colors, sizes, etc…) you will need to know (or at least recognize) a little bit of CSS for the values you’d like to change.

For example, let’s say we want to change the background color of the submit button. Here’s the CSS for the submit button with the background color noted.

#yourformid .infusion-submit {
color: #ffffff !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: #4fb7ca !important;
border: 2px solid #f5f5f5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
float:right;
}
To change the background color to black, simply replace the value #4fb7ca with the value for black #000000.

Last Minute Notes About Formatting Infusionsoft Web Forms

  • If you aren’t familiar with CSS and HTML, we strongly recommend sharing this post with your website designer/developer to implement the changes for you as just one small mistake may cause the form not to function properly
  • Always be sure to test the form to ensure it is collecting information as expected
  • When testing the form, it’s always good practice to ensure any campaign sequences attached to the form goal are working appropriately as well
  • Don’t forget to ensure your form is published prior to copying the form code from Infusionsoft

Need Some Help With Formatting Infusionsoft Web Forms?

If that tutorial made your head explode, no worries. Give us a call or drop us a note in the contact form below and we are happy to help you out!

Maintain

GET IN TOUCH

Professional Website Design, Maintenance and Lead Nurturing to Grow Your Business

Creative Designs that Convert. Worry Free Maintenance. Marketing Automation.

Complimentary Consultations

 




Jessica Dohm

Jessica Dohm

Founder, Dohmain Designs

About the Author

Jessica is the Director of Digital Marketing and Owner of Dohmain Designs. She is a small business sales and marketing expert specializing in business growth through intelligent website design and sales & marketing automation.

Jessica is a Certified Infusionsoft Partner, marketing automation and CRM expert with over 15 years of professional sales and marketing experience. In 2011, she combined that experience with innovative website design and created Dohmain Designs. She has worked with biotech giants, overseen the digital marketing for a popular Discovery Channel hit TV series, and helped hundreds of clients grow their business. Prior to creating Dohmain Designs, Jessica worked in the fast-paced biotech sector focusing primarily on technical sales and marketing, as well as providing complicated sales-focused CRM training across various disciplines.

Jessica is a member of her local Rotary Club where she has previously served as the Membership co-chair and currently serves as the Public Relations chair. Jessica truly believes in the "Service Above Self" Rotarian philosophy and strives to dedicate her time and talents to helping others, both in her personal and professional relationships.

She is located in the Minneapolis / St. Paul area and works with clients all across North America. If you'd like to get in touch with Jessica, simply complete the contact form below.

Infusionsoft Certified Partner

LET'S BUILD YOUR DREAM
BUSINESS TODAY.

We are located in the Minneapolis / St. Paul area and service clients all across North America. If you are looking for help growing your business with customized digital marketing solutions, talk with us.

612-719-0027

info@dohmaindesigns.com

Request a marketing automation or website consultation

Are you ready to learn more about growing your business?

Appointments available Monday - Friday.

Want Handy Infusionsoft Tips, Tricks and Tutorials Delivered Right to Your Inbox?

Sign up today!

You're in! Please check your inbox to confirm your subscription. If you don't see an email within a few minutes, please check your spam/promotions folder.

Share This