News dév web

It’s that wonderful time of the year. We get together with family and we eat too much. We also come across some deals in WordPress space that are simply too good to pass up.

You don’t have to stand in line (did we mention it’s supposed to rain) for hours on end either. After this, you barely have energy enough to rush to the aisle with your Black Friday deal.

Are you looking for deals for designers and developers? You can get the deal you want from wherever you happen to be sitting. This is a deal that includes tools and discounted themes, classes, and more.

Any of the following could be just what you need to get you settled firmly into the holiday spirit!

Elementor’s plans are already a good deal. At 25% off, we’re talking about a very, very good deal when you take into account everything this web design tool has to offer. That’s your Black Friday bonus. There’s another bonus you get with Elementor that isn’t tied to any special promotion.

You’ll appreciate that extra bonus when you start creating websites with Elementor and find you can build what you want without getting “stuck” in a theme’s design. You’ll never have to write code either.

Elementor features crazy-fast performance, it works with any template, and you get all the benefits of live, frontend editing. Your workflow will speed up significantly, and even more so it you opt for the Pro version with its visual form builder, form integrations, menu builder, and custom CSS features. Elementor is developer friendly too!

The basic plan for this open source page builder is free, but this is a great time to take advantage of one of Elementor’s souped-up plans which you can get at a discount.

The Visual Composer drag and drop editor is a standard feature in many if not most WordPress website builders on the market today. That alone speaks volumes about VC’s ease of use, performance, and overall quality.

Users of other website design and developer products that utilize the VC plugin certainly appreciate what it can do for them, but it’s nothing like what the Visual Composer Website Builder could do for them and can do for you. 50% off of any quality product is a good deal, and it’s even a better deal with a premium product like this one.

Visual Composer works with any WordPress theme, page, or post. No coding skills are necessary, and you get unlimited access to the Visual Composer Hub, a cloud-resident marketplace chock full of templates, design elements, and extensions. This website building tool comes with plenty of advanced design options, and hundreds of design elements and templates for landing pages, business websites, portfolios, and on and on.

The MapSVG WordPress plugin is the last mapping plugin you’re ever likely to need. Everything is there, Google maps, custom interactive maps, image maps, and a host of customizing and feature-creating tools and applications.

This Black Friday offer gives you more than an impressive 30% discount. It gives you the ability to turn any vector or JPEG/PNG image into an interactive map.

“Interactive” barely describes it. With this plugin you can show popups, enable regions of a map to work as links, visualize data with different shades of color on different regions of a map, add your own artwork to a map, and much more.

With several map types and styles and all those custom features to work with, map-making will never be a chore, you can give your websites a heavy dose of pizzazz and have plenty of fun in the process.

Don’t miss out on this opportunity to save big time on Mobirise Website Builder’s complete website builder kit. You’ll instantly get more than 1,500 website blocks in 35 themes/extensions for Bootstrap4 and Google AMP from which you can create beautiful, 100% mobile-friendly, lightning fast websites.

It’s all drag and drop, you’re not tied to any platform, and you can host anywhere. This offer ends November 25, 2018.

Black Friday isn’t only about saving some cash. There’s some state-of-the-art products waiting for you, and Visme is one of them. Use the discount code THANKS19 when upgrading to Premium and save 30% off of any Individual or Business Plan.

This all-in-one visual communication tool is the only one of its kind you’ll ever need; especially if your goal is to translate boring data into stunning charts, reports, social media graphics, and more but you’re slightly challenged when it comes to design skills.

Your Black Friday moment to shine is here – and for only $29. MOVEDO is a creative, multipurpose WordPress theme handcrafted with awesomeness in mind. Features include ultra-dynamics parallax, super-crisp moldable typography, and other cool tools and techniques to help you break free from the tyranny of sameness.

Move your mouse and the world moves with it. With MOVEDO, your design world will never be the same after this Black Friday has come and gone!

Savah is an all-in-one platform for prototyping and design collaboration that’s a super choice for freelancers and small teams. Savah will also automate and speed up your design approval workflows process. Sync your design with you Sketch and play offline prototypes on the Savah mobile app.

Savah offers a free 3-project plan and three paid plans. Any of the paid plans can be yours at a 50% discount on Black Friday.

Conclusion

When you come across Black Friday specials like these, you might be tempted to grab one of each. There would be some redundancy involved of course; quite a bit of it in fact.

You can’t make a bad choice, however. A good choice might involve selecting a premier website builder. It should come in combination with the innovative mapping application. We’re not being partial, but sometimes two products can give you way more than enough.

