WebinarMost Used Web Forms And How to Build Them
With a Single App
Laura MoiseiBrand Manager, 123ContactForm
www.123contactform.com | [email protected] | @123contactform
Most Used Web Forms And How To Build Them With a Single App
Laura MoiseiBrand Manager123ContactForm@Laura_Moi_
About me
• A journalist by heart and a PR person by experience (also worked in sales a couple of years)
• Currently in charge of coordinating the way world hears about 123ContactForm: from content writing to SEO, from social media to branding. Spreading the word around about how cool 123ContactForm is.
• Passionate about blogging, photography and documentaries
We’ll talk about…
• Web forms and their role in our day-to-day online life
• Trends that shape web form design and usability: flat UI, web vs. mobile, typography
• Top 4 web forms of all times: contact form, payment form (for orders or donations), event registration form, online survey
• Tutorial: How to set up a simple web form for WordPress using 123ContactForm
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
Web Forms: Why (on Earth) Do We Need Them?
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
IMAGE SOURCE: WWW.FRANKABOUTCROATIA.COM
In short, because they are the easiest method to pass information along while fighting spam. Forms and surveys are generally fast and easy to set up, and they come in handy even if you don’t own a website (email, QR code, social media).
We can use forms for everything, from grocery lists to marketing research. But most often they are seen as:
• Communication interfaces between site owners and site visitors, on-site search• Tools to keep our audience engaged• Handy, paperless means to stay organized
The 3 main types of form input we can receive:
• Data• File uploads• Payments
Web forms are your gateway to conversion,through which all of your leads must pass! (Hubspot)
Anatomy of a Web Form
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
TASK: fill in fields (e.g. text boxes, dropdowns, radio buttons, likert scales)
INCENTIVE: register, download, purchase
ACTION - TASK COMPLETION: hitting the Submit button
DATABASE: Import entries
Web forms bridge the type of interactions that involve a person filling in a combination of fields, clicking an action button (submit) and sending data to the form owner to be stored in a database. Email forms include an extra step: emailing a notification to the owner when the form gets submitted.
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
Trends That Shape Web Forms: Flat UI
Best practices:
1. Make sure your forms look inviting and users grasp their purpose. Flat UI makes it difficult to determine whether action is needed.2. Create a clear distinction between form elements. Buttons should look raised through vivid colors and rounded corners. By contrast, fields will look hollow thus fillable if you use paler colors, borders or subtle shadows. 3. Use buttons for primary form actions (e.g. submit) and links for secondary ones (reset, calculate price).
Flat UI is a design tendency largely inspired by Windows 8 and Microsoft’s Metro UI, favoring solid colors, no shadows and outspoken typography, resulting in a layout that looks modern and clean.
LAYERVAULT.COM
INVOISSE.COM
BUILTBYBUFFALO.COM
Trends That Shape Web Forms: Mobile vs. Web
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
Many websites nowadays feature both web and mobile versions, for accessibility. Mobile devices still bring constraints to user navigation within forms: screens are smaller, typing is slower, connection can fail at times. Thus, it’s important to know how to optimize forms for better mobile interactions.
Best practices:
1. Keep it short and simple, get rid of unnecessary fields, be as effective as you can. If you really need to use longer forms, break them into small steps.
2. Align field labels to the top for better visibility.3. Use enhancements: e.g. 123ContactForm provides IP Geolocation for automatically filling in address fields.
Trends That Shape Web Forms: Typography
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
Web fonts have always been an important component of a website’s interface. They help make it recognizable and can even define a brand. With the flat UI trend, typography has gained an even bigger accent. Resources and tools to help get started with fonts: Typekit, Font Squirrel Generator, Font Forge, Kernest, Google Fonts Directory.
Best practices:
1. Identify a combination of up to 3 fonts that define your brand. Use them within your form headings, labels, instructions and button text.
2. Make sure the fonts you choose for your web forms are consistent with fonts on the webpage you plan to publish forms on.
PURESTRATEGIC.COM
Create web forms and surveys as easy as 1-2-3!
In just 3 simple steps you can build your form, customize it to match your business needs and start collecting data.
• Over 500,000 users from 184 countries
• 22,5M delivered form submissions
More form tips and resources at Blog.123ContactForm.com
www.123contactform.com | [email protected] | @123contactform
• Visual drag & drop form editor with lots of fields to choose from: name, email, phone, text field, image field.
• File upload within the form (useful i.e. for receiving proposals, drafts or even CVs).
• Form styling to blend the image of any website and represent your brand
• Email notifications to multiple recipients to direct visitor inquiries to the appropriate person or department depending on their nature.
• Integration with Google Drive and other data management apps, to view form entries easier
Top Web Forms #1: Contact Form
How can 123ContactForm help you create a great contact form?
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
Apparently the simplest form of all, the contact form is a primary way to receive website feedback and inquiries. Data is gathered in an organized fashion, while fighting the spam that would slip in if you made your email address public. A contact form can wear many hats. If you work in education, you can turn it into a teacher feedback form. If you represent a business selling goods online, you can receive quote requests through it. And finally, you can even gather star ratings over any topic.
• Direct access to your funds by integrating the form with various payment processors, even several of them at the same time (e.g. Stripe and PayPal).
• Recurring payment to apply regular charges for subscriptions
• Highly secure data transfers and payments using SSL and a wide variety of protection measures
• Digital signature to authenticate the payment
• The option to interact with donors or buyers later on, through custom autoresponders or the integration with email apps (MailChimp, ExactTarget)
Most online businesses need to accept payments of some sort, whether they sell or franchise goods or services. At the same time, NPOs face the need to collect online payments too, as donations are the backbone of any nonprofit. This is why we need to offer our audience an easy and handy method to perform transactions. There are many online tools that help you receive payments (e.g. shopping carts). Probably the most accessible tool is a web form that can be published on any platform and helps your business or NPO collect funds directly into your bank account.
How can 123ContactForm help you create a great payment form?
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
Top Web Forms #2: Payment Form
When you need to organize any type of event, from group meetups and internal corporate activities to conferences and other public events, event registration forms bring a handy method to let people book their seat and even pay for event fees on-form, if they exist. You will be able to view entries dynamically and send various presentations or marketing materials as autoresponders to registrants.
How can 123ContactForm help you create a great event registration form?
• Collect event fees directly through the form, using the integration with most popular payment gateways: PayPal, Braintree, Stripe, Authorize.Net and more.
• Adapt the form design so that it reflects the image of your organization, acting as its foremost ambassador.
• Social sharing buttons on the form to let users post the form on their own Facebook walls, Twitter, Google +.
• Multi-language forms for guests abroad.
• SMS notifications with each new form submission, handy when you are on the run.
• Integration with Google Calendar.
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
Top Web Forms #3: Event Registration Form
• Field branching upon conditional logic with up to 10 conditions plus AND / OR operators
• Multi-page layout to make longer surveys easier to follow
• Data export to CSV or PDF, integration with data managements apps (Google Drive, Smartsheet, NationBuilder)
• Custom graphical reports: pie charts, bar charts, data tables
• Autoresponders upon rules
• Multi-channel compatibility – disseminate your survey everywhere
How can 123ContactForm help you create a great online survey?
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
Top Web Forms #4: Online Survey
Accurate insights are vital for any business decision. Whenever you need to gather data and draw statistical reports, an online survey is the best tool around. There is a wide variety of surveys you can think of, from business demographic surveys to customer satisfaction surveys or employee evaluation. You can export data to various business apps or share graphical reports to gain a better grasp over the tendencies.
Tutorial: How to Create a Form for WordPress Using 123ContactForm
1. Go to www.123contactform.com2. Create an account – Sign Up.
IMPORTANT: 123ContactForm offers a forever free Basic plan and Premium plans. Participants to this webinar who are not yet 123ContactForm users receive a free demo to test the service (we will follow up by email).
3. Use the 3-steps form editor to shape your web form and then publish it on the web platform you need.
(VIDEO TUTORIAL)
Most Used Web Forms And How To Build Them With a Single App
www.123contactform.com | [email protected] | @123contactform
Thank You!
Did you like this webinar?
Send us your thoughts and suggestions for new topics to speak about by filling in this form:http://www.123contactform.com/form-788360/Feedback-February-Webinar
www.123contactform.com | [email protected] | @123contactform
Great resources for further reading
Luke Wroblewski, Web Form Design
Smashing Magazine on web form design
Formulate.com.au