WordPress Plugin: Simple Basic Contact Form

Updated June 28, 2024 • 66 comments

Simple Basic Contact Form is a clean, secure, plug-n-play contact form for WordPress. Minimal yet flexible, SBCF delivers clean code, solid performance, and ease of use. No frills, no gimmicks, just a straight-up contact form that’s easy to set up and style for any theme.

For a contact form with more options and features, check out Contact Coldform, or continue reading to learn more about Simple Basic Contact Form. Either way, thanks for visiting.

Update!

As explained here, I no longer own or develop Simple Basic Contact Form. Since selling the SBCF plugin, I have developed a much better, faster, more awesome contact-form plugin. Check out Contact Form X at the WP Plugin Directory. I use Contact Form X for my own contact form here at Perishable Press. It’s all Ajax-powered and super easy to use. Check it out!</update>

Overview

Here are some of my favorite features of Simple Basic Contact Form:

Plug-n-play – display the contact form anywhere
Sweet emails – SBCF sends descriptive, well-formatted messages
Safe and secure – SBCF blocks automated spam and malicious content
Ultra-clean code – SBCF is lightweight, standards-compliant, and secure
Fully customizable – SBCF is easy to configure and customize

Here is a screenshot showing the form displayed on WP’s default Twenty Sixteen theme:

[ WordPress Plugin: Simple Basic Contact Form ]

SBCF contact form (view more screenshots)

Features

Here are some of the main features for Simple Basic Contact Form:

Slick, toggling-panel Settings Page makes it easy to customize
Style the form via the Settings Page using your own custom CSS
Provides template tag to display SBCF anywhere in your theme
Provides shortcode to display SBCF on any post or page
Displays customizable confirmation message to the sender

And even more features:

Works perfectly without JavaScript.
Option to reset default settings
Options to customize many aspects of the form
Options to customize success, error, and spam messages
Option to enable and disable CSS styles
Email message includes IP, host, agent, and other user details
Customizable form-field captions, error messages, and success message

Here is a screenshot showing the SBCF settings page:

SBCF Settings page (view more screenshots)

Anti-spam & Security

Captcha – includes challenge question/answer
Firewall – protects against bad bots and malicious input
User-friendly – error messages help users complete required fields

Clean Codes

Crisp, clean markup: source code properly formatted and 100% valid
Crystal clear emails: delivers well-formatted, plain-text email messages
Better performance: CSS loads only where contact form is displayed

Installation & Usage

Typical plugin install: upload, activate, and customize in the WP Admin:

Unzip and upload the plugin to your “plugins” folder and activate
Use the shortcode to display SBCF on any post or page, or:
Use the template tag to display the SBCF anywhere in your theme
Visit SBCF Settings to configure your options and for more infos

Shortcode

[simple_contact_form]

Template tag

<?php simple_contact_form(); ?>

Screenshots

Here are some screenshots of Simple Basic Contact Form running with WP’s default theme, Twenty Eleven (using default plugin options):

Markup & Styles

Here is the HTML markup used to create the contact form (default settings):

<div id="simple-contact-form" class="scf">
	<form action="http://example.com/contact/" method="post">
		<fieldset class="scf-name">
			<label for="scf_name">Your Name</label>
			<input name="scf_name" id="scf_name" type="text" size="33" maxlength="99" value="" placeholder="Your Name" />
		</fieldset>
		<fieldset class="scf-email">
			<label for="scf_email">Your Email</label>
			<input name="scf_email" id="scf_email" type="text" size="33" maxlength="99" value="" placeholder="Your Email" />
		</fieldset>
		<fieldset class="scf-subject">
			<label for="scf_subject">Email Subject</label>
			<input name="scf_subject" id="scf_subject" type="text" size="33" maxlength="99" value="" placeholder="Email Subject" />
		</fieldset>
		<fieldset class="scf-response">
			<label for="scf_response">1 + 1 =</label>
			<input name="scf_response" id="scf_response" type="text" size="33" maxlength="99" value="" placeholder="Correct Response" />
		</fieldset>
		<fieldset class="scf-message">
			<label for="scf_message">Your Message</label>
			<textarea name="scf_message" id="scf_message" cols="33" rows="7" placeholder="Your Message"></textarea>
		</fieldset>
		<div class="scf-submit">
			<input type="submit" id="scf-button" value="Send email">
			<input type="hidden" id="scf-key" name="scf-key" value="process">
			<input type="hidden" id="scf-nonce" name="scf-nonce" value="1234567890" />
		</div>
	</form>