There’s no problem with that (apart from lousy aesthetics), right? Wrong. Because only Netscape Navigator knew what to do with <blink>, and only Internet Explorer knew what to do with <marquee>.

They were modifying a standard so that it would only run with their software.

They were trying to build a monopoly.

The quest for domination

Microsoft famously coined the phrase “embrace, extend, extinguish” to describe their strategy for dominating markets where competitors benefited from open standards.

Here’s an example of how it played out.

Back in the day, the most powerful PC software package was Lotus 1–2– 3. It was the classic killer app for the IBM PC and Microsoft’s MS-DOS operating system.

To overcome Lotus, Microsoft knew it had to embrace what made the product unique. This meant it had to load Lotus files and the macros that came with them. Enter Excel, a spreadsheet program that initially ran on Macs.

The functionality of Excel was as similar to Lotus as it could be without being a blatant rip-off. So close, in fact, that people could switch from Lotus to Excel with minimal pain.

What’s more, Microsoft used the graphics capabilities of Macs to equip Excel with a cool GUI. This was a leap ahead of standard MS-DOS packages like Lotus 1–2–3.

Next, Microsoft extended by creating Office: the holy trinity of Excel, Word, and Powerpoint, all running together on Windows. By 1995, these programs were working together well, and although there were a number of word processors to choose from, there weren’t any compelling competitors for Excel on Windows.

Microsoft sharpened their competitive edge with company discounts and clever Office 95 marketing, and as a result, most major businesses were adopting it as their standardized software suite?—?and Excel was part of the bundle. No need to buy a standalone package like Lotus 1–2–3.

Meanwhile, Symphony?—?the Lotus integrated package for MS-DOS that aimed to compete with Office?—?never prospered and was eventually abandoned. Microsoft had officially extinguished Lotus 1–2–3.

They wanted Office to become the gold standard for productivity software. And they succeeded. But not long after establishing the dominance of their desktop operating system, Microsoft realized that another challenge was looming.

The World Wide Web was becoming wildly successful, to an extent that few people had foreseen.

Not only could people browse websites that were outside Microsoft’s control, but Netscape introduced the JavaScript scripting language which allowed developers to write code that ran in the browser. In effect, Netscape was inventing a new operating system, distributed between the client-side browser and the remote server.

Even worse, content on the web was platform-agnostic: browsers worked just fine on Macs and Unix as well as Windows, so an application that ran in the browser would rip open the Microsoft business model.

In order to get a piece of the action, Microsoft launched Internet Explorer (IE) in 1995 as a direct competitor to Netscape Navigator. Initially, it only had a tiny market share: less than 10% by the close of 1996. So this was more of an air kiss than a full embrace of the internet.

Things heated up with the release of IE3, bundled as a free component of Windows in 1996, and integrating a number of apps that were part of the Microsoft ecosystem: an internet mail client (later to become Outlook Express), an address book, and the Windows Media Player. IE4 continued the extend theme by bundling programs for the chat and video conferencing.

At the same time, Microsoft re-engineered the Windows desktop look and feel to make it more like browsing a web page. How did Netscape Navigator fit into this cozy set up?

Not at all?—?it functioned increasingly worse on the Microsoft operating system. By the end of the decade, Internet Explorer had 86% of the browser market.

– Game over for Netscape.

Today, Microsoft is working hard to shed its ‘evil’ reputation, contributing to open source and supporting open standards.

Not only did Gmail blow Hotmail and Yahoo Mail out of the water, but it was also the first app with the potential to replace conventional PC software.

According to Georges Harik, who was responsible for most of Google’s new products at the time:

“It was a pretty big moment for the Internet. Taking something that hadn’t been worked on for years but was central, and fixing it.”

Google had officially extended email. And, while they didn’t extinguish other email providers entirely, they certainly came close.

Then there’s AMP. The Accelerated Mobile Pages Project (AMP) is a technology that enables web pages to load more rapidly on mobile devices.

AMP was originally targeted at news publishers, to compete with Facebook’s Instant Articles, but it has now far outstripped the latter, after being adopted by platforms such as Reddit, Twitter, and LinkedIn

As a strategy, AMP is Google’s most brazen. It serves as a vehicle for routing users through the Google Content Delivery Network even if they’re reading content from other websites. Sites that don’t adopt AMP get pushed out of Google mobile search results and into oblivion.

Or, extinguished.

There’s also the infamous case of Google Reader, which dug the grave for RSS (Rich Site Summary).

