First install translate plugin https://octobercms.com/plugin/rainlab-translate

USE

Drag Simple Contact to any page where you want place the form. {% component 'simpleContact' %} will be placed within html. Click on the Simple Contact card, which is below page heading field, a popup form will appear, here you can change form field labels. Make sure that below tags are there in theme layout

{% framework extras %}
{% scripts %}

Form HTML

Click on {% component 'simpleContact' %} in code editor, a fork icon will appear at right top side of code editor, clicking on it will reveal form html in the editor. This html is Bootstrap ready. You can change it or add css classes as you like:

{{simpleContact.settings.text_top_form|raw}}

<form id="simpleContactForm">

    <div id="simple_contact_flash_message"></div>

    <div class="form-group">
        <label for="name">{{simpleContact.properties.nameLabel}}</label>
        <input type="text" id="name" name="name" class="form-control" required >
    </div>

    <div class="form-group">
        <label for="email">{{simpleContact.properties.emailLabel}}</label>
        <input type="email" id="email" name="email" class="form-control" required >
    </div>

    {% if(simpleContact.properties.phoneEnabled) %}
        <div class="form-group">
            <label for="phone">{{simpleContact.properties.phoneLabel}}</label>
            <input type="text" id="phone" name="phone" class="form-control"  >
        </div>
    {% endif %}

    <div class="form-group">
        <label for="subject">{{simpleContact.properties.subjectLabel}}</label>
        <input type="text" id="subject" name="subject" class="form-control"  >
    </div>

    <div class="form-group">
        <label for="message">{{simpleContact.properties.messageLabel}}</label>
        <textarea id="message" name="message" class="form-control"></textarea>
    </div>

    <!-- Injecting reCaptcha if enabled -->
    {% if(simpleContact.settings.recaptcha_enabled) %}
        <div class="form-group">
            <label for="message"></label>
            <div class="g-recaptcha" data-sitekey="{{simpleContact.settings.recaptcha_site_key}}"></div>
        </div>
    {% endif %}
    <!-- End reCaptcha -->

    <button id="simpleContactSubmitButton"
            data-request="{{ __SELF__ }}::onFormSubmit"
            type="submit" class="btn btn-default">
        {{simpleContact.properties.buttonText}}
    </button>

</form>

Flash messages are shown in div tag these are bootstrap ready, they are served from partial flashMessage.htm

<div id="simple_contact_flash_message"></div>

Form Behavior and Settings

On installing this plugin a new submenu Simple Contact will be added under Misc. in backend Settings *

Settings

• Redirect: Enable page redirect after successful page submission
• Select Redirect Page: Select a cms page from dropdown to which page will be redirected. its usually a thankyou page
• Success Message Alert: If redirect is not enabled, instead this message will be shown
• Form Heading: Any text you want to appear on top of form

  Mail Settings

• Notification: Enable this option if you want to receive notification email when someone submit the form
• Notification Email Address: Email address where you want to receive notification email
• Auto Reply: Enable this option if you want to auto reply when someone submits the message

  reCAPTCHA Settings

• reCAPTCHA: Enable this option if you want to show google recaptcha on the form
• Site Key: Provide your site key, you can get from https://www.google.com/recaptcha/admin
• Secret Key: provide your site secret key

Email Templates

Three new email templates will be added in backend mail settings, change them according to your needs

• zainab.simplecontact::mail.reply this template is used when send reply to a message from inbox
• zainab.simplecontact::mail.auto-response auto response mail template
• zainab.simplecontact::mail.notification notification mail template

Manage Messages

A new menu will be added to top menu Messages, click on it to manage, reply, print messages

Dsahboard Widget

On back-end dashboard click on "Add Widget" button. From widget drop-down select "Contact Us Messages Overview" option and click add button. From widget configuration you can change widget title and Chart type

Languages

• English
• Portuguese Brazilian -- thanks to ribsousa
• Arabic -- thanks to Muhammad Khalil
• Russian -- thanks to Roman Novikov
• Chinese -- thanks to Michael Shen
• Czech -- thanks to Vojta Svoboda
• Turkish -- thanks to Ayhan Eraslan
• French -- thanks to Mathieu Tanguay

First Install Translate Plugin (RainLab.Translate) https://octobercms.com/plugin/rainlab-translate