WordPress Quick Contact Form
A really, really simple contact form
The project started because I was frustrated by the poor usability of the more popular WordPress contact forms. I’m not a developer so I do struggle the geeky coding stuff so it has taken me along time to get this far. You can see an example of the form over on the right. Lots more here.
The driving principle has always to keep it easy to set up and use. There is a lot more functionality now that there was at Version 1 but the form still works right out of the box: just add your email address and it’s ready to go.
But before we start the technical stuff.
Here’s the plugin: http://wordpress.org/extend/plugins/quick-contact-form/
What do you get for your money?
- 9 selectable fields including name, email, telephone, dropdown, checkboxes and radio fields
- Attachments (with optional restrictions)
- Width selection
- 5 border styles
- Optional maths checker
- Dashboard message display
- Editable thank-you message
- All sort of validation and customised error messages
- Selectable tracking
- Redirections
Here’s some examples:
This shows the three steps: form, error messages and thank-you message. There are examples of sites using the form right here.
This is the main editing screen
(click to enlarge)
Here’s what I did.
A place to start for all plugin development is the wordpress page Writing a Plugin. It took a while to get to grips with the format but I had loads of help from the plugin options starter kit.
The next major hurdle was to process the form. Lots of experimentation but the best compromise was a staged validation. The details are all listed on the plugin settings ‘support’ page.
Later on I added an optional spambot blocker. This is a simple maths checker, nothing two exciting. Around the same time I discovered how to add a widget with help from azuliadesigns.com.
After this is all went pear shaped. I wanted to add some tabs on the settings page and display the messages. I used the example from smashingmagazine.com and the tabs worked fine. Unfortunately the message display caused all sorts of problems with the way the plugin accessed the database.
I did get it to work however and now there you can have a dinky little message list on the dashboard. Next tweak is to provide some ooptions on how these messages are displayed (otherwise you could have a looooong list).
Usability Testing
I’ve also carried out a couple of layout tests over on usabilityhub. This one looked at the colours of required fields: Test 1. And this one considered the error messages: Test 2. Your thoughts would also be much appreciated.
Error and Problems
If you use aol, gmail, yahoo, hotmail, live, aim, or msn you could find you email getting blocked by the host. It’s not the fault of the plugin. It’s your host.
To test your server settings use this little plugin
Join in the fun
If you want to help with the plugin drop me a message and I’d send you the beta versions as they get developed. In return you get a mention here and on the wordpress plugin page.
Hi Graham!
I would like to express – as so may others before me – my great gratitude for this simple, yet beautiful customizable plugin!
Only 2 minor matters:
- I tried to center the form, as you suggested here above, with html (aligncenter etc).
But it is extremely stubborn
Is there in the meantime an easier solution for that?
- Is there a possibily to let the form float, instead of fixing the pixel width? Then it can be responsive, as is SO 2013
Anyway, lots of thanx for so far!!
Hi Magda,
Centering forms is always tricky. The best solution is to put it in a div. Change your page to text view and add this code:
<div style="width:280px;margin: 0px auto">[qcf]
</div>
Change the width to whatever your form width is.
To make the width responsive just use the ‘styling tab’ and you have all sorts of options.
Hope this helps, Graham
Dear Graham!
Thank you so much for answering so quickly!
I just found out I was so stupid not to be aware that the option 100% – “fill available space” is exactly what I wanted. That option makes the form centered. AND: responsive! I am so very glad! Love your work on this beauty plugin.
Maybe I get too bold now, and push my luck: is it possible to have NO border around the form. That option is not available. And the black ‘send’button cannot change color, I gathered?
Anyway, I am more than content.
Grateful greetings from chilly Holland.
Morning Magda,
There is an option on the styling page to change the border to ‘none’. On the same page (down the bottom) are custom styles. Just add the style: .qcf-style #submit{color:#123456}. Make sure you select the ‘use custome styles’ box and save.
(and greetings from a wet and cold England)
Dear Graham!
If it was spring like it supposed to be, I propably didn’t have time to be so picky in customizing your awesome form, so please excuse my ongoing questions
These little nasty things now remain:
- When I take the option ‘no borders’ (as I tried at the beginning), then the white fill-in boxes totally stretch from left to right. I mean, the chosen color doesn’t go around them, only under and above. I just want to get rid of the 1px line around the formbox. None of the options provide that possibility.
- Nice to have a colored text now in de send-button! Thnx! But actually I wanted the big black button itself to have the color of my site…
- And now I’m at it: is it possible to give the fill-in boxes also another color than the provided white?
Thnx so much, all my best, Magda
Hi,
Great plugin! I am the designer not the client. I was wondering if it is possible to add more fields?
When I first wrote the plugin there were only three fields – it really was a quick contact form. I added a telephone field then 6 more, attachments and finally worked out how to have multiple forms. I have been looking at adding an option for extra fields but it’s not easy as I’m not really a developer.
You are the only person to ask for more so I’m assuming most are happy with the 10 there are. How many more do you need?
Okay, not to worry then. Is it possible to add two contact forms on the same page?
Yes, easy peasy. In the plugin settings page just create a new form. After saving you will see the shortcut you need to use. You can then configure/style and do whatever to change the new form. You even have the option to send to a different email address. This is my testsite with 4 forms on one page: http://testblog.co.uk/bob/
Okay Cool Beans then! Will give it a shot.
Wow. That really was easy. Done. Sorry to bother. Thanks much….
Jack, I used the wordpress brain-beam plugin to send the solution via telepathy into your head.
I’m now sending: buy Graham a beer…
Ok, sorry. Reading more closely, I see the [qcf] for pages, but where or what file would that go into?
Thanks for your patience.
Jack
Graham, I’m pretty green with WordPress and not a coder. Is it possible to drop your form into the content area of a page, instead of a sidebar? Might be a dumb question, but there it is. Thanks very much.
Jack
Hi, nice plugin, very easy to setup ! I do have a little question : when I receive the email from the form I got this, witch is is not very well formated. Also you can see the çà èé coresponding to çàèé in the message field.
MIME-Version: 1.0
Content-Type: text/html; charset=”utf-8″
Message-Id:
Date: Thu, 4 Apr 2013 10:10:39 +0200 (CEST)
Envelope-To: contact@glgdev.fr
Le message est:Votre Nom: jb gayetEmail: jbgayet@wanadoo.frTelephone: 0648173938Message: çà èéMessage de: Contact LUBERON
any help very welcome
Thank you
JB
Me and JB have exchanged emails – seems like the problem is now resolved.
If the email turns up looking like a dog’s dinner then the problem is problably your email client. All the plugin does is convert the form inputs into a message string and send it off. Just like every other email pluigin/script/form. What you may find is that some email clients don’t like HTML or you have blocked images or tweaked some other setting.
Hi there!
First of all: great plugin, great job done, absolutely love the rather minimalistic, straight to the point design.
I have only question regarding the (excuse me if I am not that tech savy) “onclick” function. It drives me FREAKING NUTS when clicking on the text field, the field label disappears.
I saw in the .php files that you can tweak it, but I am not that good and I don’t want to mess up things.
So, please, if you would be so kind to tell me what can I do to turn this feature of, I am sure it affects the UX on my site.
Thank you in advance for your answer, have a great day!
Hi,
Pleased you like the plugin.
A text field has a different set of rules to a normal form field – I have no control over this. It’s not even really an ‘input’. As a result the label won’t reappear when you leave the field. It’s not something anyone else has commented on but I will take a look.
I’m doing some upgrades at the moment so will see if I can find a solution.
Graham
Sorted!
Download and install version 4.5 and everything works as expected. I hope.
Graham,
I’ve installed 7 word press form plug-ins and yours worked for me. Love the fact that you can scale down the overall form size.
I have a black background, so the “Thank you” message font is not visible since it’s hard coded to black. Can you tell me where I can change the code for this?
Thank you,
Justin
Justin,
The plugin doesn’t define the font colour for the thank you message. It’s something in your theme colours.
One work-aroud is to set up a thank-you page and send you visitors there when they submit the message. You do this in the ‘send’ options tab.
What’s the URL?
Thank you! I will probably end up creating a a thank you page!
-Justin
Or you could use custom styles. On the styles page make sure the checkbox is selected and add the style: #qcf-style p {color: #FFF;}
Save and see what happens.
Graham
Is there a way to add more fields? I need 2 more text fields. Thanks.
You can add more text fields but not via the plugin. You would have to work your way through the php and add then to the various arrays. Not difficult but quite time consuming. If you want me to do this for you I can but not for free I’m afraid.
Graham
Thanks so much for your plugin, i really like it. I have a question to you. When I send to multiple addresses, I put a comma betweeen each address. But, is there a way to do it hiding addresses when sending to multiple recipients? Like a CCO? ….
Thaks!
That’s an interesting thought. Adding lots of boxes for different types of recipients would be messy but I could add a checkbox for BCC (blind carbon copy).
Let me have a play,
mail('BCC: '.$qcf_email, $subject, $message, $headers);should work.Hi Graham,
Thanks for this plugin. It is easy and very well explained which is especially appreciated by a pseudo wanna-be techie like myself.
However, no matter how hard I try, there is a glitch or two. In this case, two. One is that there seems to be no easy way to make the form align center on my page. It always goes left. I tried putting it in a table that was aligned center, but the form still appears aligned-left. Two, the top “Name” box is slightly offset to the right.
I don’t know if these glitches are in the theme or the plugin. Any suggestions would be greatly appreciated. Thanks.
Aligning things in the centre is never easy. It works great for paragraphs and headers but is a right pain for everything else.
The good news is that WordPress has built in styles you can use: alignleft, aligncenter, alignright: http://codex.wordpress.org/CSS
Try putting the form in a DIV with class=”aligncenter”
Don’t know why the name box is offset. It’s probably some other style that has sneaked in. Can you send me the URL so I can have a look
hello dear,
i am using ur quick contact form & its simple awesome although having some problem. My problem is mail is not sending to my Gmail accounts. I have set another msn account and it works fine not working in gmail accounts. I used “,” to separate mail addresses. But still same problem. Please help!!
thanks
If messages are getting to msn and other recipients but not gmail then you need to talk to your host. The may be restrictions on the PHP mail() function. It is a common problem with shared hosting.
Sorry that I can’t help more but it’s not a problem with the plugin.
Hello Graham,
Thanks for the simple yet versatile plugin – I was wondering if there is something I can add to #qcf-style – or anything that I could do, that would prevent the labels from disappearing when you click in a field to enter text? I realize that one solution is to reopen the page containing your contact form but apparently not all my visitors have that intuition. They’ve ended up not being sure of what the field was originally asking of them because they’ve clicked it away
Thanks!
There are two ways to do this:
1. Delete the quick-contact-form/quick-contact-form-javascript.js file
2. Remove the lines:
$myScriptUrl = plugins_url('quick-contact-form-javascript.js', __FILE__);
from the plugin file.wp_register_script('qcf_script', $myScriptUrl);
wp_enqueue_script( 'qcf_script');
If you do click away without entering anything the field label should return. That’s how I wrote the thing. Can you send me a link to your contact page?
Grayham, me again. I think this is out of you control but I keep getting emails which have been created using the contact form that are spam for a supposedly funding organisation. I know we don’t have a capcha but would enabeling the question after number question help to stop robots and if so how does the question work? if I put text in the box it shows on the form but I can’t see how you can get some to answer it correctly .
Alistair
Hi Alistair,
The captcha should block most of the auto submitters. If the visitor answers the question correctly the form will get submitted. If they don’t then they get an error message. There is a version of the captcha that uses images to display the sum but I’ve never got it to work properly.
Hi I installed the your contact shortcode on the frontpage of my website.
Though it looks like the message goes, actually I don’t get any message/ email when I do some testing filling in the contact form.
Seems there is no setting on the plugin page on wp backend to fix this. Should we check the code in editor?
Please advise
The problem seems to be with the hosting packages people use. The PHP mail function is restricted by your host so that emails to gmail, yahoo or hotmail get blocked. If you have a domain email (me@mydomain.com) it will work.
There is a solution the other contact form plugins have use and it sometimes works. If you goto the help tab on the plugin settings page you will see the code.
But I would ask your host first.
Hi,
Love your plugin – very flexible and slides nicely into our theme.
I have configured everything and it appears to work – entries show up in the Dashboard – but the email never arrives.
I use “Configure SMTP” for sending messages as I cannot use the web host’s standard “localhost” SMTP.
Please help!
Thanks
Joe
The problem will be with your hosting/email config.
The plugin uses the php mail function which is a simple email submission thing. If you aren’t getting the messages it’s because of some thing on your server. I’d like to help but I have no idea how your server is configured.
bonjour
merci pour ce widget.
le seul problème est la réception du mail.
voici ce que cela donne :
Content-Type: text/html; charset=”iso-8859-1?
Content-Transfer-Encoding: 7bit
The message is:Votre nom: cholletadresse: 2 bis rue ronsard 41500 merEmail: lotjfc@gmail.comTéléphone: 0631814305Caractéristiques: ibm hsprix: 30Message was sent from: Soumettre un produitSenders IP address: 88.187.81.211
Content-Type: image/jpeg; name=”ibm1.jpg”
Content-Transfer-Encoding: base64
Content-disposition: attachment; file=”ibm1.jpg”
/9j/4AAQSkZJRgABAgEBLAEsAAD/7RRGUGhvdG9zaG9wIDMuMAA4QklNA+0AAAAAABABK//ZAAIA
AgEr/9kAAgACOEJJTQQNAAAAAAAEAAAAeDhCSU0D8wAAAAAACAAAAAAAAAAAOEJJTQQKAAAAAAAB
AAA4QklNJxAAAAAAAAoAAQAAAAAAAAACOEJJTQP1AAAAAABIAC9mZgABAGxmZgAGAAAAAAABAC9m
ZgABAKGZmgAGAAAAAAABADIAAAABA …. etc
j’ai essayé avec plusieurs adresses mails ( gmail ou yahoo ) toujours le même résultats
merci de votre aide
jfc
Bonjour!
There was a bug in the code I had missed. I’ve uploaded version 4.1 and tested it with jpg,gif,png,doc,pdf using gmail, yahoo, webmail anf thunderbird. So it should be ok. Can you update the plugin and test it for me.
Thanks so much for this plugin, i really like it. However when i activate the validation in some fields like email or name in the published form inside a page only appear the fields without validation. Another thing is that in dashboard i can see the messages history but i never received any email.
Do you have any idea regardin to this issues? thanks in advance.
Not sure why the validation isn’t showing. Can you post your URL so I can take a look.
The most common problem with emails not arriving is hosting restrictions. Many people using this and other contact forms have found that their hosts will only allow domain emails. Gmail, hotmail, yahoo etc all get blocked. Check with you host that their are no blocks on the PHP ‘mail’ function.
I’m attempting to use your contact form builder as an RSVP for my wedding site. I have gotten it set up however once I submit it I am not receiving a notification to my inbox about it and I am not getting a confirmation on the page. Can you help me with this?
How bizarre. Really not sure why you don’t see the reply. Do the messages appear on your dashboard?
Edit: it turns out that their host was hopeless. The PHP was so out of date none of the contact form plugins worked! They changes hosts and all is hunky-dory.
Hi, love the plugin. not too simple, not too complex, just right.
Been hacking with it as I wanted to set the width as a percentage not as px. so changed things in function qcf_display_form( $values, $errors, $whichpage )
worked but the dropdown field was displaying as much longer than all the other fields
so I changed $input = ($width – $padding – $whichpage) . ‘%’;
to $input = ($width – $padding) . ‘%’;
now the dropdown is only marginally shorter. what exactly is $whichpage ?
Aha, you have discovered the magical ‘whichpage’. All this variable does is make sure both the preview form and the live form both display properly. If you remove it from your version and adjust the calculations the live form will be ok but the preview form will look a little wonky.
Nothing I can do about this, it’s because of the way wordpress dashboard is styled.
However, you might want to wait a day or two. I have a new version nearly ready for launch that allows custom styles (as well as redirections and attachments).
Thanks for explaining. Cool look forward to the new version
I worked on wordpress sites developments and have download install quick contact form plugin, I like this plugin a lot and work well, I dont work much in php and dont do custom php developments, I want one help when we get a message in our mail from quick contact form. its shows like tile “Enquiry from sender name” there are option like post, page or sender name we can select from.
But I need to add 1 more line in title to get this “Enquiry from sender name and subject” it should show in title.
can you please help me and tell where I can do this to get the the title as mentioned.
please reply as soon as possible and help me.
If you want more in the email subject you need to edit the line:
$subject = “{$reply['subject']} {$addon}”;
Change it to:
$subject = “{$reply['subject']} {$addon} {$values[qcfname9']}”;
The number 9 only works if you are using field 9 for your subject. If it’s not the right one then change the number.
hi,
I want to redirect page after submitted form. I could find it in setting.
Can you help me.
thanks
Muhammad,
Not something you can do just yet but it’s easy to implement. If you can wait a day or two I’ll release a version when you have an option to redirect or show the thank you message.
Update: redirectionsd now included in V4
Are there custom background colors available or is it only tan that I see?
And can the size of the contact form be customized?
Thanks!
Hi Bob,
The background colour is set in the plugin CSS. You can change this in the plugin editor. Add your background colours to #qcf-style.
I’m working on an update at the moment and have been fiddling with selectable background colours and lots of other enhancements. That should be done in the next day or two.
As to the size. Go to the ‘form settings’ tab and down the bottom is a width setting thing.
Update: you can now set the background colour using the plugin settings
Hello, first of all I would like to thank you, for the great and easy to use contact form
I have an issue, and I don’t know if it’s related to the contact form or not. I hope, you could help me. The problem is – when user sends message, the copy that is send to e-mail doesn’t show some particular letters (website is in Lithuanian language). Where could be the root of the problem?
Hi Mkonje,
I’m not sure what the language problem is. All the validation does is remove HTML tags so the content should be exactly as it was sent. Can you use the form on this page and send me a message in Lithuanian so I can see the problem.
Hmm. The simple sum doesn’t seem to work too well. I just installed quick contact on a client’s site and got a spam email from the form within a day.
Could I suggest you use the PHP rand() function to create random numbers between 1 and 10 (or even 0 and 10) in qcf_display_form()? Of course you then have to pass the numbers generated back to qcf_verify_form() in order to check the answer is correct.
But I like the form very much, apart from that. Thank you.
Hi Peter, thanks for the suggestion.
I’ve been struggling with the spam checker for a while. I found a great maths checker that uses random images but I just can’t get it to work. However none of them will stop the human spammer – only the bots.
Thanks for the great plugin! All the others I’ve seen are needlessly complicated. Are you open to suggestions? I know that the beauty of this form is its simplicity but it would be great to see a reCAPTCHA option if possible, and to highlight a field that’s been incorrectly filled or have a permanent field label to help identify them.
Glad you like it. I’ve tried to make it simple to use as possible.
I’ve added the maths captcha thingy as it’s far more usable and accessible than recaptcha but I don’t see a real problem with adding that options as well.
As to the validation, the latest version does highlight which fields need sorting and (hopefully) tell you what needs to go there.
Hi Jeffrey,
I was reading your submission to http://quick-plugins.com about the Quick Contact Form.
You said . . . “Thanks for the great plugin! All the others I’ve seen are needlessly complicated. Are you open to suggestions? I know that the beauty of this form is its simplicity but it would be great to see a reCAPTCHA option if possible, and to highlight a field that’s been incorrectly filled or have a permanent field label to help identify them”
It looks like a permanent field label has not been integrated. Just wondering if you came up with a solution . . .
Thanks,
David Main
David,
Recaptcha proved to be right pain in the bum to integrate. The maths spam blocker and all the other controls should block 99% of all known spammers. But I’ll have another look at this in the new year.
Graham