RSS’s decline was evident before Google axed it, but killing Reader dealt a massive blow to any of RSS’s remaining momentum. Google said themselves they wanted to consolidate users onto the rest of their services?—?none of which support any open syndication standards.

Tech writer Ed Bott summarizes eloquently:

The short life and sad death of Google Reader tells a familiar story of how Google swept into a crowded field, killed off almost all credible competition with a free product, and then arbitrarily killed that product when it no longer had a use for it.

PDF was a proprietary format controlled by Adobe until it was released as an open standard in 2008. When it was published by the International Organization for Standardization as ISO 32000–1:2008, control of the specification passed to an ISO Committee of volunteer industry experts. In 2008, Adobe published a Public Patent License to ISO 32000–1 granting royalty-free rights for all patents owned by Adobe that are necessary to make, use, sell, and distribute PDF compliant implementations.

PDFs have a feature that allows forms to be submitted. This feature previously worked on all PDF viewers (such as Adobe Acrobat and Apple Preview). That is until Chrome started their own viewers for PDF files.

As Google’s browser gained market share (now hitting over 60% in the usage stakes), most people began viewing PDFs in Chrome’s native PDF reader. But, here’s the kicker: Chrome doesn’t support all of PDF’s features.

For example, my company, JotForm, has a feature called fillable PDF Forms. It lets you create PDF forms, which you can submit.

So, forms created with Adobe or JotForm’s PDF tool often don’t work on Chrome. We have to instruct people to use Adobe Acrobat instead, which creates needless friction.

In a nutshell, Google’s behavior prevents us from investing more deeply in the PDF Forms.

Our feature is being extinguished before our eyes.

So all of this begs the question:

Does Google really support open source?

Google vs. Apple

In 1995, it was Microsoft vs. Netscape.

In 2018, it’s Google vs. Apple.

The only difference lies in strategy. Google is playing the long game to take Apple down.

Rather than create products that are a dramatic improvement on Apple’s, they make them almost-as-good, or equally good?—?and cheaper.

Take Chromebooks. They aren’t as slick and speedy as Macbooks. But they offer similar usability?—?and you can buy three for the cost of one iPad. Plus, they’re brilliantly marketed.

Or Android. It’s as close a replica to iOS as you can imagine.

Or Pixel. Compared to the iPhone, it has a better camera, faster charging, smoother performance, and a more useful digital assistant, for a lower price.

Google is extending with their growing selection of products, including an Amazon Echo competitor, a smart router, TV, a VR headset, and a list of nest devices. Although these products will work mostly with iOS devices, they will work better with Android phones, and/or the Pixel.

All of these factors make migration look increasingly more promising. Apple has been cutting manufacturing costs while pricing its products ever higher, which means the user experience has plummeted.

Not to mention the scandal that erupted when we learned that Apple deliberately slows older products in a bid to encourage users to upgrade.

All of these factors lay fertile ground for Google to overtake Apple.

In fact, Apple customer loyalty is arguably the only real obstacle in Google’s way. But if enough people get frustrated with Apple’s pricing strategy, it could signal the end of Apple’s reign as we know it.

The drive for innovation

Twenty years ago, the browser wars were raging.

There was stiff competition?—?and that was a good thing because it prevented a monopoly.

With competition comes innovation. In fact, this period of intense rivalry led to the web we have now.

But today? The startup culture is less “what can we build next?” and more “what’s our exit strategy?”

The Big Tech Five continue to swallow up smaller companies. And as their monopoly grows, I’d argue that innovation is dwindling.

Openness and added value are being sacrificed at the altar of revenue and market share. And Google is at the forefront of this. Most recently, Chrome announced their “most controversial initiative yet”: fundamentally rethinking URLs across the web. Without a URL, the only way to access a page is via Google.

Ed Bott compares Google to Godzilla:

… sweeping through the landscape and crushing anything in its path because few startups can compete with a free product from Google.

And he’s right. Google’s convenience and power are overwhelming. But we can’t let that blind us to the reality of what they’re doing.

However you look at it, embrace, extend, extinguish is pivotal to Google’s strategy. Granted, no one in Google is sending explicit instructions as Bill Gates once did, but they don’t need to?—?the end result is the same.

EEE certainly looks different today than it did in 2000; it’s subtler, friendlier, more politically correct.

But it’s just as dangerous. The war isn’t over. We must fight to diversify the internet, uphold open standards, and stamp out monopoly.

That means paying for something should be the easiest part of the whole experience but poor payment systems continue to result in a loss of billions of dollars for businesses.

