Basic Tips for Designing a Quote Request Web Form

Oct 28 2010 by Brian Casel | 21 Comments

Basic Tips for Designing a Quote Request Web Form

Whether you’re a solo freelancer or the head of a huge web design agency (or somewhere in between), your website often serves as the first point of contact with a potential new client. Displaying an impressive portfolio of work along with a few client testimonials is a great start. But the final piece is key: Your contact form, or as many call it, the "Request a Quote" form, also known as Request for Quotation (RFQ) form or Request for Proposal (RFP) form.

Converting new visitors to sales leads (and ultimately to paying clients) is how we sustain ourselves in this business of web design. With a carefully designed "Request a Quote" form, we can get this process off on the right foot.

In this article, I will discuss some of the factors to consider when designing this key feature of your website. Along the way, we will look at the "Request a Quote" form of different web design shops to get some ideas brewing.

Asking the Right Questions

When it comes to designing a "Request a Quote" form for your web design business, there are no right or wrong questions to ask. It all depends on your specific needs, style, and the way you conduct business. That said, here are some typical pieces of information that you may find useful when designing your "Request a Quote" form. The following discusses some ideas for form fields in your web form.

Contact Information

This one’s obvious. But don’t go overboard. An email address is essential (make it required). Phone/Skype ID, maybe (but make it optional). Street address? I’d skip that for now until you decide to take on the project and draw up the contract. Also, ask for the URL of their existing website if they have one (make this field optional); the vast majority of web design projects are website redesign projects.

Tell Us About Yourself

Determine some information about the people you’ll be working with. Find out what industry they’re in, who their competitors are, who their customers are, where they’re based at, etc.

Specific Needs

This may be up to you to recommend, but some clients may already know what they’re looking for. Perhaps a dropdown menu or checkboxes on things they’re looking to get done (which also shows the things you’re capable of doing). Give them a way to specify which of your services they’re interested in. For example, they may be interested in logo design, getting a CMS set up, and so on.

Timelines

Do they have a specific deadline they need to meet? How much time do they have for this project?

Upload a Document

I haven’t found many sites that include this as a form field, but I decided this would be a helpful thing to add on my own "Request a Quote" form so that requestors can include Word documents or images with their form submission. Additionally, some clients may already have their project requirements written out in a document; this gives them the option to attach it to their quote request.

Upload a Document

The Budget

Whether or not to talk about budget so early in the process is a tricky question. The initial reaction for any savvy negotiator is to shy away from revealing their "number" too soon. But in the web design industry, the budget question is a real concern for everyone involved.

The Budget

The cost of web design varies wildly across the spectrum. You can get a template-based design for under $100, hire a mid-range design shop for a few thousand, or go the large agency route where budgets go from tens to hundreds of thousands of dollars. This is why I feel it’s important to include the budget question in your "Request a Quote" form. Get some ballpark numbers out in the open early in the process to make sure you and your potential client aren’t wasting each other’s valuable time.

Considering User Experience

Designing for a particular user experience is always important in any web design project. Designing your "Request a Quote" form is no different. A key factor to consider here is how much time and effort will you require of your visitors who wish to request a quote.

I prefer the "quick and simple" approach where I gather just a few — but very important — pieces of information, just to get the ball rolling. These can be basic, open-ended questions about their business, their goals, and their budget. Once I receive this initial request, we schedule a time to chat where I aim to flesh out all of the details I’ll need in order to devise an accurate proposal for them.

Considering User ExperienceThe Foundation Six website features a short form, asking only the essential questions.

Keeping the "Request a Quote" form quick and simple avoids overwhelming the would-be client and makes them feel comfortable and productive. These are positive emotions for our potential client to come away with after their first interaction with us (even if this interaction happens over the web). This in turn makes them more likely to end up hiring us for their project.

Copy, Personality, and Responsive Web Forms

Your "Request a Quote" form is the very first step in a personal relationship between you and your potential client. Infusing your own personality into your form can make it feel warm and inviting.

It’s a good idea to keep all of the copy throughout your site consistent and authentic. This extends to your contact page and even within your "Request a Quote" form itself. A few well-crafted pieces of copy can help the visitor along as they progress through the contact form.

Here are a few web forms with great personality.

Bold Perspective

The agency has a conversational approach which emulates the sense of engaging in a dialogue.

Bold Perspective

Awesome*

The design has a clearly broken-down interface for specifying the client’s exact needs.

Awesome*

CasJam Media

I designed my form to have short pieces of hints and text as users focus on each form field.

CasJam Media

Request a Quote Form vs. Project Worksheet

Sometimes, the "Request a Quote" form is blended (or replaced) with a project worksheet. What’s the difference, you ask?

In my opinion, requesting a quote is a preliminary stage of the process that seeks to just get a feel for whether or not the parties are the right fit for one another.

A project worksheet, on the other hand, tackles more specific, targeted questions about the project — many of which are relevant only after the contract is signed and the project is underway.

Here are a few examples of the project worksheet being incorporated into a web designer’s site.

Bold Perspective