</div>

And here is a complete set of CSS hooks for styling the form (visit the settings page to add custom styles):

/* contact form */

div#simple-contact-form {}
div#simple-contact-form form {}
#simple-contact-form fieldset {}
#simple-contact-form label {}
#simple-contact-form input {}
#simple-contact-form textarea {}

#simple-contact-form fieldset input {} /* excludes submit button */
#simple-contact-form div.scf-submit input {} /* submit button */

#simple-contact-form input:focus,
#simple-contact-form textarea:focus {}

fieldset.scf-name {}
fieldset.scf-email {}
fieldset.scf-subject {}
fieldset.scf-response {}
fieldset.scf-message {}

div.scf-submit {}

input#scf_name {}
input#scf_email {}
input#scf_subject {}
input#scf_response {}
input#scf_message {}
input#scf-button {}

/* successful result */

div#scf_success {}
div#scf_success pre {}
p.scf_success {}
p.scf_carbon {} 
p.scf_reset {}

/* error */

p.scf_spam {}
p.scf_error {}
input.scf_error {}
textarea.scf_error {}

Download

As explained at the beginning of this post, I no longer own or help develop Simple Basic Contact Form. The plugin is in good hands, but I built a better, faster, more awesome contact-form plugin. Check it out and download via the WP Plugin Directory:

Download Contact Form X »

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.

66 responses to “WordPress Plugin: Simple Basic Contact Form”

Prasad 2012/11/17 12:49 am

Wow, a simple plug-in. Jeff, can I ask you a question? Why are there so many different contact form plug-ins out there?

I see people generally opting for CF7, and then the minute it goes wonky (which it does for some reason or the other), then panicing and looking at other options.

Believe me, even I have gone through the same routine. Until finally I ended up putting together a separate contact form which directly feeds data to our CRM.

Jeff Starr 2012/11/17 1:01 am • Post Author

I like simple plugins :) It’s a good point about there being a lot of contact form plugins, and I think that is a great thing. Think of how many websites use a contact form. Quite a few, and most of them want something specifically suits their needs. So they either get to choose from the many available plugins, or like yourself, opt to build their own. Which is what I’m doing really. All of these “simple” plugins were originally built for me and my relatively basic design goals. But I also like to share my work, so there you go.

Ade 2012/11/17 4:53 am

The HTML needs a few simple accessibility-related improvements.

It dramatically misuses (and over-uses) fieldsets. They are NOT supposed to wrap single label/input pairs. And when used, they require a legend; but if you did that, the verbosity would go through the roof. Each input’s name attribute value should be understandable to humans because some accessibility APIs generate each label/input pair’s accessible name from that value rather than the label text. This is a result of the very bad habit of omitting labels. Removing the scf_ prefix would be ideal. It is very good to see someone writing “required” indication in plain text, though.

Jeff Starr 2012/11/23 1:11 pm • Post Author

Thanks for the feedback Ade. Just out of curiosity, why shouldn’t fieldsets be used to wrap single label/inputs? Sounds interesting..
- Ade 2012/11/24 9:07 am
  
  Fieldsets are only intended to group multiple label/control pairs that are directly related to one another. If there is no group, either because there is only one pair or there is no direct relationship, fieldsets should not be used.
  
  They have to be used sparingly because they significantly increase the verbosity of a form by effectively adding content to every single label! Nesting is even worse, incidentally, for that reason. Added to that, any illogical grouping or overuse has potential for confusion.
  
  If someone follows your example form, but adds legends (which all fieldsets require), an assisted user will find only one label/control pair per legend but expect more than one and may believe that they have missed some controls. I have seen this happen in test sessions.
  
  Using fieldsets like that is rather like using a UL with only one item in it. Often, fieldsets can be more annoying than helpful.
- Jeff Starr 2012/11/24 1:08 pm • Post Author
  
  Hi Ade, thanks for taking the time to explain. Question: when the legend tags are omitted is there any real reason not to use fieldsets for each label/input pair?

Dawson 2012/11/22 9:36 am

Thanks Jeff for this simple and awesome contact form plugin. There are a bunch of crap contact form plugins out there but this one is clean and perfectly fits my requirement.

Keith Davis 2012/11/23 12:47 pm

I like the look of it Jeff
I’m changing themes on a client site thie weekend, I might give this one a try.

Thanks for sharing.