A successful payment experience requires a clear path that users can navigate through smoothly. After all, payment forms are the digital equivalent of a physical sale terminal in a shop or restaurant. So, it’s vital that they are slick, quick and efficient: no queueing, no obstacles, no errors.

Creating a payment form used to be a tedious headache of a task, especially for startups and small businesses.

But today’s tools empower users to set up a powerful, beautiful payment form integration in minutes — without a single line of code. Plus, you don’t have to pay additional fees for transactions.

Wait — what is a payment form?

It’s the digital version of a cash desk. It authorizes online payment, validates the user’s details, ensures the funds are available and pays you.

What can you do with payment integrations?

The options are (almost) endless. First and foremost, you can sell products or services. You can also apply complex calculations to these sales, such as adding taxes and shipping costs or subtracting coupons.

You can create order forms for a single or multiple products as well as for collecting payments of a fixed amount. You can also make these payments recurrent with a subscription service.

Here is an example of a subscription form built using JotForm Cards templates

Payment forms can be used to collect donations as well.

Donation Form — Card Form Layout
How do you design smarter payment forms?

Here are 5 payment practices we’ve found helpful for our 4.2 million users at JotForm, the online form builder company I work at.

1. Keep it simple

Numerous studies have concluded that visually complex design is seen as generally unappealing.

And psychologically, we feel inclined to interact with a page that’s emptier.

The length of your form also matters. For instance, JotForm’s Classic Forms display all the questions, plus the payment section, on one page. This set-up works perfectly for some of our users, especially in the case of shorter forms.

JotForm — Classic Form

But when a larger amount of detail is required, lots of information on one page can feel overwhelming.

This is one of the reasons we built JotForm Cards as an alternative to Classic Forms. It has a one-question-per-page layout: nothing is displayed on the page apart from the question and the commands.

Product Order Form

As soon as the user has completed the form, they move smoothly onto the payment.

Both types of forms shine under different circumstances. Whatever form option you choose, there should be plenty of white space and no unnecessary fields.

2. Offer multiple methods of payment

Have you ever finished a meal only to be informed the restaurant only accepts cash? Instead of digesting your food, you have to walk to the nearest ATM or ask your friend for a loan. Annoying.

We humans are always looking for ease and convenience, especially when deciding whether or not to buy something.

And choice — whether or not we need it — matters to us subconsciously. Humans value the ability to make decisions for themselves, which is why flexibility is something to prioritize.

The same logic applies when it comes to offering your customers multiple payment options on your order forms.

Payment forms are a bit like obstacle courses. Every (metaphorical) hoop to jump through and wall to climb slows the user down, making them less likely to finish.

Some obstacles are avoidable: like arbitrary formatting rules or password requirements. Some of them — like typos — aren’t so easily avoided.

With JotForm Cards, we try to reduce these accidental setbacks. For instance, it will recover the email address of a user who has entered the domain name wrong e.g., john@gnail.com should be john@gmail.com.

And when a general error has been made — like a missed field or incorrect input — it warns users with a shaking micro-animation.

The quicker a user progresses to the finish line, the more likely they are to cross it by completing the payment.

Fewer delays = quicker forms.

Quicker forms = more conversions.

It’s a win-win.

4. Ask for less information

Optional fields are the enemy of conversions.

Baymard Institute analyzed checkout forms and found that a too long checkout process is one of the most significant reasons users abandon a purchase, with the average checkout containing 15 form fields.

And a massive 50% of sites ask for the same information twice, which guarantees dwindling attention spans and irritation.

Asking for information with all content displayed in easily-digestible chunks can be helpful.

5. Prioritize security

We want to feel safe and secure in the places we pull out our wallets. So, smart businesses go to great lengths to make their customers feel comfortable from the moment they walk through the doors.

Payment forms are no different. When users are expected to enter sensitive information like credit card details, they’re hyper-sensitive to anything that seems suspicious:

A recent study revealed 17% of shoppers left a page without paying due to security concerns.

Clear, efficient and professional payment forms put users at ease. Anything that looks DIY will have the opposite effect.

That’s why you should be careful when building a payment form from scratch — tiny errors or inconsistencies will make users extra-cautious and put them off. Put users off extra-cautious.

It also helps to enable SSL on your forms to help protect data. Visitors get peace of mind knowing all interactions are encrypted.

Listen with curiosity. The greatest problem with communication is we don’t listen to understand. We listen to reply. When we listen with curiosity, we don’t listen with the intent to reply. We listen for what’s behind the words.

