dmstr/yii2-contact-module

Contact form manager for Yii 2.0 Framework

3.3.1 2024-10-17 10:45 UTC

Requires

• dmstr/yii2-json-editor: ^1.4.2
• dmstr/yii2-prototype-module: >=0.5.4
• justinrainbow/json-schema: ^5.2.0
• kartik-v/yii2-export: ^1.2
• yiisoft/yii2: ^2.0.11

BSD-4-Clause

• Tobias Munk

• extension
• yii2

README

Navigate to /contact/crud/contact-template to create a new form template.

Upgrade hints:

• If the form was build with version <= 1.0.0 there was the convention, that property reply_to in your schema was used as 'Reply-To:' header in message.
• this "magick" is removed! You must now set 'Reply to Schema Property' to 'reply_to' to get the same behavior!

Twig templates (Views)

Each form needs 2 Twig templates. Navigate to /prototype/twig/index to create them:

• contact:FORM_NAME: template in which the form will be rendered
• contact:FORM_NAME:send: will be rendered as "thank you page" after message has been send

While FORM_NAME must be replaced with your template name

• The form can be seen at /contact/default/?schema=FORM_NAME
• The "thank you page" can be seen at /contact/default/done?schema=FORM_NAME

Form Twig layout

{{ use('dmstr/jsoneditor/JsonEditorWidget') }}
{{ use('yii/widgets/ActiveForm') }}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            {% set form = active_form_begin({
                'id': 'contact-form',
                'action' : '',
                'options': {
                }
            }) %}
    
            {{ form.errorSummary(model) | raw }}
    
            {{ json_editor_widget_widget({
                'model': model,
                'attribute': 'json',
                'options': {
                    'id': 'contact-json'
                },
                'clientOptions': {
                    'theme': 'bootstrap3',
                    'disable_collapse': true,
                    'disable_edit_json': true,
                    'disable_properties': true,
                    'no_additional_properties': true,
                    'show_errors': 'interaction'
                },
                'schema': schema,
            }) }}

            <button type="submit" class="btn btn-primary">{{ t('twig-widget', 'Send') }}</button>
            
            {{ active_form_end() }}
        </div>
    </div>
</div>

Form Twig layout with captcha (requires captcha activate in the contact-template)

{{ use('dmstr/jsoneditor/JsonEditorWidget') }}
{{ use('yii/widgets/ActiveForm') }}
{{ use('yii/captcha/Captcha') }}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            {% set form = active_form_begin({
                'id': 'contact-form',
                'action' : '',
                'options': {
                }
            }) %}
    
            {{ form.errorSummary(model) | raw }}
    
            {{ json_editor_widget_widget({
                'model': model,
                'attribute': 'json',
                'options': {
                    'id': 'contact-json'
                },
                'clientOptions': {
                    'theme': 'bootstrap3',
                    'disable_collapse': true,
                    'disable_edit_json': true,
                    'disable_properties': true,
                    'no_additional_properties': true,
                    'show_errors': 'interaction'
                },
                'schema': schema,
            }) }}

            {{ Captcha_widget({
                model: model,
                attribute: 'captcha',
                captchaAction: '/contact/default/captcha'
            }) }}

            <button type="submit" class="btn btn-primary">{{ t('twig-widget', 'Send') }}</button>
            
            {{ active_form_end() }}
        </div>
    </div>
</div>

• The background and foreground colors of the captcha can be defined in the settings module under the captcha section. It uses a particular format for colors but the last 6 characters follow the css hex color code(eg 0xff0000 is red and 0x00ff00 is green)

"Thank you page" Twig layout

<div class="alert alert-success">{{ t('twig-widget', 'Thank you for your message') }}</div>

Contact form widgets twig example

{{ use('dmstr/modules/contact/widgets/ContactForm') }}

{{ contact_form_widget({schemaName: schemaName}) }}

Settings schema

{
  "title": " ",
  "type": "object",
  "format": "grid",
  "properties": {
    "Company": {
      "type": "string",
      "minLength": 3,
      "title": "Firma",
      "propertyOrder": 5,
      "options": {
        "grid_columns": 12
      }
    },
    "Title": {
      "type": "string",
      "title": "Anrede",
      "minLength": 1,
      "propertyOrder": 10,
      "enum": [
        "Herr",
        "Frau"
      ],
      "options": {
        "enum_titles": [
          "Herr",
          "Frau"
        ],
        "grid_columns": 2
      }
    },
    "LastName": {
      "type": "string",
      "minLength": 3,
      "title": "Name",
      "propertyOrder": 20,
      "options": {
        "grid_columns": 5
      }
    },
    "SurName": {
      "type": "string",
      "minLength": 3,
      "title": "Vorname",
      "propertyOrder": 30,
      "options": {
        "grid_columns": 5
      }
    },
    "Zip": {
      "type": "string",
      "minLength": 5,
      "title": "PLZ",
      "propertyOrder": 40,
      "options": {
        "grid_columns": 2
      }
    },
    "Location": {
      "type": "string",
      "minLength": 3,
      "title": "Ort",
      "propertyOrder": 50,
      "options": {
        "grid_columns": 5
      }
    },
    "Street": {
      "type": "string",
      "title": "Straße/Hausnr.",
      "minLength": 5,
      "propertyOrder": 60,
      "options": {
        "grid_columns": 5
      }
    },
    "Phone": {
      "type": "string",
      "title": "Telefon",
      "minLength": 6,
      "propertyOrder": 60,
      "options": {
        "grid_columns": 5
      }
    },
    "Fax": {
      "type": "string",
      "title": "Fax",
      "propertyOrder": 60,
      "options": {
        "grid_columns": 5
      }
    },
    "Email": {
      "type": "string",
      "format": "email",
      "minLength": 1,
      "title": "E-Mail Adresse",
      "propertyOrder": 70,
      "options": {
        "grid_columns": 6
      }
    },
    "Internet": {
      "type": "string",
      "title": "Internet",
      "propertyOrder": 70,
      "options": {
        "grid_columns": 6
      }
    },
    "Message": {
      "type": "string",
      "format": "textarea",
      "title": "Nachricht (stichwortartig)",
      "propertyOrder": 90,
      "options": {
        "grid_columns": 12
      }
    }
  }
}

Export

To enable the export feature add kartik\grid\Module to your project modules