Jeff Starr 2012/11/23 1:13 pm • Post Author

Awesome, let me know if anything could be made better for the next update.
- Keith Davis 2012/11/23 1:19 pm
  
  Just messing with the CSS
  I’ll post you a link when the site is live.

Ade 2012/11/24 6:27 pm

@Jeff, re your last reply. Yes, as I mentioned, fieldsets require legends. I always advise firmly against resorting to invalid mark-up, not just because it is bad practice, but because it often results in less accessible mark-up.

And in your case, there is absolutely no need for those fieldsets to be there. Forms need only a single wrapper (e.g. div) inside the form tags.

Jeff Starr 2012/11/24 6:49 pm • Post Author

In HTML5 legends in fieldsets are optional:

http://dev.w3.org/html5/spec/single-page.html#the-fieldset-element

So the markup is clean, easy to style, and more importantly valid. What I can’t find is where in spec it says that a “set” of form controls means “more than one.” Do you happen to have a reference for it?
- Ade 2012/11/24 7:36 pm
  
  Yes, I’m familiar with the HTML5 “spec”, but you no doubt know as well as I do that using any and all aspects of this draft spec in the real world, without consideration and testing, is foolhardy and frequently damaging to accessibility. HTML is supposed to be, as much as possible, reliable, universal and agnostic.
  
  If you feel OK about omitting a legend, that is surely time to ask whether the fieldset is necessary in the first place. And consider the point of a legend: without it, a fieldset has no real practical purpose. Allowing its omission is an example of the wrong thinking that is quite common in HTML5.
  
  Regarding grouping, the the HTML standard states that they are used to “group thematically related controls and labels”. In other words, more than just one label/control pair. Besides which, it is plain common sense and good practice for the reasons that I previously explained.
- Jeff Starr 2012/11/24 7:59 pm • Post Author
  
  Ah, that’s the beauty of HTML spec, there’s plenty of room for interpretation and application. I get what you’re saying, but keep in mind that it’s just one possible way of doing it. I appreciate you taking the time to share your opinion, but there’s no need to deride other points of view as “foolhardy”.
  
  Your interpretation of “group thematically related controls and labels” is debatable, leaving no real reason why anything should be changed in the plugin’s markup.
  
  I think we should agree to disagree on this one :)

Ade 2012/11/25 5:24 am

I would just like to point out, Jeff, that I did not deride anyone’s point of view, as you claim. That is not a fair interpretation of what I wrote. It is not just my interpretation, incidentally…

Jeff Starr 2012/11/25 10:07 pm • Post Author

It’s all good Ade, you make some great points, I just happen to disagree with (most of) them.

Theo 2012/11/26 1:21 pm

Love simple things, will try this one, thank you!

Oliver 2012/12/11 11:33 am

Hello Jeff,
i just installed your plugin and i get some problem.
we use cyrillic letters and i get some abracadabra chars inside form fields when user makes error and browser returns error page, the same i get on your demo page. otherwise email is sent ok with good chars.
what should i change then?

Mike 2012/12/16 11:11 am

Hi Jeff,
I went to the following url to view the demo sbcf but it doesnt seem to be displayed there.

https://perishablepress.com/contact/

Happy trails, Mike

David Beja 2012/12/17 12:47 am

Hi Jeff,

Great plugin.
For me is missing only one option, the text that appears in the button to send the form. I’m using in another language and I could translate all fields in the settings except that one.

Jeff Starr 2012/12/17 11:49 am • Post Author

Thanks David, I’ve added that to the to-do list for the next update.
- David 2012/12/17 11:58 am
  
  Great! Thanks

cowboy Mike 2012/12/17 12:29 pm

Hi Jeff,
I have been wrestling with the Contact Form 7 plugin. It is giving me fits in that it reports the form data has successfully been submitted but the email never arrives.

I have tried everything except using smtp mail. I looked at email logs, checked spam filters, had my hositng provide TMZvps look into it, etc. and I just cant get it resolved so I am going to make a run at your plugin.

Have you had any issues like what I just described… with your plugin? If your works I’ll be happy to donate. :-)

Can you please explain the difference between this plugin and Contact Coldform and why one might choose one over the other?

Happy trails, Mike

Jeff Starr 2012/12/18 1:53 pm • Post Author

Hi Mike,

I’ve not experienced any sort of issues with SBCF, but have seen that some email plugins use mail() to send messages instead of WP’s built-in wp_mail() functionality. I’m not sure which one CF7 uses, but Simple Basic uses wp_mail.. if it doesn’t work, a quick check would be to edit lines 223/224 from “wp_mail” to “mail”.

