#37

Product support

Visit this product's website for support.

Categories

  • Utility

This is simple but flexible contact form builder that supports translation.

It allows you to create your own (contact) form with custom fields and rules.

All sent data are stored in Messages list.

Admins can be notified of sent form by email, visitors can receive auto reply message.

It also contains passive antispam control (filter about 80% of spam) and IP address protection (limit submits from one address during a day).

Functions overview

  • AJAX enabled form that works even when JavaScript is disabled in visitor's browser
  • custom fields with own type, label, CSS classes, order and validation
  • necessary JS and CSS can be autoamtically injected if you need to start quick
  • translation support for Rainlab Translate
  • passive antispam based on checking form sendind time and spam field content
  • IP address protection limits form submits from one address during a day
  • store sent data in Messages list, read/unread state and preview of sent data
  • auto reply and notification emails
  • dashboard widgets: Messages stats and New messages

Why Small Plugins?

I do not have ambition to create big and expensive solutions. I would like to create free small plugins for all basic function I need on almost every web project.

This is also my way of learning OctoberCMS/Laravel and I will be happy if you find it useful :)

Basic form

Small Contact form

Simple but flexible contact form builder with custom fields, validation and passive antispam.

Installation

GitHub clone into /plugins dir:

git clone https://github.com/jan-vince/smallcontactform

OctoberCMS backend

Just look for 'Small Contact Form' in search field in:

Settings > Updates & Plugins > Install plugins

Permissions

Settings > Administrators

You can set permissions to restrict access to Settings > Small plugins > Contact form and to messages list.

Setup new Contact form

Settings > Small Contact form

FORM

  • You can set your own CSS class name and general success/error messages.
  • If you need it, placeholders can be used instead of labels
  • Form can be hidden after successful submit.

Enable AJAX

By default, sending form will trigger page reload. With AJAX, everything can be done without page reloading which will be more user friendly.
If user's browser doesn't support (or has disabled) JavaScript, form will still work with page reloads after send.

  • For AJAX enabled form, before send confirmation dialog can be required.

Add Assets

If you want to start quickly, you can enable Add assets checkbox - and then Add CSS and JS assets.
This will include necessary styles (Bootstrap, AJAX, October AJAX) and scripts (jQuery, Bootstrap, October AJAX framework and extras).

But you have to include Twig tags {% styles %} and {% scripts %} into your layout or page like this:

<html>
    <head>
        {% styles %}
    </head>
<body>

    {% page %}

    {% scripts %}

</body>

</html>

If you want to insert assets by hand, you can do it this way (or similar):

<html>
    <head>
        <link href="{{['~/modules/system/assets/css/framework.extras.css']|theme }}.css" rel="stylesheet">
    </head>
<body>

    {% page %}

    <script type="text/javascript" src="{{ [
        [email protected]',
        [email protected]',
        [email protected]']|theme}}.js">
    </script>

</body>

</html>

SEND BUTTON

  • You can set button class and text.
  • Form can automatically redirect to given URL after successful submit.

FIELDS

Here you can add fields to build your contact (or other) form.

The idea is simple (and solution is so I hope):

  • Click to add new field
  • Set it's name (this is used for &lt;input name=&quot;{{name}}&quot; id=&quot;{{name}}&quot;&gt;), so it should be lowercase without special characters.
  • Set Label if you need one (it is used for descriptive text above input field)
  • Set autofocus if you want cursor to automatically jump to this field (if checked more than one field, cursor jumps to first one)
  • Add field validation rules:
    • You can add one or more validation rules and error messages for them
    • Error messages will be shown above input field
  • You can reorder fields by drag and drop left circle (all fields can be collapsed by pressing Ctrl+click (Cmd+click on MacOS) on arrow in right top corners)

COLUMNS MAPPING

System writes all form data in database, but for quick overview Name, Email and Message columns are visible separately in Messages list.

But you have to help system to identify these columns by mapping to your form fields.

These mappings are also used for auto reply emails where at least Email field mapping is important.

ANTISPAM

Very simple implementation of passive antispam (inspired by Nette AntiSpam Control).

The idea behind this is to check how fast is form send and if robots-catching field is filled.

  • When allowed, you can set form delay (in seconds) to prevent too fast form sending (mostly by robots). You can add custom error message (will be shown in general error message box above form).
  • You can add antispam field label and error message for non JavaScript enabled browsers.
    • If JavaScript is working, antispam field is automatically hidden and cleared.

Check sender's IP

You can add an extra form protection with limit submits from one IP address.

This check has own error message and custom field to set maximum submits.

EMAIL

Mails can be sent directly or queued (OctoberCMS queue must be configured!).

Don't forget to configure mail preferences in Settings > Mail > Mail configuration!

Data in email templates

There are variables available in all email templates:

  • fields is array of [ 'field name' => 'post value' ]
  • fieldsDetails is array of [ 'field name' => ['name', 'value', 'type', ...] ]

Allow autoreply

Email can be send to form sender as confirmation.

  • You have to enter email address and name - it will be used as FROM field
  • Email subject can be manually added here (or edited in Settings > Mail > Mail templates (code: janvince.smallcontactform::mail.autoreply))
  • Email TO address and name have to be assigned to form fields (in selections only corresponding field types are shown - if you don't see one, try to check it's type in Fields tab)
    • Message field can be also assigned (and will be saved separately into database)

Allow notifications

A notification of sent form can be send to provided email address.

TRANSLATION

You can allow translation with RainLab Translate plugin.

