Creating and customizing Web Forms within Infusionsoft is easy, but for those who are familiar with the older style of our Web Forms might not know how cool and easy it is to visually create forms to capture contact information from visitors to your website.
In the past, you had to create a Web Form, setup a follow-up sequence, setup your tags and then, when you felt ready, then customize the Web Form to reflect your brand and styles. Not anymore!
Most Infusionsoft users now create Web Forms from directly within the Campaign Builder. To do this, drag over a Goal and make sure that the goal is achieved when a contact “Submits a Web Form” (as indicated by a purple square with lines). When you double-click on your Goal, achieved when someone submits a Web Form, you’ll be presented with a very basic form that you can customize.
From here, you are now editing the Web Form that you’ll use with Infusionsoft. We start you off by asking for a visitor’s first name and email address. To change this and ask for more information, simply click the first name field and you can check off boxes for the additional fields.
Edit existing fields by simply clicking on them. For instance, click on the First Name field to add a Last Name to the form.
Now, if you want to collect Custom Fields (perhaps like someone’s Twitter name), you can simply drag over an “Other” field from the Field Snippets tab and place it onto the canvas. Choose the custom field and you’ll be set. You can change the label so it is user-friendly and easy to understand.
Next, we’re onto the colors and styles. You can easily customize the colors and size of your form by clicking on the Layout & Style button under the Format tab. From here, you can adjust the size of the Web Form and the text alignments. To change the colors and fonts, click on the Style tab (not pictured, but below the Layout section) and you will be provided options to change settings to your liking. You may also save and reuse these customizations later, too!
Finally, I like to customize the Submit button. To do this, simply click on the button on your form and you’ll be presented with several options. For more fun, toggle the Advanced Styling and Custom Size settings to make your button look bold and noticeable. The settings take effect when you click Save so you can see what the button will look like for visitors.
After a few minutes, I was able to create a great looking Web Form by using the Snippets built into the Web Form builder. In this example, all I really did was to drag a YouTube snippet in, added a couple dividers and a couple paragraph snippets. Using video to complement your Web Form can be a great way to communicate the benefits of signing up, your brand’s promise and examples of the content you’ll give them.
It’s now time to put the Web Form into action and embed it to your site. Just like how you would embed a YouTube video, you need to copy the code generated from the Web Form settings and paste it into your site wherever you would like it to appear. If you’re using WordPress, read this tutorial detailing how to integrate WordPress with Infusionsoft.
If you are a coder at heart and wish to use HTML and CSS, you can! Go ahead and grab the “HTML Code (unstyled)” version. All the CSS classes and IDs are ready to go to make any web designer smile. For most users, we recommend using the JavaScript snippet.
So, what makes a great Web Form?
Here are my recommendations for creating a very effective Web Form:
- Set proper expectations. Always let your visitors know what you will send them, how often you will send it to them and the benefit for signing up. This will build trust and will make sure that you don’t take anyone by surprise later and incur potential spam complaints.
- Keep it simple. It’s up to you, but the fewer questions you ask, the higher the conversion rate. Generally, the more questions you ask, the higher quality leads you’ll receive. Be thoughtful about how many questions you ask visitors, so you obtain only the necessary fields.
- Minimize unnecessary distractions. I’ve seen some creative uses of Web Forms that include extensive social sharing widgets and even animated GIFs. It’s your job to keep the distractions down and ensure that the visitor is focused on the benefits and expectations of filling out your form. The more noise you add, the less likely they will convert.
- Be judicious with colors. Colors can be used intentionally to drive higher conversions. Consider the emotions associated with colors the use of them on your Web Form. Above all, I recommend styling the Submit button so it is bold and noticeable.
- Make the Submit button text action-oriented. Nobody wants to “Submit” to you. Instead, make the text on your Submit button strong and affirmative by nature. Give that a shot to boost your conversions and try different messages to find the right mix to capture and convert your online audience.
Do you have a great looking Infusionsoft Web Form that you’d like to show off? Share a link to what you’ve made in the comments!
Read more about this post, How to Create Stylish Web Forms with Infusionsoft on The Infusionsoft Blog.