#94

Product support

Visit this product's website for support.

Categories

  • Developer Tools
  • Miscellaneous
  • Utility

Create form templates to send mail messages with OctoberCMS from any page of your website. It works using the AJAX Framework, so jQuery is required. You can use Google reCaptcha, to protect your form templates of spams. You must configure OctoberCMS mail settings too, also your server should be able to send mails, to that this plugin will work perfectly.

A flexible plugin to create contact forms or forms that send mail message to embed it in your theme by kontact component.

How do this work

Create form templates to send mail messages with OctoberCMS from any page of your website. It works using the AJAX Framework, so jQuery is required. You can use Google reCaptcha, to protect your form templates of spams. You must configure OctoberCMS mail settings too, also your server should be able to send mails, to that this plugin will work perfectly.

Customizing your HTML form

Create your own form html in your kontact template:

You must leave the (data-request, data-request-success and data-request-update) data-attributes intact in the <form> tag as they are needed for the ajax to work. Refer to this doc section to know what's happening here in detail.

Form Html

<form role="form"
      data-request="{{__SELF__}}::onKontactSent"
      data-request-update="'{{__SELF__}}::confirm': '.confirm-container'"
      data-request-success="$('#form-kontact').slideUp(1000);" id="form-kontact">
        <div>
            <label for="nameForm">Name</label>
            <input type="text" name="name" id="nameForm">
        </div>
        <div>
            <label for="emailForm">Email</label>
            <input type="text" name="email" id="emailForm">
        </div>
        <div>
            <label for="phoneForm">Phone</label>
            <input type="text" name="phone" id="phoneForm">
        </div>
        <div>
            <label for="subjectForm">Subject</label>
            <input type="text" name="subject" id="subjectForm">
        </div>
        <div>
            <label for="messageForm">Message</label>
            <textarea name="body" cols="30" rows="10" id="messageForm"></textarea>
        </div>
        {% if renderReCaptcha %}
            <div>
                <div class="g-recaptcha" data-sitekey="{{ reCaptchaSiteKey }}" data-theme="{{ reCaptchaTheme }}"></div>
            </div>
        {% endif %}
        <button type="submit">Send</button>
    </div>
</form>
<!--This will contain the confirmation when the email is successfully sent-->
<div class="confirm-container"></div>

Customizing your HTML form

Create your own confirmation html message in your kontact template, this message appear after that email has sent successfully:

Confirm HTML

    <h4>Email Sent successfully</h4>
    <p>Thank you! Your message has been successfully received, we'll return the contact soon.</p>

Create a Google reCAPTCHA

reCAPTCHA protects internet users from spam and abuse wherever they go. Today we’re excited to introduce the new Android API of reCAPTCHA. As part of Google SafetyNet API, it mitigate risks on mobile through enhanced security and uses the latest Invisible reCAPTCHA technology to streamline user experience.

Warning: You must have a Google Account to create your reCAPTCHA keys.

  1. First step, open reCAPTCHA website and click on "Get reCAPTCHA" button on left top corner from the page, like the following screen: https://i.imgur.com/oZkKCFJ.png

  2. Second step, if you aren't logged in your Google Account, please, log-in.

  3. Third step, after logged on you will see the following screen: https://i.imgur.com/BbD81cs.png

    1. Type a label you like in Label field
    2. Select "reCAPTCHA V2", it'll open "Domains" field bellow
    3. Type your domain in "Domain" field, you can type more then one domain, one per line. Don't need type www or http, just the domain name.
    4. Check the field "Accept the reCAPATCHA Terms of Service."
    5. Then click on "Register" button
  4. Left step, after clic on "Register" button you will see the following screen: https://i.imgur.com/GDijcPp.png
    1. Update your Kontact template, go to "Options" tab and check the "Use Google reCaptcha" field to display Google reCAPTCHA options, like the following screen: https://i.imgur.com/sNqc9ow.png
    2. Select "Google reCaptcha language" and "Google reCaptcha theme" like you prefer
    3. Copy the "Site key" and paste on "Google reCaptcha site key" field
    4. Copy the "Secret key" and paste on "Google reCaptcha secret key" field
1.0.8

Fixed display of html confirm after form has been sent

Mar 05, 2018

1.0.7

Fixed translation issue

Mar 05, 2018

1.0.6

Updated svg icon and english translation

Feb 28, 2018

1.0.5

Seeder database seed_all_database

Feb 23, 2018

1.0.4

Created table rabelo_kontact_logs

Feb 23, 2018

1.0.3

Created table rabelo_kontact_recipients

Feb 23, 2018

1.0.2

Created table rabelo_kontact_templates

Feb 23, 2018

1.0.1

Initialize plugin.

Feb 23, 2018