Scott 2013/01/08 6:37 am

Hello, I want to hide the whole Message section, can you tell me how I do that with css? I’ve tried display:none on various elements, but can’t get it to hide the whole thing. This removes the box, but the container/row is still there #simple-contact-form fieldset textarea {display:none;}

Jeff Starr 2013/01/08 5:42 pm • Post Author

Hi Scott, try adding this line to the Coldform’s “Custom Styles” field:

#simple-contact-form fieldset.coldform-message { display: none; }

Comments are closed for this post. Something to add? Let me know.

Prasad 2012/11/17 12:49 am

Wow, a simple plug-in. Jeff, can I ask you a question? Why are there so many different contact form plug-ins out there?

I see people generally opting for CF7, and then the minute it goes wonky (which it does for some reason or the other), then panicing and looking at other options.

Believe me, even I have gone through the same routine. Until finally I ended up putting together a separate contact form which directly feeds data to our CRM.
- Jeff Starr 2012/11/17 1:01 am • Post Author
  
  I like simple plugins :) It’s a good point about there being a lot of contact form plugins, and I think that is a great thing. Think of how many websites use a contact form. Quite a few, and most of them want something specifically suits their needs. So they either get to choose from the many available plugins, or like yourself, opt to build their own. Which is what I’m doing really. All of these “simple” plugins were originally built for me and my relatively basic design goals. But I also like to share my work, so there you go.
Ade 2012/11/17 4:53 am

The HTML needs a few simple accessibility-related improvements.

It dramatically misuses (and over-uses) fieldsets. They are NOT supposed to wrap single label/input pairs. And when used, they require a legend; but if you did that, the verbosity would go through the roof. Each input’s name attribute value should be understandable to humans because some accessibility APIs generate each label/input pair’s accessible name from that value rather than the label text. This is a result of the very bad habit of omitting labels. Removing the scf_ prefix would be ideal. It is very good to see someone writing “required” indication in plain text, though.
- Jeff Starr 2012/11/23 1:11 pm • Post Author
  
  Thanks for the feedback Ade. Just out of curiosity, why shouldn’t fieldsets be used to wrap single label/inputs? Sounds interesting..
  - Ade 2012/11/24 9:07 am
    
    Fieldsets are only intended to group multiple label/control pairs that are directly related to one another. If there is no group, either because there is only one pair or there is no direct relationship, fieldsets should not be used.
    
    They have to be used sparingly because they significantly increase the verbosity of a form by effectively adding content to every single label! Nesting is even worse, incidentally, for that reason. Added to that, any illogical grouping or overuse has potential for confusion.
    
    If someone follows your example form, but adds legends (which all fieldsets require), an assisted user will find only one label/control pair per legend but expect more than one and may believe that they have missed some controls. I have seen this happen in test sessions.
    
    Using fieldsets like that is rather like using a UL with only one item in it. Often, fieldsets can be more annoying than helpful.
  - Jeff Starr 2012/11/24 1:08 pm • Post Author
    
    Hi Ade, thanks for taking the time to explain. Question: when the legend tags are omitted is there any real reason not to use fieldsets for each label/input pair?
Dawson 2012/11/22 9:36 am

Thanks Jeff for this simple and awesome contact form plugin. There are a bunch of crap contact form plugins out there but this one is clean and perfectly fits my requirement.
Keith Davis 2012/11/23 12:47 pm

I like the look of it Jeff
I’m changing themes on a client site thie weekend, I might give this one a try.

Thanks for sharing.
- Jeff Starr 2012/11/23 1:13 pm • Post Author
  
  Awesome, let me know if anything could be made better for the next update.
  - Keith Davis 2012/11/23 1:19 pm
    
    Just messing with the CSS
    I’ll post you a link when the site is live.
Ade 2012/11/24 6:27 pm

@Jeff, re your last reply. Yes, as I mentioned, fieldsets require legends. I always advise firmly against resorting to invalid mark-up, not just because it is bad practice, but because it often results in less accessible mark-up.