After installation of Translate plugin, please add at least two languages in Settings > Translate > Manage languages. For translations to work there must be a localePicker component included in your layout/page.

Form texts

Most of Small Contact form texts can be edited right in Settings > Small plugins > Contact form.

Custom form fields

Translate plugin doesn't supports translation of individual repeater fields yet, so form field texts (label, validation error messages) have to be - for now - translated in a dictionary: Settings > Translate > Translate messages

Please note that form fields labels will be shown in dictionary after first form render (on your frontend page) and validation error messages after first send.

Email templates

You can create your own email templates in Settings > Mail > Mail templates (for hint look inside of default templates starting with janvince.smallcontactform::).

Remember your email templates CODE and put in in Small Contact form email settings in Settings > Small plugins > Contact form > Email tab. For each language there can be specific template.

There is {{fields}} array available inside of email templates.

If your custom form field has name eg. 'email', you use it in template with {{fields.email}}.

MESSAGES LIST

All sent data from Contact form are saved and listed in backend Messages list.

If email, name and message fields are assigned on Settings > Small plugins > contact form > Columns mapping tab, they will be saved and shown in separate columns.

You can click on a record to see all form data. The message will be marked as read.

DASHBOARD REPORT WIDGETS

There are available report widgets to be used on OctoberCMS dashboard.

Messages stats

Shows basic messages statistics.

New messages

Shows number of new messages. The color changes to green if there are any.

You can simply click widget to open Messages list.


My thanks goes to:
OctoberCMS team members and supporters for this great system.
Andrew Measham for his photo.
Font Awesome for nice icons.

Created by Jan Vince, freelance web designer from Czech Republic.

  • Found the plugin useful on 17 Aug, 2017

    Site users can not send the messages through the contact form.

    Please help me!

  • author

    Replied on 17 Aug, 2017

    Hi,
    can you please open an issue on GitHub?

    Reviews are not a good place to discuss problems.

    Thank you,
    Jan

  • Found the plugin useful on 14 Aug, 2017

    Excellent work! This seems like it is the only actual active contact form plugin on OctoberCMS. I'll probably be switching over all of my projects to it!

    One request, could you allow for multiple templates? E.g. we have a general sales "contact" form (that sends to [email protected]) and we have a "support" form (that sends to [email protected]). It seems this plugin only allows for one form unless I am mistaken?

    Thanks so much for your hard work! Please don't vanish like the other contact form devs :)

  • author

    Replied on 14 Aug, 2017

    Hi Alex and thanks for your review!

    This was supposed to be a simple plugin, so only one instance/setup is possible for one OctoberCMS installation. But maybe there are some ways.

    Please open a GitHub issue for this so we can discuss how I can help you.

  • Found the plugin useful on 13 Aug, 2017

    Slow sending, but it works. Thank you! Please add reCaptcha support.

  • author

    Replied on 13 Aug, 2017

    Hi @zooks and thanks for review!

    You can maybe open an issue on GitHub and write more details about the slowness as I have never experienced it.

  • Found the plugin useful on 28 Jun, 2017

    The only form plugin who allow a to translate form fields.

    It's higthly configurable...

1.4.11

Added "fieldsDetails" array to all email templates to have access to field labels, types and more

Aug 14, 2017

1.4.10

Fidex typo in lang filename

Jul 12, 2017

1.4.9

Added scoreboard button to quickly open form settings

Jul 11, 2017

1.4.8

Changes to allow multiple use of contact form (form and message blocks has now unique IDs)

Jul 11, 2017

1.4.7

Removed hardcoded date format for created_at column in messages list, updated README and added hungarian language (thanks Szabó Gergő for all this)

Jul 07, 2017

1.4.6

Removed field type restriction for Fields mapping

Jun 22, 2017

1.4.5

Fixed email template check

Jun 14, 2017

1.4.4

Fixed array of enabledLocales

Jun 14, 2017

1.4.3

Fixed translation of mail templates description in Settings > Mail templates

Jun 02, 2017

1.4.2

Added support for default translated mail templates (Czech and English for now)

Jun 02, 2017

1.4.1

Minor UI fix (thanks Szabó Gergő)

Jun 02, 2017

1.4.0

Added redirect option after successful submit (internal and external URL)

Jun 01, 2017

1.3.2

Added custom send button wrapper class

May 30, 2017

1.3.1

Added default value for getTranslated() method

May 26, 2017

1.3.0

Added translation support for Rainlab Translate plugin

May 26, 2017

1.2.8

Added option to use placeholders instead of labels

May 25, 2017

1.2.7

Changed remote_ip column type to string

May 25, 2017

1.2.6

Fixed IP protection error message

May 24, 2017

1.2.5

Added IP protection function (limit too many submits from one IP address)

May 24, 2017

1.2.4

Updated README.md with assets usage example

May 21, 2017

1.2.3

Fields mapping moved to separate tab *Columns mapping*

May 21, 2017

1.2.2

Mail templates convert new lines to <br> with {{ values|raw|nl2br }}

May 19, 2017

1.2.1

Mail templates now render values with {{ values|raw }}

May 19, 2017

1.2.0

Added dashboard report widgets (Stats and New messages)

May 19, 2017

1.1.0

Added function to delete records in Messages list

May 19, 2017

1.0.2

Fix some typos and add LICENCE file (thank to Szabó Gergő)

May 19, 2017

1.0.1

Fix form hiding after successful send

May 19, 2017

1.0.0

First version of Small Contact Form plugin

May 18, 2017