WP-LightForm, the prettiest WordPress contact form.
Description
WP-LightForm is an AJAX / PHP contact form with spam protection, form validation and custom form elements.
This plugin is based on LightForm by Jeeremie, and utilises FormCheck for form validation and Niceforms for custom form elements. To get a feel for what WP-LightForm is really about, click the screenshot below and try the interactive demo.
Installation
- Download the latest copy of WP-LightForm and extract the archive.
- Open send.php with a text editor and enter the email address you would like to use as the recipient of the contact form in the $to parameter.
- Upload the wp-lightform directory to your WordPress installation’s wp-content/plugins/ directory.
- Go to the Plugins page in your WordPress Administration area and click ‘Activate’ for WP-LightForm.
- Enter the shortcode [LightForm] in the WordPress post/page you would like to display the contact form.
Frequently Asked Questions
How can I modify the layout of the contact form?
At the core of WP-LightForm is a XHTML Form element, to add or modify elements you can change the $formoutput string in wp-lightform.php as you would a normal XHTML document. To modify the css styles to better suit your site you will need to change css/lightform.css.
What browsers do you support?
Testing has been done in Firefox 2 along with Internet Explorer 6 & 7. Theoretically it should work on any javascript enabled browser, if not let me know by leaving a comment.
Does WP-LightForm only work on WordPress 2.5.1 and later?
Good question, my testing concludes that it definitely does work in version 2.5.1. Anything above and below that is untested, so if you decide to give this plugin a try on any other version please let me know how it went by leaving a comment.
Download
Download WP-LightForm (version 0.4, 17 June 2008)
If you enjoyed this plugin and want to contribute to the development, then do so by helping me maintain adequate levels of caffeine in my bloodstream.
Buy me a CoffeeChangelog
Version 0.4
- Formcheck image pre-loading disabled in Internet Explorer as images were appearing at the top of the screen
Version 0.3
- AJAX message sending now works successfully with Internet Explorer 6 & 7
- utf-8 encoding of the email to support international characters
- Recipient email address is now to be added directly to send.php for security reasons
- CSS modified to hide the scrollbar in the textarea for Internet Explorer 6 & 7
- CSS styled form elements to avoid conflicts with theme defaults
- Fixed pre-loading of formcheck images in everything but Internet Explorer 6
- Fixed message textarea appearing above message label in Internet Explorer 6 & 7
- New Success / Fail images courtesy of ~dimpoart
Version 0.2
- Niceforms upgraded from 0.9 to 1.0
- FormCheck upgraded from 1.2 to 1.3
- PNG Crushed FormCheck images down from 283kb to 8.7kb
Now XHTML 1.0 transitional.
Version 0.1
- Initial release
(6 votes, average: 4.33 out of 5)
Loading ...
I tried the demo at http://www.artflutter.com/beta/wp-lightform/ and filled in the form but intentionally entered the wrong answer for the human-test. There was a warning that it was wrong, but still it said “Success!!, Thank you xxx, your message is sent!…”
Hi Bnry thanks for the heads-up, the demo page should be working fine now.
Hi, a beautiful plugin!
I wonder if it support Chinese characters?
hi. Thanks for plugin
perfect.
Regards
i get a strange layout probably theme related though http://redseasound.com/blog/contact-me/
Negative Alex, the same thing still happens. I’m using IE btw. When I try using Firefox it works as it should.
Hi Roger, The disjointed input fields you are getting is the result of the 12px margin you are applying to form input in style.css. The easiest way to fix this would be to add the code below to wp-lightform/css/lightform.css
#lightform input {
margin: 0;
}
Also bnry are the problems you are getting in ie6 or ie7? Somehow in ie6 the form validation check, if ($(’lightform’).isValid) is always being reported true, so I’ll look into this and put both these fixes in WP-Lighform 0.3
thanks!
to Alex & Roger,
may be this code will help:
#lightform img {
float: none;
margin: 0px;
border: 0px solid white;
padding: 0px;
}
it really depends on the theme you choose
great plugin…but how do I increase the width of the message box?
thanks!
it doesn’t seem to work. i purposely entered garbage info and didn’t even answer the math problem but it still sent the message.
lewie paine, you’ll need to edit wp-lightform.php. find the line containing
textarea id=\”message\”‘
and modify cols=\”30\” to cols=\”40\” or whatever you want it to be.
getfreeware thanks for the css tip, it will be included in the next version of WP-LightForm.
Eric, are you using internet explorer, I have been made aware of some problems by bnry and will be looking into it.
i stil get a strange layout. (I am using FireFox). I have added the above code to the css file and it made no diferance. any ideas ?
/* General Form Layout */
form#lightform {
text-align: left;
}
#lightform label {
display: block;
margin-top : 8px;
width: 100%;
background-repeat: no-repeat;
font-weight: bold;
}
#lightform input {
margin: 0;
}
.blue {
color: #0099CC;
font-weight: bold;
}
Ok. it is working now (thanks alex and getfreeware). I have made some ecstatic changes to the send.php file. added some BR> functions so that the send massage show’s below the success tick/blue picture.
I have also translated this plug-in into polish. Actually it is now using two languages English and Polish.
If anyone would like a copy, please visit my website www.polishstudent.co.uk and go to ‘O NAS’ section there you will find my e-mail form and you can use it to contact me.
I am getting the strange layout issue in Firefox on my Mac. I haven’t tested it on any other browsers, but I hope that this issue gets solved soon.
Also, how secure is this contact form? My last was used by a hacker to spam which is why I am seeking a new one.
Hi Dan, what exactly is the layout issue that you are experiencing? I know that for some reason the message box in ie6 is displayed above its label rather than below it. This plugin wasn’t made with security in mind, the problem with any html form is that they are inherently insecure.
This is one of the prettiest things I’ve ever seen!! Great work! I have two questions -
1. Does this work well with WP-Cache?
2. How much is the payload? My site already has some heavy AJAX and I don’t wanna slow down my website!
hi guys and gals
if your going to visit my site and check the plugin and actually SEND a message like many have done then at least say something nice instead of ‘kjurf juh k kqjug kqu fkluefh kf lkh f;wlekifh ‘
http://carbonneutraldigest.com/?page_id=59 I get the message epic fail!!
Prasannah I do not have WP-Cache installed but this is a fairly simple plugin so I see no reason why it wouldn’t work. Easiest way to find out would be to try sending yourself a message and see if it works.
matt, try cforms, if that works then it is a problem with my plugin. If not then it’s probably a configuration issue with your web server.
Thanks for the tip Alex. What about my other question - “How much is the payload? My site already has some heavy AJAX and I don’t wanna slow down my website!”
Seems to work great from both Safari 3.1.1 and Firefox 2.0.0.14 (both on my Mac).
Nice plugin!
Hello,
http://www.seobyelan.com/reach-me/
Working functionality is superb!!! But some disjoints found in input fields…. Wat should i do? Can anyone advice?
Hello,
http://www.seobyelan.com/reach-me/
Nice Plugin
Working functionality is superb!!! But some disjoints found in input fields…. Wat should i do? Can anyone advice?
Any way to implement it in a sidebar widget?
Prasannah the ajax payload is the success/fail message you receive, which is basically nothing.
elan check back further in the comments as there was someone else who had this problem which and fixed it by editing the css.
Nick if you want this in a sidebar widget just use a php module and it should work by putting in [LightForm] as the content. If not try
< ?php lightform_body() ?>
Depending on the size of your sidebar you’ll probably also need to edit the css to resize the width of the form.
Please forgive for my foolish. Since more-more spam flood to my blog, I find that this plugin is very usefull. But, How to apply this code to the post/page ? Just tipe [LightForm] or ? I still confuse. Either in HTML or visual mode ? Or it has to be put in the single post page (single.php in the template) ? Thanks.
Lokk how stays in my blog:
http://i257.photobucket.com/albums/hh206/alexandreperei/lightform.jpg
how can i fix it?
AsianSaving, just type in [LightForm] anywhere in a post when in normal visual mode.
Alexandre, check the css I posted further back in the comments on how to fix that problem. paste the code below into css/lightform.css and let me know if it works for you.
#lightform input {
margin: 0;
}
#lightform img {
float: none;
margin: 0px;
border: none;
padding: 0px;
}
Working Alex, thank you very much.
It is very beautiful! ??!
Hay Alex. It’s works ! Thanks for your support …
http://favworks.cn/error.jpg
how can i fix it?
the code :
#lightform input {
margin: 0;
}
#lightform img {
float: none;
margin: 0px;
border: none;
padding: 0px;
}
i was test it,but still get something wrong.
how do i get rid of Niceforms and use simple forms style ?
just to say thanks… thanks.. it’s working on firefox and ie
Hi! Just wanted to say that it will be very convenient to add the code published on the comment #297 on the lightform.css, because most themes style the code field and images.
It look good. However I can’t get it work with special characters as ø (slashed zero) in Danish alphabet. Might be a problem for all languages containing those kind of characters?
just test et
I should be releasing a new version of WP-LightForm by the weekend that will have amongst other things the css changes and support for international characters.
“Your message” is above the text area in IE 7 .
Here is the screen shot .
http://img384.imageshack.us/img384/3651/screenhunter171ew1.jpg
WP-LightForm 0.3 has just been released. Please see the changelog for a list of changes.
Has anyone gotten this to work with IIS? It fails for me. I even have Scott Reilly’s Configure SMTP plugin installed (test messages from the plugin get sent successfully) and I modified send.php to call wp_mail instead of mail and it still didn’t work. Not only does the mail not get sent, the browser navigates to …/wp-content/plugins/wp-lightform/send.php and it displays a blank page in FireFox and in IE7 it displays an HTTP 500 error saying “This error (HTTP 500 Internal Server Error) means that the website you are visiting had a server problem which prevented the webpage from displaying.”
Thanks for any help you can give me.
David
Well, this may all be moot for me. Even the popups don’t pop up for me in Firefox and IE7. Bummer. This is a very nice plugin.
Sorry for blasting you with comments. I was able to get the Dagon Design Form Mailer plugin to send mail successfully simply by changing all references to the mail function to wp_mail. You might consider looking at how that plugin sends mail and displays the completion page.
Hi David, I’m not sure exactly what the problems you are having are. The email is sent with the php mail function which I assume is a fairly standard way of doing things. I’ve only tested this plugin on a Unix server so I’m not sure if your problems occur due to IIS incompatibilities or a configuration issue.
If I get a chance I’ll look into this more. Note that you should be using the wp_mail function instead of the PHP mail function on a WordPress site. That allows mail to be modified by WordPress settings or plugins.
If you, or anyone else out there can modify WP-LightForm to support the use of wp_mail() then I would be very grateful and be interested in including said changes in the next release.
Fortunately, the wp_email() function takes the exact same parameters as the mail() function and it returns the same value. Although it didn’t work on my machine (likely due to other issues), I would expect it to work to just make that one change on your machine.
I appreciate the work you’re doing. I’ll see what I can do at some point to get it to work on IIS.
Thanks,
David
unfortunately it is not as easy as that. Because the email is processed using send.php as the form action WordPress’ function such as wp_email() and get_bloginfo() etc. do not work. I am not enough of an expert to know how to get them to work, or even know why they don’t work. If someone does know how to fix this I would love to know how.
Ah, right. What I would love to see is a combination of the checks and popups in your plugin and the flexibility of Dagon Design Form Mailer. You might take a look there to see how it sends email. It’s quite a bit different than yours and might provide the clues needed to make this happen.
Trés bien ce que j’aimerais bien voir c’est la combinaison des “pupuus” et des checks. bien entendu votre travail est déja interressant. courage.
ce serait plus interressant d’avoir une combinaison de pupups et des checks.
The contact page shows images at the top in IE 7. I assume its the preloaded images showing up. Is there a way to fix this? I checked your example on your site and I see the same thing. In firefox and safari it looks fine???
Thanks MrT, yes I see that the pre-loaded images from formcheck are appearing at the top of the screen in IE7. I have updated WP-Lightform so that pre-loading of the Formcheck images is disabled for all versions of Internet Explorer. Just click the download link to get this latest version (WP-Lightform 0.4).
does work in version 2.3.3
cant activate plugin
Fatal error: Call to undefined function add_shortcode() in *******\wp-content\plugins\wp-lightform\wp-lightform.php on line 20
I’m pretty sure that error occurs because the add_shortcode() function was only introduced in WordPress 2.5. Therfore this plugin will only work with version 2.5 and above.
Strange problem: LightForm is configurated, all works well. But on the homepage is an idBox with 4 tabs (popular posts, featured article, comments, tags). With LightForm activated, the idBox expands to the whole length and shows all 4 tabs, deactivating LightForm the idBox works well.
Somebody can give me a hint why Lightbox doesn’t work together with the idBox? I checked the CSS files for the same classes, nothing…
Can you provide a link to your site where this is happening. It could be possible that it is caused by one of the javascript classes.
Sorry, the website is under development and not online. I’m using the theme FreshNews, you can see the idTabs with Popular etc on the online demo at http://www.woothemes.com/demo/freshnews/
Is it possible to check this behaviour with Firebug?
The easiest way to test for conflicts would be to edit the wp-lightform.php file. At the bottom you can see where the javascript and css files are included. It’ll probably be a process of elimination until you can find which specific file is causing you problems.
Usefool post, thx
Hello Alex!
Many thanks for this useful plugin. Please take a look at the wp-lightform on www.brandonmarc.com. The message box and ’send it!’ button are slightly distorted. How can this be fixed?
@Alex: Found it, the conflict is with jQuery http://jquery.com/
Hi Tom, thanks for the research. The conflict occurs because both jQuery and Mootools use $ as the selector. I’ll look into it, but in the mean time perhaps you could try contacting the author of idTabs and seeing if they know of a resolution to this conflict.
Hi, can you help me fix the wp-lightform on my site? The “select” element looks different.
Thanks for creating this good plugin
Thanks for the great plugin!
Just added it to my tech blog.
Very nice looking
Thanks so very much for taking your time to create this very useful and informative site. I have learned a lot from your site. Thanks!!
Hello,
please remove that inutil pop-ups, in this way the form will be more lighter
- issue (interact with other java script on my site and is not working corectly)
and please remove that icecrem icons
if is light make it light
Don’t work…
Hi there.. I seem to have a layout issue
The boxes keep getting white pixels around the borders instead of rounded borders. So they look like squares :/
Running newest wordpress with i-theme
Works great on 2.6.2 as well
Thanks
Hi there,
I love your plugin but I have a small problem to call it this way. is there a possible way to add a redirection link back to home page of the website after the message was successful sent?
Thanks in advance, I’m pretty new in all this.
Oh, and what do you used to allow visitors to be notified of followup comments?
albert, I’m not sure what the conflict with i-theme is, could be a jquery/mootools conflict or a css issue.
Firefly great to hear that it still works.
Wanda I’m sure it is possible to redirect after sending an email but I’m not sure how to do it. for comments I use the aptly named subscribe to comments, i’m sure you can dl it from the wordpress site.
Hello,
I could not get the contact form after upgrading my version to 2.6.2
Its just displaying the code “[Lightform]” in clicntside.
http://www.seobyelan.com/reach-me/
Please help me in this regards. Thanks in advance.
Note: Firefly told, its working for her in 2.6.2
Hello Alex, thank you!
hello, i tried to change the language of your WP-LightForm form english to german but did not succeded
maybe you can help me with it, i would appreciate it.
greetings and congrats for this plugin
ps. sry for my bad english
Elan, i just upgraded wordpress to 2.6.3 and the plugin is working fine. perhaps try deactivating and then reactivating it.
mitsos, the plugin is only in English, if you want to change it to German then you’re going to have to manually edit the files.
hi
ok.
1. downloaded the plugin from wordpress site.
2. using wp 2.6.2 on default fedora 9 installation w/ apache2, etc.
3. using firefox 3.0.2 on the same machine.
4. click the send button, all inputs empty or only fill in 1 box, i still got a success message.
if this is not discovered, then maybe i need to hack it myself?
thanks in advance.
Hi halmi, the demo of wp-lightform is currently running on wordpress 2.6.3 with the default theme. If the plugin is not working for you I suggest you check to make sure that the javascript does not conflict with anything else you may have running.
Hi Alex, About wp_mail I would like to ask, when the next version of the WP-LightForm?
Jan at the moment WP-LightForm is working with the current version of wordpress so there are no plans to update it any time soon.
I just use wp-mail-smtp to send mail, But LightForm seems not support stmp.