Most Used Web Forms and How to Build Them With a Single App

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



Web Forms: Why (on Earth) Do We Need Them?



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



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.



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



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



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


http://blog.123contactform.com/

• 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?



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?



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.



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?



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)



http://www.123contactform.com/

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


Great resources for further reading

Luke Wroblewski, Web Form Design

Smashing Magazine on web form design

Formulate.com.au

Most Used Web Forms and How to Build Them With a Single App

Marketing

web form web forms

used web forms

shape web forms

email forms

longer forms

web form design

simple web form

single appweb forms