Web forms are a powerful tool to interact with your customers. You use them to capture lead data, collect feedback, and receive orders. Many times, it is the very first interaction that your customer has with you. A bad web form will cost you. A great web form is a gateway to success. Here are tools & tips, particularly useful for marketers who have limited resources and Marketing Teams of One.
Yay! Please check your email to confirm your subscription.
Oops! Something went wrong while submitting the form.
I'm a digital marketer turned SaaS founder. After working in performance marketing agencies, I created a platform to help marketing teams plan and track campaigns and promotions.
😲 What's a random fact about yourself that would surprise us?
We have an animal menagerie with 1 dog, 2 cats and 8 chickens.
🎤 If you had to speak for an hour right now, what topic would it be?
How to help marketers gain insights from Google Analytics.
Steve's surprising fact about one dog, two cats, and eight chickens has been verified. I have seen the photos, including a chicken standing on his keyboard while he is trying to work! Thanks for sharing, Steve.
Would you like to be featured in the Scrappy Reader Spotlight? Let me know!
You have worked hard to get quality traffic to your web landing page. It has cost time and money. You have designed and A/B tested a beautiful landing page that highlights your unique selling proposition and has a strong call-to-action. All that work to get a qualified person to fill out a web form. And poof! They are gone. You lost them because your web form is too hard, too long, confusing, or just doesn't work.
Here is a checklist to audit your web form to make sure you capture your hard-won leads.
☑️ Less is More
Are those required fields REALLY required? I know it's nice to have as much information as possible, but the fewer required fields, the more conversions. Look for alternatives. Can you follow up later and ask for the information? Can you append the data?
Instead of two separate fields for First Name and Last Name, use one field for Full Name. Are there other fields you can combine?
Get rid of extraneous copy. Keep the form design clean.
☑️ Boil the Frog Slowly
Start by asking simple, non-intrusive questions.
Ask for email, phone number, and payment information at the very end.
Use a multi-step form to entice the person through the process with a strong next step "call-to-action" button. See the Scrappy MarTech article "How to Create a Multi-Step Form."
☑️ Design Mobile First
Design your form for mobile. Check your web statistics. You'll probably see over 50% of your traffic is from mobile devices.
Think single column forms that are "finger friendly."
Make sure your form has field focus to visually identify what field is active for input.
☑️ Level Up the Submit Button
Ban the "Submit" form button. Make it a strong call-to-action.
Make the button text represent the value that the person gets by submitting the form, e.g. "Start Improving Conversions".
Use the first person, e.g. "Get My eBook".
☑️ Make Everything Crystal Clear
Ensure your field labels are simple and clear.
Use help text.
Make your error messages specific. Generic error messages are useless. "Your zip code needs to be 5 digits" is better than "There is an error".
☑️ Ensure Accessibility
Ensure your form is keyboard accessible and can be navigated easily without a mouse. This includes tab order.
Include any instructions at the beginning of the form. Text between form controls is usually skipped by screen readers.
Make sure you have labels associated with form controls in the code, not just visually.
☑️ Test & Watch
Test the form yourself from multiple devices.
Try to break the form by leaving fields blank and entering invalid data.
Set up "recording" with a tool like Hotjar to view how visitors are interacting with your form and where they are abandoning. You may find a certain field is problematic.
Cartfuel.io is a web form builder that allows you to easily accept payments for your product and create upsell funnels.
What You'll Love
Easy No-Code Set Up
Embed your web form on your own landing page by simply copying and pasting the embed code created by Cartfuel.
Works with any web builder that accepts embedded code (WordPress, Webflow, etc.)
Connect Your Stripe or PayPal Account
Use your own Stripe or PayPal account for payment processing. There are no extra payment processing fees from Cartfuel, unlike many other competing tools.
Your Own Branding
Customize your payment form to match your own branding.
Change font, text colors, call-to-action button format.
Add custom CSS if you need more style options.
Redirect to your own payment terms, thank you page, terms of service.
Payment Details
One time payment or recurring payment options
Ability to add additional fees (e.g. service fee)
Shipping field options
Tax handling
Countdown Timer
Create a sense of urgency with a countdown timer on your form.
Coupon Codes
Define multiple coupon codes that customers can apply to their order.
Integrations
Integrates with your favorite tools using Zapier.
Native integration with Kajabi and Rewardful.
What's Cool
You can set up one-click upsells as part of your payment process. After the customer purchases your product, you can add an upsell that allows the customer to purchase with just one click. For example, if you are selling an email course, you can add-on coaching services.
What You Can't Do
You can only create a form for one product at a time. This is not a "shopping cart" where you can have the customer add multiple items to check out (other than upsells).
You can create a form from an existing template or start from scratch. This example starts from scratch.
2. Enter your form fields.
You can enter a variety of field types for data collection. Text, URL, phone, email, address, sliders, multiple choice, and scales are just a few examples.
3. Edit the Theme Settings to select Guided Mode.
You have the option of showing the entire form on one screen or a "one-question-at-a-time" guided experience. Select "Guided Mode" for a multi-step form.
4. Finish Designing & Embed Form
Follow the design wizard and create your form to match your needs. Paperform allows you to configure payment collection, thank you pages, custom PDF downloads, and analytics.
To get the embed code, go to the "Share" option on the form designer.
You're done!
Advanced Tips
For a better user experience, you can use images for your multiple choice answers instead of text.
Also consider retargeting visitors who start the form, but did not finish. These visitors are more valuable than retargeting visitors who immediately abandon your page.
You have made my day by reading Scrappy MarTech. I love sharing the insights I have gained over the years, as well as the new tools that help us marketers.
Isn't the "scrappy reader spotlight" section great? Highlighting someone in our community each week helps us to get to know each other. I'm looking for people to spotlight, so please let me know if you want to be featured.
