How to Customize Infusionsoft Webforms on WordPress Websites

Max Classic
1

Topic: How to Customize Infusionsoft Webforms on WordPress Websites

Please index, tag or circulate this solution to others trying to use Webforms on WordPress websites.

I now have a better understanding of how to customize Infusionsoft Webforms on WordPress Websites. Also, I also have more insight on how to best use forms built using the Infusionsoft Official Opt-in Forms plugin for WordPress.

Observations:

1. Infusionsoft Webforms (in the Infusionsoft Campaign Builder) provide a tighter integration with the Infusionsoft platform than do forms build using the Infusionsoft Official Opt-in Forms plugin.

2. Infusionsoft Webforms: 1. Add a CRM contact record; 2. Inserts a "Forms Submission" row in the CRM contact record that provides details about the form submitted; and 3. Sends you an email informing you that a webform was submitted, the details in that webform, the webpage on which it was generated, and a convenient link to click directly to the contact record.

 3. In contrast, forms built using the Infusionsoft Official Opt-in Forms plugin provide only number "1", the CRM contact record. Opt-in forms trigger neither the "Forms Submission" row, nor the notification email. Nonetheless, I still like the Opt-in forms for what they were primary designed for: Popping up a window on a website page and grabbing a user’s email address.

I LIKE WEBFORMS, BUT THEY LOOK LIKE CRAP ON YOUR WEBSITE UNTIL YOU CUSTOMIZE THEM

Armed with the knowledge that webforms provide the tighter data integration, I began the process of figuring out how to customize Infusionsoft Webforms in my WordPress website, because simply copying and pasting the HTML code (per Infusionsoft’s instructions) without customizing the HTML code leaves your website looking like “crap”.

HERE’s the SECRET TO CUSTOMIZING INFUSIONSOFT WEBFORMS

First, copy-and-paste the HTML code into a text editor like Notepad++. Using Notepad++, you can actually SEE the code and find the HTML parameters you need to customize. I strongly recommend Notepad++ over Notepad, and you can download it free.

To customize the HTML parameters related to the name, email, and submit-buttom components, look for lines in the HTML code containing and

. And for the best HTML tutorial and reference in the world, go here: HTML Tutorial.

After making changes to the HTML, then copy-and-paste the customized HTML into the appropriate location in your website theme. Then simply tweak it until you get the look you need.

THE UGLY ERROR MESSAGE SCREEN

In Infusionsoft Webforms, even when you get your form looking the way you want, and functioning properly, the ugly error-message screen will require some attention. Error messages are triggered when a user omits a required field or incorrectly formats an email (Omits the “@’ or the '.” in an email address). When that happens, the user will be hijacked and taken to a very crude (ugly) error-message screen. If you can live with the ugly error-message screen, you are done.

Thanks,
Ken