And in your case, there is absolutely no need for those fieldsets to be there. Forms need only a single wrapper (e.g. div) inside the form tags.
- Jeff Starr 2012/11/24 6:49 pm • Post Author
  
  In HTML5 legends in fieldsets are optional:
  
  http://dev.w3.org/html5/spec/single-page.html#the-fieldset-element
  
  So the markup is clean, easy to style, and more importantly valid. What I can’t find is where in spec it says that a “set” of form controls means “more than one.” Do you happen to have a reference for it?
  - Ade 2012/11/24 7:36 pm
    
    Yes, I’m familiar with the HTML5 “spec”, but you no doubt know as well as I do that using any and all aspects of this draft spec in the real world, without consideration and testing, is foolhardy and frequently damaging to accessibility. HTML is supposed to be, as much as possible, reliable, universal and agnostic.
    
    If you feel OK about omitting a legend, that is surely time to ask whether the fieldset is necessary in the first place. And consider the point of a legend: without it, a fieldset has no real practical purpose. Allowing its omission is an example of the wrong thinking that is quite common in HTML5.
    
    Regarding grouping, the the HTML standard states that they are used to “group thematically related controls and labels”. In other words, more than just one label/control pair. Besides which, it is plain common sense and good practice for the reasons that I previously explained.
  - Jeff Starr 2012/11/24 7:59 pm • Post Author
    
    Ah, that’s the beauty of HTML spec, there’s plenty of room for interpretation and application. I get what you’re saying, but keep in mind that it’s just one possible way of doing it. I appreciate you taking the time to share your opinion, but there’s no need to deride other points of view as “foolhardy”.
    
    Your interpretation of “group thematically related controls and labels” is debatable, leaving no real reason why anything should be changed in the plugin’s markup.
    
    I think we should agree to disagree on this one :)
Ade 2012/11/25 5:24 am

I would just like to point out, Jeff, that I did not deride anyone’s point of view, as you claim. That is not a fair interpretation of what I wrote. It is not just my interpretation, incidentally…
- Jeff Starr 2012/11/25 10:07 pm • Post Author
  
  It’s all good Ade, you make some great points, I just happen to disagree with (most of) them.
Theo 2012/11/26 1:21 pm

Love simple things, will try this one, thank you!
Oliver 2012/12/11 11:33 am

Hello Jeff,
i just installed your plugin and i get some problem.
we use cyrillic letters and i get some abracadabra chars inside form fields when user makes error and browser returns error page, the same i get on your demo page. otherwise email is sent ok with good chars.
what should i change then?
Mike 2012/12/16 11:11 am

Hi Jeff,
I went to the following url to view the demo sbcf but it doesnt seem to be displayed there.

https://perishablepress.com/contact/

Happy trails, Mike
David Beja 2012/12/17 12:47 am

Hi Jeff,

Great plugin.
For me is missing only one option, the text that appears in the button to send the form. I’m using in another language and I could translate all fields in the settings except that one.
- Jeff Starr 2012/12/17 11:49 am • Post Author
  
  Thanks David, I’ve added that to the to-do list for the next update.
  - David 2012/12/17 11:58 am
    
    Great! Thanks
cowboy Mike 2012/12/17 12:29 pm

Hi Jeff,
I have been wrestling with the Contact Form 7 plugin. It is giving me fits in that it reports the form data has successfully been submitted but the email never arrives.

I have tried everything except using smtp mail. I looked at email logs, checked spam filters, had my hositng provide TMZvps look into it, etc. and I just cant get it resolved so I am going to make a run at your plugin.

Have you had any issues like what I just described… with your plugin? If your works I’ll be happy to donate. :-)

Can you please explain the difference between this plugin and Contact Coldform and why one might choose one over the other?

Happy trails, Mike
- Jeff Starr 2012/12/18 1:53 pm • Post Author
  
  Hi Mike,
  
  I’ve not experienced any sort of issues with SBCF, but have seen that some email plugins use mail() to send messages instead of WP’s built-in wp_mail() functionality. I’m not sure which one CF7 uses, but Simple Basic uses wp_mail.. if it doesn’t work, a quick check would be to edit lines 223/224 from “wp_mail” to “mail”.
Scott 2013/01/08 6:37 am

Hello, I want to hide the whole Message section, can you tell me how I do that with css? I’ve tried display:none on various elements, but can’t get it to hide the whole thing. This removes the box, but the container/row is still there #simple-contact-form fieldset textarea {display:none;}
- Jeff Starr 2013/01/08 5:42 pm • Post Author
  
  Hi Scott, try adding this line to the Coldform’s “Custom Styles” field:
  
  #simple-contact-form fieldset.coldform-message { display: none; }

123 • Newer Comments »