Meg Nicholas

Clean and Simple WordPress Contact Form

Tagged with:
Posted: April 7, 2013

Clean and Simple Contact Form

Description

Why Choose This Plugin?

Installation Instructions

How to Use

Additional Settings

Screenshots

Demonstration

Download

Customisation


Description


This is a simple WordPress contact form with Google reCAPTCHA option for your WordPress site. There is very minimal set-up required. A standard set of input boxes are provided, these include Email Address, Name, Message and a nice big ‘Send Message’ button. When your user has completed the form an email will be sent to you containing your user’s message. To reply simply click the ‘reply’ button on your email client. The email address used is the one you have set up in WordPress under ‘Settings’ -> ‘General’, so do check this is correct.

To help prevent spam, this plugin allows you to add a ‘reCAPTCHA’. This adds a picture of a couple of words to the bottom of the form. Your user must correctly type the words before the form can be submitted, and in so doing, prove that they are human.

Why Choose This Plugin?


Granted there are many plugins of this type in existence already. Why use this one in-particular? Here’s why:

  • Minimal setup. Simply activate the plugin and place the shortcode [cscf-contact-form] on any post or page.
  • Safe. All input entered by your user  is stripped back to minimise as far as possible the likelihood of any malicious user attempting to inject a script into your website. You can turn on reCAPTCHA to avoid your form being abused by bots.
  • Ajax enabled. You have the option to turn on ajax (client-side) validation which gives your users immediate guidance when completing the form without having to wait for the page to refresh.
  • The form can integrate seamlessly into your website. Turn off the plugin’s default css style sheet so that your theme’s style sheet can be used instead.
  • If your theme is based on twitter bootstrap then this plugin will fit right in because it already has all the right div’s and CSS classes for bootstrap.
  • This plugin will only link in its jQuery file where it’s needed, it will not impose itself on every page of your whole site!
  • This plugin is fully supported and updated to work with the latest version of WordPress.
  • Written by an experienced PHP programmer (me!) and rigorously tested as standard practice.

Hopefully this plugin will fulfil all your needs, if not get in-touch and I will customise to your exact requirements.

Installation Instructions


There are two ways to install:

  1. Click the ‘Install Now’ link from the plugin library listing to automatically download and install.
  2. Download the plugin. To install the downloaded zip file simply double click to extract it and place the ‘clean-and-simple-contact-form-by-meg-nicholas‘ folder in your wordpress plugins folder, i.e. [wordpress]/wp-content/plugins (where [wordpress] is the directory that you installed WordPress in). Then visit the plugin page on your wordpress site and click ‘Activate’ against the ‘Clean and Simple Contact Form’ plugin listing.

How to Use


Unless you want to change messages or add reCAPTCHA to your contact form then this plugin will work without any additional setup.

Important: Check that you have an email address set-up in your WordPress ‘Settings’->’General’ page. This is the address that the plugin will initially use to send the contents of the contact form. You can change this address in the settings page for the plugin.

*** Do you have Jetpack plugin installed? If so it’s very important that you disable Jetpack’s contact form otherwise the wrong form will be displayed. (more info) ***

To add the contact form to your WordPress website simply place the shortcode [cscf-contact-form] on the post or page that you wish the form to appear on.

Short Code On A Page

Short Code On A Page

Additional Settings


This plugin will work out of the box without any additional setup. You have the option to change the default messages that are displayed to your user and to add reCAPTCHA capabilities.

Go to the settings screen for the Clean and Simple Contact Form plugin.

You will find a link to the setting screen against the entry of this plugin on the ‘Installed Plugins’ page.

Here is a list of things that you can change:

  • Use reCAPTCHA: Tick this option if you wish your form to have a reCAPTCHA box. ReCAPTCHA helps to avoid spam bots using your form by checking that the form filler is actually a real person. To use reCAPTCHA you will need to get a some special keys from google. Once you have your keys enter them into the Public key and Private key boxes
  • reCAPTCHA Public Key: Enter the public key that you obtained from here.
  • reCAPTCHA Private Key: Enter the private key that you obtained from here.
  • reCAPTCHA Theme: Here you can change the reCAPTCHA box theme so that it fits with the style of your website.
  • Message: The message displayed to the user at the top of the contact form.
  • Message Sent Heading: The message heading or title displayed to the user after the message has been sent.
  • Message Sent Content: The message content or body displayed to the user after the message has been sent.
  • Use this plugin’s default stylesheet: The plugin comes with a default style sheet to make the form look nice for your user. Untick this if you want to use your theme’s stylesheet instead. The default stylesheet will simply not be linked in.
  • Use client side validation (Ajax): When ticked the contact form will be validated on the client giving your user instant feedback if they have filled the form in incorrectly. If you wish the form to be validated only on the server then untick this option.
  • Recipient Email: The email address where you would like all messages to be sent. This will default to the email address you have specified under ‘E-Mail Address’ in your WordPress General Settings. If you want your mail sent to a different address then enter it here.
  • Email Subject: This is the email subject that will appear on all messages. If you would like to set it to something different then enter it here.
  • !NEW! ‘From’ Email Address: If your email provider won’t allow you to send emails from any address then you need this! Enter an allowed email address. This is usually an address within your domain. You won’t be able to directly reply to the email, just use the one given in the message.