Roy T. Bennett

Listening doesn’t always happen face to face.

Right at this moment, someone, somewhere around the world is trying to listen to their audience using an online form.

The right data is a beautiful thing. It clarifies and illuminates, taking businesses forward and creating stronger leaders. It’s the differentiator between a good business and a great one.

To collect the data you need, we have to start with the bare bones of a form. Every high-converting form is built with smart, savvy information architecture.

Let’s dive in.

Why do you need a form?

As Steve Jobs said, you need to get close to your customers. They are the key to your success, after all. We all would like to climb into our customer’s brains to know how to better serve them.

So, when presented with the chance to ask them questions — a form — it’s tempting to simply start brainstorming all the questions in the world you could possibly ask them.

RESIST!

Here’s the first rule of smart, strategic form building:

Every single extra question makes your users less likely to complete the form.

Every accouterment, every decoration, every additional section that doesn’t really need to be in there.

Longer forms = lower conversion rates.

Instead, write down the knowledge you’d like to gain from the form and work backward.

What is the purpose of your form? Feedback? Research? Performance?

Write down specific knowledge you’d like to gain from your survey, along with a couple of simple questions you think might answer your hypotheses including the set of possible answers.

Next to the answers, write down the percentage of responses you’d expect in each bucket. Comparing the future results against these guesses will reveal where your intuition is strong and where blind spots exist.

This pre-survey process will also help you synthesize the critical aspects of the survey and guide your design process.

Remember: as the scope of your survey widens, the pool of likely respondents grows narrower.

Simplicity is the most crucial — and most under-used — form design feature.

So. Think very carefully about what you do and don’t need. Kill your darlings.

Think carefully about why you need this answer and how you will use it. If you have any uncertainty, lose it. Consider the exact data you’re after, align your questions with that, then get your red editor’s pen — and ruthlessly cut everything else.

The shorter the form, the sweeter the results. Long forms lead to respondents a) quitting the survey altogether or b) simply switching off and clicking random checkboxes until it’s complete.

Make sure you’re avoiding this pitfall by scanning your form for the words ‘and/’or’. Spotted one? Splice that question in two.

Oh, and try to be as obsessively-precise as possible.

For example, instead of asking ‘do you eat junk food regularly’, ask ‘how many times a week do you eat junk food?’.

Specific answers mean crystal clear data.

How can we make our users’ lives easier?
Use predefined answers

Training for a marathon, studying for an exam, working towards a promotion. There are some areas in life where taking the hard route will reap the best results.

Form filling? Not one of them.

Easy-to-complete questions will motivate users to zip through the form; overly-complex ones will have them checking Facebook, yawning and feeding their cat.

So, how can we make answering questions as effortless as possible? By giving users a (metaphorical) head start. One way is by making questions single choice (radio) or multiple choice (checkbox):

Q: What services do you use from us?

a. Personal training

b. Spa and Pool

c. Fitness

Minimal thinking. No typing. It doesn’t get much more straightforward than that. And everyone’s a winner because predefined answers are much easier to evaluate.

If there’s a potential answer you can’t foresee, pop in an ‘Other’ option with a textbox that lets your audience enter a custom response. Boom.

It also helps to visualize answers. We played on this when building JotForm Cards with one of its most unique features: the emoji slider!

Instead of wading through the never-ending nuances of “Strongly Agree — Strongly Disagree” statements, users can select the emoji that best represents their feelings.

Another take on this is the evaluation slider. By dragging the blue dot or clicking on the grey one, respondents can get quick feedback and see their answers change instantly.

Arguably the most simple question type is the yes/no.

We noticed that users tended to create Yes-No questions using radio buttons. So our final mission was to make their lives easier by adding a Yes-No Toggle to the input table types.

Placeholders / Clarify Default Values.

Our lives are stressful. Our days are long. Our social lives are busy. So, on the scale of things people are happy to devote a high amount of concentration too, form-filling scores relatively low.

Let’s be realistic: a lot of the time, users will be answering questions in a hurry, only partially paying attention. So, think of your form as a treasure hunt. For a six-year-old. On their birthday.

You want them to get to the finish line, and their prize, quickly and without much effort. That means guiding them forward with clues, cues, and direction.

No one wants to be playing guessing games or feeling confused.

A great way to lead users along is by using placeholder text. This specifies a short hint that describes the expected value of an input field (e.g., a sample value or a brief description of the expected format).

That means they can glance at the page and understand the question/answer without having to read it in full.

