#70

Product support

Get help in the plugin support forum.

Categories

  • Developer Tools
  • Marketing
  • Miscellaneous
  • Social
  • Utility

The plugin is now part of more than 100 projects! 2017 will be a superb year, with the creation of a form builder. Thanks for using Contact Us!

A simple, complete and modular contact form by DevINX. Original work by Lamin Sanneh (Flexi Contact).

The goal of this plugin is to accommodate the user who wants more functionality. See the Documentation tab for usage details.

The following themes use this plugin:

Installation or Setup

If you upgrade from Flexi Contact, we recommand to read the Upgrade guide to learn the changes between the two plugins.

  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 "Contact Us Plugin" with an email icon, click on that.
  4. The fields with a red asterisk should be filled. The others are optional

Usage

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

1. Using the component

  • 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.
  • You can customize the forms placeholder in the settings (see Custom Placeholder)
  • You have to add the dependencies in order to make work the form (see Dependencies)

This will add to the form to the page.

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. If you want the bootstrap class, check the Inject Bootstrap Assets option in the component.

2. Using custom markup

If you want a form for your website, we recommend you to create your own form, your own markup.

You need the following :

Field name Type
Name Text
Email Text - or email
Subject Text
Message Text Area
Send Button

The following class :

Classes Location
.ContactUsForm In the form element
.confirm-container In a seperated div

Here is an example

<div class="confirm-container">
    <!--This will contain the confirmation when the email is successfully sent-->
</div>
<form class="ContactUsForm" role="form"
      data-request="{{ contactForm }}::onMailSent"
      data-request-update="'{{ contactForm }}::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>

Dependencies

In order to make the form work, you need to inject the dependencies. Add this to your page :

{% framework %}
{% framework extras %}
  • Found the plugin useful on 15 Sep, 2017

    Where the show contact us inquiry at the backend side?

  • Found the plugin not useful on 5 May, 2017

    Overrides other css styles

  • author

    Replied on 5 May, 2017

    Hello!

    In your component properties, there is a checkbox called Inject Bootstrap Asset. Un-check it and you should be ok!

    Thanks

  • Found the plugin useful on 24 Sep, 2016

    Nicely tuned original plugin, I like it.

    PS. Created pull request with pl translation, kindly merge when you have time.

  • Found the plugin useful on 18 May, 2016

    In some cases, there comes up an error if you want to change the settings. To remove the bug, you should change the fields.yaml in models/settings

    there is a line : drivers_hint: type: partial path: ~/plugins/DevINX/ContactUs/models/settings/_forms_hint.htm tab: devinx.contactus::lang.tabs.forms

    and change it to

    drivers_hint: type: partial path: ~/plugins/devinx/contactus/models/settings/_forms_hint.htm tab: devinx.contactus::lang.tabs.forms

    Note the large and lower case

  • author

    Replied on 18 May, 2016

    Hi, thanks for your notice! This has been fixed now. I hope you like the plugin!

1.0.2

Bug fix - the configuration text displayed HTML and not rendered HTML

May 19, 2016

1.0.1

Bug fix while in settings

May 18, 2016

1.0.0

First Version

May 01, 2016

You are coming from Flexi Contact? Here are the changes between the two plugins.

  • You can now change form placeholders in the settings
  • The class for the form is now ContactUsForm
  • The de and pl have been removed. Feel free to take the base and modify them.