Bold Perspective has a conversational and responsive interface that takes the visitor down several paths depending on their specific needs. It’s a very creative approach and actually fun to fill out!

Bold Perspective

Solid Giant

The web design studio of Josh Starr goes with a PDF questionnaire that gets down the important questions. He’s set up the PDF to include text input fields so it works very much like a web form.

Solid Giant

Brian Hoff

Graphic and web designer Brian Hoff offers two different project worksheets: one for brand design work, and the other for web design work. Both project worksheets go in-depth with targeted and constructive questions. I especially like his question in the web design worksheet that reads, "Imagine your website 1 year from now. Complete the sentence: I know the website worked because…" That’s how you ensure a successful project right from the very beginning.

Brian Hoff

Resources for Designing Quote Request Forms

Here are a few tools which may prove useful to you as you design your "Request a Quote" form:

Wrapping Up

In the end, it’s up to you how you wish to design your "Request a Quote" form. It’s an important part of not only your website, but also your business as a whole. It deserves careful consideration, testing, reassessing and tweaking until it does what it’s intended to do: Win you more business and have happier clients.

Related Content

About the Author

Brian Casel is a web designer and the author of Design For Conversions, a book to help startups design a better marketing site. Check out Brian’s personal site, casjam.com and connect with him on Twitter @CasJam.

21 Comments

Maxu'

October 28th, 2010

Super article, exactly what I would have needed a while ago when I was looking for best practices in this area. Thank you!

Federica Sibella

October 28th, 2010

Hi Brian, very nice points, thank you.
While I agree with you on “keep it simple” I’m not so convinced that asking for the budget so early will be a good move for me: I work mainly with Italian clients and most of them are not happy at all to give you their budget, they will ask you for a quote and then cut as much as they can.

Curtis Scott

October 28th, 2010

I really like the Foundation Six quote form. It’s very simple and to the point. Also, the Bold Perspective bit is very interesting. Thanks for sharing Brian!

Alex Molchan

October 28th, 2010

Brain, what do you think about my contact form http://www.dizzain.com/blog_customization/contact/
Thanks.

Nottingham

October 28th, 2010

Brilliant share! Might have the PM sort one of these out :)

Alan Bucknam

October 28th, 2010

Nice overview of style, substance, and function. I’ve been hesitant to put such a form on my site for the simple reason that I like to have people talk directly to me to engage in this conversation. But that probably means I’m missing out on some leads…good food for thought for me, thanks!

Malcolm

October 28th, 2010

Quote forms all depend on the industry at hand. We had to redevelop our quote form (translation services) because it stopped converting. We realised that people were giving up half way through. We re-evaluated what questions were vital and came up with our quote form http://www.globalvoices.co.uk/online-translation-quote2.php we even have a minimal version of a quote form in our header space, but it is amazing how many people still neglect to use these forms and call.

Ryan

October 28th, 2010

Awesome article Brian, thanks!

Usi@Hacking

October 28th, 2010

you are right that design matter very much, if you’ve a good design of order or contact or any other form this will be a great impression on client.

Basch

October 28th, 2010

If you want to increase the conversion rate for your contact-form or “request-for-quote”-form, you should consider putting the textarea on top. This makes the visitor enter his/her question/story first and then the other fields. It’s less likely the prospect will cancel filling out if he/she already filled in the large textarea, since that was the most time consuming part.

Kostas

October 28th, 2010

Great share.I was looikng for something like this.Thanks

Michael Tuck

October 28th, 2010

Some terrific examples here. Nice article!

rajasegar

October 29th, 2010

thanks i have been looking for this

Rob Willox

October 30th, 2010

One one side of the coin would tend to agree with your approach of asking the minimum of initial questions to generate the lead although your option of including a file attachment is also a good option as many possible clients will have scoped out an idea of requirements on paper before making any contact.

The flip side is that although many online users have a reticence to filling in large amounts of info, in the case of seeking out a partner to design their site they may consider the request for more than just the basic information to be valid.

It might depend on what other information is shared on the site and if there are case studies or similar outlining past successful collaborations.

The answer, of course, is to do an A/B test which would solve the riddle, at least, for your own site!

davide scalzo

October 30th, 2010

Fantastic article! thanks!

Muax

October 31st, 2010

Thank you Brian for useful tips

Catalina

October 31st, 2010

Definitely, highlighting the importance of using style, colors and structure to create a certain user experience – is one of the most interesting things in this article.
While we try to focus on the information and clarity of the quote form, I think redesigning this section so that it fits the “personality” of the site is really important, especially for freelancers.

MrCeri

November 5th, 2010

I’d caution against the idea of offering a drop-down list of budget ranges – I think this could actually lose business in some cases. If you set the amounts/increments too high it might put off smaller clients who assume you wouldn’t be interested in their “little” project. On the flip-side, set them too low and larger clients might not take you seriously.

John Cross

August 7th, 2011

Pretty nice tips.

do you have a sample request a quote form code?

Mrinal

November 4th, 2011

Happy to read and learn about request a quote from tips, it works for me and I implement it on my site as well.

Leave a Comment

Subscribe to the comments on this article.