Another way to gear users up for an easy, enjoyable form-filling ride is by grouping questions. We all make subconscious associations that we’ve developed over the years. Capitalize on this.

Grouping related questions have two primary goals:

Reducing cognitive load

The lower the cognitive load, the higher the success rate of your form. Cognitive load plummets when a form is logical; when longer content is chunked into bite-sized sections; when users can follow a well-known narrative (personal details — address — payment) without any thought.

At the end of the day, all we need to do is carry our users from the start to the finish of our form without losing them. How? By keeping them motivated.

This means they need to know what is expected of them, and how long the form is going to take. That’s why we have added a progress bar in JotForm Cards: it gives users satisfaction as they progress.

Visually dividing sections makes forms more easily-digestible. And starting with easier questions also helps make form filling smoother. When users can whizz through questions at the beginning, they will feel encouraged to continue. his triggers the endowed progress effect.

Logical Question Order

Asking questions in a logical order relies on one thing: putting yourself in your audience’s shoes. How would you expect the order to flow if you were them? Each question should nudge them on to the next.

Most of this boils down to common sense. For instance, asking for someone’s address before their name would be odd. Or asking for a payment method before selecting the product.

Conditional logic

Here’s another way to use logic to benefit your audience: by making it conditional.

Conditional logic is a powerful simplifier of complex processes. Basically, it lets you adjust a structure or process in line with the situation at hand. In this case, it would mean showing/hiding certain questions depending on the user’s answers.

Splitting your form into multiple routes is called “branching”. So, a form that seems super-simple may have multiple branches on its backend. You can visualize this by sketching a decision tree, with each route represented by a different branch.

Imagine you’re creating an online Feedback Form for your latest event. The event had 3 different ticket types: VIP, Business, and Economic. And you need that information because you want to improve and find a solution to make dissatisfied customers happy next time.

2018 Event Feedback Form

1. What was your ticket type?

– VIP

– Regular

– Economy

2. Please rate your overall experience

– Star Rating over 5

3. Please give your email address:

In this scenario, you don’t have to get in contact with the ones who enjoyed the event — just those who were dissatisfied. You could identify them with a star rating. ‘On the basis of the star rating, you can specify:

Develop a quiz where a different “Thank You Message” is shown according to user answers

Password protect a form. The form isn’t revealed until the user enters the password

Not show the submit button until the user makes a particular choice

Sharing the Form
Test your Form before share

Your form is finished. But it’s not time to release it just yet.

We all have blind-spots. And when a form’s success hangs on the quality of the data, it’s good to be cautious. So, make sure you’ve provided robust answer choices and haven’t missed anything by pre-testing your survey.

Send it to family/friends and ask them to keep track of how long it takes for them to respond to the survey, and how they experience the flow of questions. This will help you evaluate the design of the form for next time around, too.

How to befriend your audience
Contacting Your Responders

Let’s assume that you are working on a company that has three departments: Human Resources, Marketing, and Sales.

The responses to your form on your company website must be provided by the relevant department. Using conditional logic, you can automatically send emails to different departments according to responders’ answers.

People like to feel heard. So, communicating the responder via the right person will increase consumer satisfaction and also benefit your company’s reputation. Plus, next time you send them a form, they will be more inclined to fill it out.

Final thoughts

Information architecture might not get people quite as excited as real architecture. But I think the nuances and logistics can be just as interesting. Building a form that keeps users engaged and garners clear, useful data is a skill to be honed and celebrated.

At JotForm, we’re always trying to make the process more fun, simple and down to earth. It’s a work in progress but we have a great time trying. I’d love to hear your comments below.

Love or hate them, from registration to collecting payments, forms are here to stay. Forms equal input, they mean collecting data from anyone who interacts with your business.

A form is successful when it engages rather than frustrates your user, and if it provides you with the data you need.

A form consists of different parts. And building a form that does what it needs to do relies on rules, principles, logic — and a bit of play.

Here are some ways to structure online forms that actually convert.

Deceptive simplicity

Forms look simple. A few fields, a bit of text, a couple of buttons. Is there really much more to it than that?

Well, yes.

A successful form feels simple for the user. But behind the apparent simplicity lies a spectrum of decision-making, tweaking, careful wording and thoughtful strategy.

All these are necessary to create a form that garners the useful data you need. Without them, forms won’t yield what you need.

Like a Lego construction, a good form relies on architecture. That means strong foundations, the right kind of structure and attention to detail.

There are five essential rules to keep in mind when you build a form.

1. Start with questions, bottom up