Customisation

If this plugin does not quite fulfil your needs please do ask me to customise it for you. There will be a charge, and I do reserve the right to include the requested customisation in later releases of this plugin. Please contact me for a quote.

Screenshots


40 thoughts on “Clean and Simple WordPress Contact Form


    1. admin admin

      The plugin has been coded so that it is as light as possible. You could turn off the plugin’s stylesheet and incorporate it into your theme’s stylesheet instead. That might speed things up.



  1. belinunda

    Hello,
    I like your plugin but could you say me if it is possible to reduce the size of space used to left the message ?
    Thanks a lot for your answer.
    I wish you a very good evening !!!


    1. meghan Post author

      Hi there, there are no options to change the layout unfortunately. You could disable the default stylesheet and then write your own styling, this would give you more freedom to set html element sizes. Thanks, Meg


  2. dwseppala

    Hey all…shortcode isn’t producing the form…I’ve tried a few times…deactivated and reactivated plugin. settings seem right, pretty easy…but the shortcode simply shows as short code on my page.


    1. meghan Post author

      Which short code have you used? ‘cscf-contact-form’ will work for 4.1.2


  3. Amanda

    Thank you, meg, for an outstanding opensource product and for such an informative blog! Your “clean and simple contact form” has a nice appearance and it is extremely easy to use for a novice. Without brilliant people like you to donate your services, some of us beginners would still be in the technology dark ages.


    1. admin admin

      Thank you Amanda, it’s nice appreciative comments like this that make it all the more enjoyable.


  4. Phoenix

    Hey Meg, I’m using the responsive theme. I installed and followed the instructions for the settings. But when I test the contact form out, I’m not getting the mails sent to the email address that I’ve specified. Could you please help me out with this issue?


    1. admin admin

      Are you sure that you have the right contact form showing? If you have jetpack installed it may be jetpack’s contact form instead.


  5. Martin

    Installed and works very well. However, the Message input box changes to black with green text upon entry, which is very hard to read. Is there a way I can change this in Clean & Simple, or is this a function of my installed WP Theme (ar)?


    1. admin admin

      Hi Martin, there is some css in your theme doing this. If you can give me a url I can suggest what css needs to be changed.



        1. admin admin

          It seems to be this line (576) in style.css that is setting the background. You could try commenting out the background style, but this might effect the styling of your site elsewhere.

          :focus, #numbered-pagination a:focus {
          color: #dddddd;
          background: #310b0d;
          }




  6. Scotte

    Hi

    There are 23 files and 5 folders

    Line 52 of class.cff_settings.php has <? instead of <?php. Correcting this reveals the settings for the form.


    1. meghan Post author

      Hi Scotte,
      Yes I had just discovered this. I thought I was tidying up some code but created a bug instead. You would think that this would have broken all versions of php but it ran fine on the two versions I have running , 5.3 and 5.4 so it wasn’t picked up. I have just released version 4.1.0 which is ready for download now so the problem is now fixed.
      Thanks Meg


  7. Yonnel

    Hi Meg,

    I am currently trying your nice-looking contact form. It does work straight out of the box, which is cool, however I cannot seem to see anything in the Settings page. More precisely, I get the “leave a review. Thank you!”, and nothing afterwards. My theme is custom-built on a Twenty Ten base, and I installed the plugin from the WP plugin library.

    Any idea what could have caused this? I absolutely need the Settings page, at least to translate some field into French (any need for a .po/.mo translation help, btw?).

    Thanks in advance for your help!


    1. meghan Post author

      Hi Yonnel,
      Before we go any further please can you try uninstalling and reinstalling. The reason is that when I first uploaded 4.0.9 to wordpress.org I had a senior moment and one of the files did not get copied. It was about 30 minutes before I realised this and corrected it. So if you were unlucky enough to pick this window to download, it will not have worked! Please can you deactivate and then delete the plugin and then reinstall. Sorry for the inconvenience of this.
      I plan to add language support very soon as this plugin seems to be getting popular!
      Meg


      1. Yonnel

        Hi Meg, and thanks for your quick reply.
        I just did this twice, with different methods, and nothing changed. So I looked it up, and apparently the missing file (it would be options.php) is still missing.


        1. meghan Post author

          Can you tell me your domain, the version of wordpress you are using, the theme and the plugins you have installed?

          Things to do:

          Check your installation of the plugin:
          Can you go to wp-content/plugins/clean-and-simple-contact-form-by-meg-nicholas of your wp installation and tell me the number of files you have, should be 28 files in total.

          Check for conflicts:
          If you have a development version you can play with try disabling all plugins, revert to the default twentytwelve theme and then try installing again. If it works add back the original theme and each plugin one by one checking as you go.


    2. meghan

      Hi Yonnel, I have enabled language support in the latest version. If you would like to add the french translation I would be very grateful!
      Thanks, Meg


  8. meghan Post author

    Hi Glenn again,

    On further thought perhaps you should raise this issue with symbiostock? In order to play nicely with the rest of your wordpress setup symbiostock should only set this filter when it’s needed (i.e. just before emailing) rather than at the time of theme activation, as it is currently doing. This means that the same conflict could potentially occur with any other plugin you install that also has an emailing function.

    My contact form uses the wp function wp_mail() to do its emailing, so any other plugin that also uses this (recommended) way of emailing will also be affected.

    I will still look into circumventing this conflict in my code anyway for the next update.

    Do keep me posted on this one.

    Thanks, Meg


    1. Gus

      Hi Meghan,
      I am using child theme customizr and I am having the same problem as Glenn. I would be okay with if you pass the email address along with the message in the body of my email. So when I receive the email from myself as my theme is doing, then at least I will have the visitors email address and message


      1. meghan

        Hi Gus,

        I did actually fix Glenn’s issue, it was a conflict with the symbiostock theme, so I am curious as to what is happening to you. Please can you tell me what theme you are using, and what plugins and your url and I will look into it.
        Unfortunately there are so many themes and plugin’s out there, and things are always changing, so it is impossible to test with everything, so new conflicts can always occur.
        Thanks, Meg


      2. meghan

        Hi Gus,

        Further to my last reply, what you could do is to disable all your plugins except clean and simple and then revert to twenty twelve theme. Try to send a contact form message again, does it work? If so then add back each thing until the contact form breaks, then let me know what you find.

        Thanks, Meg


    2. Gus

      Hi Megan I am resubmitting a new reply since the last one timed-out. I am having the same issue as Glenn. I would be okay with a temporary fix. Maybe if you pass the email address in the body of the email being sent from my theme. That way I have the visitor’s email address and message?


      1. meghan Post author

        Glenn’s problem was fixed. First check you are using the latest version. If so, please can you tell me what theme you are using, and what plugins and your url and I will look into it.
        If you don’t mind I would rather fix the underlying problem.
        Thanks, Meg


        1. Gio

          Same issue for me…
          I’m using your 4.1.2 version, WordPress 3.5.1 and Theme Customizr
          As Gus suggested I think that if you insert user email inside the message this should be a quick fix


  9. meghan Post author

    Hi Glen
    I have installed symbiostock theme and yes there is a conflict. I don’t know how technical you are with wordpress so forgive me if I am being too much so ..

    Symbio allows you to set a correspondence email on its settings page which defaults to the wordpress admin email. After my contact form correctly sets the ‘from’ email address to the contents of the ‘email address’ field on the contact form, symbio then overrides it using (the techical bit) a wordpress ‘filter’, which sets it back to the correspondence email. This causes the email to be sent to and from the same address.

    I will look into how we can possibly solve the conflict. Maybe I could put a filter in too that has a higher priority.


  10. Glenn Specht

    I downloaded and tested your plug-in…simple and clean…but how do I respond to the contact? The email address they send seems to disappear..or am I missing something


    1. meghan Post author

      Hi Glenn. I’ve had one other person say this was happening. They were on wp version 3.4.1 I’m not sure if upgrading solved the problem as I never heard back. Which version of WordPress are you on?


      1. Glenn Specht

        I have the latest version ( 3.5.1) I did a little trouble shooting and it works properly on one domain and not another.

        The domain/site it doesn’t work on is http://stockimages.glennspecht.com/wp/ which has the Symbiostock theme installed. There is likely a conflict between this theme and your plug. I will investigate further.

        Glenn


  11. James Durkan

    Meg, I’ve enhanced it a little, without detracting from the simplicity, I hope. It now takes an attribute ‘recipient’ – for those occasions when the form is for the attention of someone other than the blog administrator (events or notices, etc) [contact-form recipient=”addy@mail.com”]

    Continuing to use [contact-from] means it executes as before, taking the blog admin e-mail address.


    1. meghan Post author

      Hi James, thanks for that. I am going to be doing an update soon and that feature is on my list. I’ll post a list of the enhancements I am going to be doing soon. I’ve been trying to get my first theme finished but it’s taking a lot longer than I anticipated, they really do take a lot of work!
      The code for the contact form is here on github feel free to fork it if you wish and I can build your code into the next release.


  12. kel

    You need to make it clear that the code is [contact-form] and not just contact-form for those who aren’t wordpress savy


    1. meghan Post author

      Thanks for pointing that out. I did have the square brackets in but the editor had filtered it out.


Comments are closed.

%d bloggers like this: