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

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 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 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-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.

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