As in a Lego game, the organization of your form needs to be informed by questions. It’s questions that build a form from the ground up.

That makes listing questions a good place to start.

I always encourage our users to start by writing down all the questions that come to mind when thinking about what a form needs to achieve.

Make them proper questions, with a question mark at the end. Give yourself time to do this. You may want to ask colleagues to join you and add their questions.

2. Remove any questions you don’t need

Removing the unnecessary questions is essential because you need the cooperation of your users — the people who will be taking the time to fill out the form.

What are the chances of these people having a long time to spare on something they don’t see the point of? None.

So don’t offend your users by wasting their time. Cut with an eye for what you really need to know. Then rephrase each of these questions as succinctly as possible, without losing an inch of clarity.

Every time your user gets confused, doesn’t understand a question or doesn’t know what’s expected of them, the risk of them giving up increases dramatically.

Every additional question will affect a form’s conversion rate, and a user’s likelihood to complete it. If you don’t need it, don’t ask for it.

3. Organize questions into groups

Once you have trimmed and streamlined your list of questions, divide them into groups and subgroups where necessary.

Organizing questions in groups will help create logic and flow, which will support your user in progressing through the form. It will also make questions more digestible, and lower the overall cognitive load.

Some other affordances of grouping questions:

A large form can be divided into multiple sections.

Grouped questions can be skipped by setting a single Skip logic condition

A set of questions can be repeated for every unit, such as members of a household

A set of questions can be displayed together on the same screen during data entry

You can mark the ‘theme’ of each group (i.e. what holds the questions together) with a short, informative header at the top of each section (e.g. contact details — personal details — work experience). This lets the user quickly scan the form to see what type of information they will need to provide.

All this will lead to groups of succinct, thought-through, clear questions. Some of these groups will be bigger, some small. You may have some orphan questions. All good.

4. Sequence your questions skilfully

Even if you have more than one question per page, your user will have to answer them one at the time.

Every section in the form should nudge users to the next one. That means you need to order groups, and questions within groups, in a sequence that is logical and makes sense.

So ‘Who are you?’ will come before ‘ Where do you live?’ which will, in turn, come before ‘What’s your work experience?’

On a payment form, you would start by taking details, follow with shipping information, and finish by asking for payment. If you asked users to pay first, they would be far less likely to do so.

Sometimes, questions will need to be asked in a specific sequence because they don’t make sense out of context.

As a general rule of thumb, try and stagger questions from easy to hard. This helps users move through questions more quickly and motivates them to continue.

Remember to be ruthless when it comes to eliminating unnecessary questions. You can always ask optional questions after a form is completed — chances of getting a higher response rate this way is always likely to be better.

For example, questions like “How did you first hear about us?” or “Would you like additional information about our services?” feel less invasive when presented as an optional follow-up question.

Each of your questions is half of a whole. The other half is provided by your users. You can see the way you build your form as the blueprint for a conversation, or a dance.

The key thing to keep in mind is that there’s someone else you need to engage with, and who needs to engage with you. That’s what’s going to drive your decisions on how to order the questions on your form.

5. Create movement in your form

Your next, and final, rule follows from this: there needs to be movement in your form.

Each bit needs to prepare your user for the next one. In essence, it needs to become a story that you co-write with your users.

The way you construct and order your form needs to have some kind of narration woven within it — and that narration will be an important part of what makes your reader hanging.

Who is going to be your conversant who will co-create the form with you? That’s the question to keep in mind as you build the form. Forms are not just about mindless data — they are about people with minds.

Key components of a form

A form has one overarching goal — to get the recipient to completion. Part of guiding them down this path is explaining

what type of form they are filling out and

what they can accomplish by filling it.

Realistically, few people will take the time to read a detailed description of a form’s purpose, so you need to capture it concisely. That’s why the title is so important.

Make your form title is absorbing, informative and apt. Don’t waste words; get to the point. You want your reader to remember the purpose of the form as they continue to fill it out.

A good form doesn’t start abruptly: it will have a welcome page. It won’t end abruptly either: it will finish with an expression of thanks. Make sure you don’t skip these two parts.

Some forms require more effort than others. For instance, some will ask the user to check external bits of paperwork (e.g. passports). Some will take a substantial amount of time to complete.

Don’t spring this upon your user halfway — this will annoy and demotivate them. In the case of a more elaborate or more demanding form, give a brief, upfront description of what they can expect right at the start.

Some more technical stuff

Types of Input FieldsSelecting the right divider

Choosing the right type of divider for your form is essential. Depending on a form’s length, this could be very minimal.

