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

Uploaded on


More in: Marketing
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Webinar Most Used Web Forms And How to Build Them With a Single App Laura Moisei Brand Manager, 123ContactForm
  • 2. Most Used Web Forms And How To Build Them With a Single App 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 | | @123contactform Laura Moisei Brand Manager 123ContactForm @Laura_Moi_
  • 3. Most Used Web Forms And How To Build Them With a Single App 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 | | @123contactform
  • 4. Most Used Web Forms And How To Build Them With a Single App Web Forms: Why (on Earth) Do We Need Them? 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) IMAGE SOURCE: WWW.FRANKABOUTCROATIA.COM | | @123contactform
  • 5. Most Used Web Forms And How To Build Them With a Single App Anatomy of a Web Form 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. INCENTIVE: register, download, purchase TASK: fill in fields (e.g. text boxes, dropdowns, radio buttons, likert scales) ACTION - TASK COMPLETION: hitting the Submit button DATABASE: Import entries | | @123contactform
  • 6. Most Used Web Forms And How To Build Them With a Single App Trends That Shape Web Forms: Flat UI 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. INVOISSE.COM LAYERVAULT.COM BUILTBYBUFFALO.COM 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). | | @123contactform
  • 7. Most Used Web Forms And How To Build Them With a Single App 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. | | @123contactform
  • 8. Most Used Web Forms And How To Build Them With a Single App 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. PURESTRATEGIC.COM 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. | | @123contactform
  • 9. 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 | | @123contactform
  • 10. Most Used Web Forms And How To Build Them With a Single App Top Web Forms #1: 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. How can 123ContactForm help you create a great contact form? • 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 | | @123contactform
  • 11. Most Used Web Forms And How To Build Them With a Single App Top Web Forms #2: Payment Form 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? • 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) | | @123contactform
  • 12. Most Used Web Forms And How To Build Them With a Single App Top Web Forms #3: Event Registration 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. | | @123contactform
  • 13. Most Used Web Forms And How To Build Them With a Single App 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. How can 123ContactForm help you create a great online survey? • 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 | | @123contactform
  • 14. Most Used Web Forms And How To Build Them With a Single App Tutorial: How to Create a Form for WordPress Using 123ContactForm 1. 2. 3. Go to 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). Use the 3-steps form editor to shape your web form and then publish it on the web platform you need. (VIDEO TUTORIAL) | | @123contactform
  • 15. Thank You! Great resources for further reading Luke Wroblewski, Web Form Design Smashing Magazine on web form design Did you like this webinar? Send us your thoughts and suggestions for new topics to speak about by filling in this form: | | @123contactform