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.
Some basic knowledge of HTML and CSS
Access to your website’s page where you would like to insert the web form
Access to make changes to your website’s custom CSS
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.
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.)
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.
- 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)
<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.)
<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.
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.
#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.
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;
}
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!
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
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 20 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, worked with internationally known influencers, 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 and Public Relations chairs and currently serves as the 2020-2021 President-elect. 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.