#21

Product support

Get help in the plugin support forum.

Categories

  • Marketing
  • Utility

A flexible and configurable contact form with a backend for setting some settings. It can be used with the default provided component or you can use you own custom markup for custom syling. Refer to the documentations for more details. To download, add to your project right here on the plugins page or in your updates section in your site dashboard search for LaminSanneh.FlexiContact in the plugin searchbox.

Quick Use Guide

  1. When creating a new page, add provided component called( Contact Form Displayer) to your page.
  2. Configure your website email settings to make sure your server can send emails.
  3. Fill in the details in the settings area for the plugin. This can be found by visiting the main menu link called system
  4. Go to the mail templates settings and configure the template called laminsanneh.flexicontact::emails.message to format the email you will receive.
  5. Go to url here to setup valid google captcha credentials as it is required to use the plugin

Please Give Feedback

A thumbs up is all I ask if this helped you, cheers.

Getting in touch

  • Github Repository Link here

  • Please le me know if you find any issues or bugs using this link.

  • My personal website is here for any personal contacts

Flexi Contact

A contact form plugin for OctoberCms to help easily embed a contact form on any page of your website. It works using ajax, so javascript is required. Also, you must configure your email settings in the admin area with a working smtp or other basic mail settings first. In other words, your server should be able to send emails for this plugin to work.

Installation or Setup


  1. Go to system on the main menus in your backend.

  2. Click on the settings subsection.

  3. Under the Marketing area, there should be a plugin setting called "Flexi Contact Settings", click on that.

  4. Read the sections and you must fill all of them.

  5. Go to url here to setup valid google captcha credentials as it is required to use the plugin

Usage


After doing the setup steps, you can use the contact form in two ways:

1. Using the component default markup or html

  • The plugin should display a component on the components tab on the cms main menu.

  • You can include the component like any other component, no customization needed.

  • The component has a default markup as shown below and depends on bootstrap.

` <div class="confirm-container"> <!--This will contain the confirmation when the email is successfully sent--> </div> <form class="flexiContactForm" role="form" data-request="{{ SELF }}::onMailSent" data-request-update="'{{ SELF }}::confirm': '.confirm-container'">

<div class="form-groups">
    <div class="form-group">
        <input type="text" class="form-control" value=""  name="name" placeholder="Enter name">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" value="" name="email" placeholder="Enter Email">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" value="" name="subject" placeholder="Enter Subject">
    </div>
    <div class="form-group">
        <textarea class="form-control" value="" name="body" placeholder="Enter Message" cols="30" rows="10"></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-lg pull-right">Send</button>
</div>

</form> `

  • You can remove the bootstrap specific classes but then you must style the form using your own custom css in your theme.

2. Using Custom markup or html

If you need to customize the markup for custom styling, donot embed the component as instructed above. Instead, embed the following html anywhere and remove the bootstrap specific classes and add your own. However, you must leave the (data-request, data-request-success and data-request-update) data-attributes intact as they are needed for the ajax to work. Refer to this doc section to know what's happening here in detail.

` <div class="confirm-container"> <!--This will contain the confirmation when the email is successfully sent--> </div> <form class="flexiContactForm" role="form" data-request="{{ SELF }}::onMailSent" data-request-update="'{{ SELF }}::confirm': '.confirm-container'">

<div class="form-groups">
    <div class="form-group">
        <input type="text" class="form-control" value=""  name="name" placeholder="Enter name">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" value="" name="email" placeholder="Enter Email">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" value="" name="subject" placeholder="Enter Subject">
    </div>
    <div class="form-group">
        <textarea class="form-control" value="" name="body" placeholder="Enter Message" cols="30" rows="10"></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-lg pull-right">Send</button>
</div>

</form> `

Component Options

1. injectBootstrapAssets

Lets you optionally include or exclude bootstrap asset files(javascript and css) in your page. This is useful incase you already have bootstrap loaded as part of your theme.

2. injectMainScript

Lets you optionally include or exclude the main script files in your page. This is useful if you want to handle the form events yourself and dont need the functionality in there.

Dependencies

  1. Add {% framework %} and {% framework extras %} to your layout or page as the plugin needs it to work

Note

Please note that the default markup provided by the form component relies on bootstrap and it's classes for styling. If you rely on it, you must make sure that bootstrap is loaded for it to be properly styled. I encourage you to style it using your own custom css to fit the overall style of your website.

  • Found the plugin useful on 17 Oct, 2016

    Installs easily and setup is simple. Easy to extend. Well done !

  • Found the plugin useful on 11 Aug, 2016

    This was super easy to integrate into websites I have built for clients. You have complete control over everything this plugin offers.

  • Found the plugin useful on 4 Jun, 2015

    The author is no longer contributing to this community and is ignoring pull requests with improvements.

    Apart from that this plugin is really useful.

  • author

    Replied on 26 Jun, 2015

    Would you revise your review as I've just pulled in your pull request? Thanks.

  • Found the plugin useful on 27 May, 2015

    Awesome plugin. Strongly needs captcha.

  • Found the plugin useful on 4 May, 2015

    Nice plugin, they functionality is simple, but great potential!

    Thanks!

  • Found the plugin useful on 29 Sep, 2014

    It's awesome, works like a charm, but some captcha would be really appreciated.

  • Found the plugin useful on 13 Aug, 2014

    No field validation for the form? Its a nice plugin, but could be abused very easily without basic validation.

  • Found the plugin useful on 21 Jul, 2014

    I tried 'other' contact plugins before this, and had exceptions when navigating the admin interface, no such trouble here! Everything worked first time, and the plugin correctly made use of my mailgun sending settings.

  • Found the plugin useful on 26 May, 2014

    Took way to long to make it do what I wanted to do but it does it job very easily if you just need the default functionality.. :)

1.3.4

Made sure captcha enabling or disabling doesnt produce bug

Mar 13, 2016

1.3.3

Added option to allow user to enable or disable captcha in contact form

Mar 13, 2016

1.3.2

Added german translation language file

Mar 13, 2016

1.3.1

Set replyTo instead of from-header when sending

Mar 09, 2016

1.3.0

!!! Added captcha feature, which requires valid google captcha credentials to work

Mar 08, 2016

1.2.3

Modified mail templatedefault text

Oct 27, 2015

1.2.2

Added polish language features

Sep 19, 2015

1.2.1

Added permissions to the settings page. PR by @matissjanis

Sep 13, 2015

1.2.0

Add Proper validation that can be localized

Jun 26, 2015

1.1.0

Mail template is now registered properly

Jun 26, 2015

1.0.7

Updated contact component default markup file

Mar 02, 2015

1.0.6

Added ability to include bootstrap or not on component config

Mar 02, 2015

1.0.5

Corrected spelling for Marketing on the backend settings

Jun 10, 2014

1.0.4

Updated default component markup to use more appropriate looking twitter bootstrap classes

May 22, 2014

1.0.3

Changed body input field type from text to textarea

May 20, 2014

1.0.2

Added validation to contact form fields

May 20, 2014

1.0.1

Fixed email subject to send actual subject set in backend

May 20, 2014

1.0.0

First Version with basic functionality

May 19, 2014

To upgrade, all you need to do is

Go to url here to setup valid google captcha credentials as it is required to use the plugin.

Then enter the credentials (site-key and site-secret) in the provided fields in the settings area of the plugin.