Communicating distinctions between groups don’t require much visual difference. In fact, too much contrast can distract people and stop them from being able to scan the form. The focus should always be on a form’s content rather than its presentation.

Is it better to group each topic on a single page or divide them across a series of pages? How many pages should there be? The answer is… it depends.

Some types of forms work better with multiple sections on one page and others work better with various pages, depending on length and content, and the users’ mental model.

When distinct topics are short enough to fit into a few sections, a single page will probably work best. When each section begins to run long, multiple pages may be required to break up the conversation.

When we released Card Forms, the JotForm Data Team conducted research about conversion rate (Form View/ Successful submission rate) of our new cards. The study showed that even in short forms (up to 7–8 fields), asking questions in a single page provided a better conversion rate.

Because of this set-up, we also added a summary page and a progress bar. This displays how many questions there are remaining and how many have been completed, motivating users and encouraging them to finish the form with the endowed progress effect.

Distinguish between primary and secondary actions

Grouping questions also have the advantage of distinguishing between primary and secondary actions. Primary and secondary actions let users complete forms without any issues.

A primary example encourages you to complete the form. A secondary action takes you back when necessary. The most common example of primary and secondary actions is moving forward or backward.

But there are also use cases for secondary actions such as Save for later, preview, export and reset.

Advantages of using input groups and flexible inputs

Finally, there is the question of flexible input vs. form validation.

Form validation = required field, for example, someone’s name.

These should always be visible. However, when an input is flexible, it can be useful to offer the option of collapsing the field to minimize overwhelm.

Carefully consider the right input field for the type of answer you’re looking for. Could it be yes or no? A predefined selection?

Whenever possible, give affordances to help people answer questions quickly. Having predefined answers or yes/no questions will also help you collect and analyze data more easily.

You can always add an ‘other’ section if necessary.

Equally, remember to indicate which fields are optional and which aren’t. The (*) symbol is well-understood to mean ‘required’.

Associate required or optional indicators with input labels to demonstrate which questions need to be answered. The (*) symbol is well-understood to mean ‘required’.

Final thoughts

Yes, forms exist to gather data — but they do so through a collaborative process between you and your users. Skillful form building is not a mechanical process: it involves reflecting on what you are trying to achieve, and what’s the best way to achieve it.

That means, amongst other things, thinking about which data type will be most useful to answer the questions at hand. Focused forms are most likely to yield actionable results.

Building an effective form is a creative process, but forms are no place to get fancy. Keep it as simple, short and focused as possible. Good luck.

Every job has its ups and downs, but that doesn’t mean you have to live with every one of the downs. Getting started on a new assignment is almost always a thrill. Before you get too far into it, little problems make their presence known.

The net result can be like a wild ride on an emotional rollercoaster. Enter the magic kingdom of pre-built websites. All the problems you typically face won’t necessarily be eliminated. But most of them including those that cause the most pain and trouble will be.

When everything begins to move along smoothly DO NOT PANIC!! There’s nothing wrong with you. With pre-built websites, it’s simply the way it’s supposed to be – from here on out.

A (Very) Brief Tutorial

What is it about pre-built websites that makes site building proceed so smoothly?

Let’s first visit the source.

BeTheme is a top resource for pre-built websites. It’s been a top 5 ThemeForest seller for years and it currently offers 380+ of these pre-built websites.

Consequently, it’s easy to find a theme to match any website type you have in mind. Plus, each pre-built website is customizable. The bottom line is that you can have a website ready to go in as little as 4 hours. This is without having to put up with the usual pains and problems.

Here’s why.

The 5 Most Common Web Design Pains Pre-built Websites can Eliminate

The Pain Associated with Not Knowing the Market

“Unique” barely describes the niche your newest client belongs to. How do you get a handle on the market? You can (a) take days to research it, or (b) browse Be’s catalog of pre-built websites.

We suggest opting for “b”. Pick one that’s close, you should be able to customize it to cover any niche.

Ecology, pets, and tech-based designs are each broad enough to start with. All you need to do is a little tweaking and add the necessary details to make your client a happy client.

Some clients already know which color or color palette will be best, and some will leave it up to you. Still others pick their favorite color, whether it’s a good match for their specific niche or not. That can be painful to you the designer, and that pain can extend to design choices beyond those of color.

Pre-built websites adhere to industry standards. Thus, you have a built-in argument you can use to help your client make a proper choice. This is whether the subject is color or content architecture.

Here’s a couple of examples where the colors are just as you would expect them to be.