2

We have a requirement for a website where there will be a contact form on screen in all pages as well as the ability to signup for a newsletter.

Now, a contact form is something traditionally done in the footer (if it's required to be available for all pages), where we'd have a form for entering the email address, query text and submit button.

For signing up for newsletters we need the email address field.

That brings up the following dilemma:

Should I make the same form cross-purpose so that you can sign up for the newsletter at the same time as making an enquiry, or have them as two separate forms?

I've mocked up both versions into one wireframe here, but it should give an idea of the two options. There will be other stuff in the footer so it could end up cluttered if there are two forms and a load of content in there.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The plus point about mixing the two is that it is possible people will want to do both actions - contact us and request a newsletter. One single form means they don't have to fill their email in twice. However it gets a bit confusing if they only want the newsletter, because they're filling in an enquiry form when they don't actually have an enquiry. Therefore it makes more sense to have a separate field for newsletter signup. But of course that means the footer of this page is going to have two different forms in it, both with the same 'email' field.

I'm probably overthinking things here, but I wonder if there is a better option to go for so that I'm not duplicating functionality in the same place and having loads of form fields everywhere in the footer, but also keeping things obvious about how you enquire and how you request a newsletter.

3 Answers 3

3

Sam's answer is pretty spot on about the need to keep them seperate since there are multiple use cases where a person might just want to contact you but might not be interested in newsletter and vice versa where a person might want to subscribe to your newsletter but not reach out to you.

My recommendation would be to keep both of them seperate though you can combine the contact us form and the email subscription form as shown below:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Do ensure you highlight the newsletter checkbox so that users eyes are drawn to it and they know its there.

However if you want to combine the two, I updated the mockup to reflect the design.

3
  • 1
    Thats the reason i recommended keeping them seperate like having your subscribe box in the footer as well. This design is an enticement to subscribe while raising a question
    – Mervin
    Feb 19, 2013 at 15:59
  • 1
    I have implemented this approach and it worked quite well. Having two distinct calls to action is the correct approach, however we saw a good percentage of users who used the inquiry form also opted to subscribe to the email newsletter as well. In this case the contact form is supplemented by the subscription as a secondary action. The answer to OPs question is not either/or it is both/and. Feb 19, 2013 at 16:02
  • I've gone with this approach after all. Keeps things straight-forward and obvious and (hopefully) isn't to form-heavy to put people off filling in any of the items.
    – JonW
    Feb 20, 2013 at 9:52
1

In general, I think you want these to be separate UI because they're distinct use cases. One case is "I want to tell you something", while the other is "I want you to tell me something".

That said, you could try and do something clever:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You could even save the email + name in the user's cookies, which lets them feel like they can have an ongoing dialog with your site (assuming that's desirable from a business perspective).

3
  • Also, TIL that ux.stackexchange has built-in Balsamiq support. Take that, Quora!
    – Sam Blake
    Feb 19, 2013 at 15:20
  • 1
    I like the logical separation of why the use cases are different. Also, StackExchange does a lot of things better that Quora (not having to sign in to look at it being one!) I think this form layout is a bit confusing though, it's not clear the newsletter button is directly linked to the email field, but I like the overall idea. Maybe it's just a form with two different buttons that I should go with?
    – JonW
    Feb 19, 2013 at 15:28
  • Sorry, I wasn't thinking too hard about making it "good", since I don't know what kind of space constraints or layout guidelines you're working with. But yes, I think that having two buttons is going to be the key to differentiating the different workflows, and I think you can do it without having to duplicate the email field.
    – Sam Blake
    Feb 19, 2013 at 15:30
1

Why not use a reductive approach?

What is more important, the e-mail signup form or feedback?

Nowadays feedback can be triggered in a number of ways, having both in the footer can confuse (the objective), otherwise conduct A/B testing to see which solution is better.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.