October CMS – quick start 18 – create contact form

Time:2021-9-16

Mail settings: config / mail.php; Set to SMTP.

Create plug-in contact

October CMS - quick start 18 - create contact form

Open the editor, create the components directory in the contact plug-in directory, and create the form file in the directory: contactform.php

October CMS - quick start 18 - create contact form

Define components

File:plugins\raiseinfo\contact\components\ContactForm.php 

<?php
namespace Raiseinfo\Contact\Components;
use Cms\Classes\ComponentBase;
class ContactForm extends ComponentBase
{
    public function componentDetails()
    {
        // TODO: Implement componentDetails() method.
        return [
          'name' => 'Contact Form',
          'description' => 'Simple contact form'
        ];
    }
}

File:pluginsraiseinfocontactPlugin.php

<?php namespace Raiseinfo\Contact;

use System\Classes\PluginBase;

class Plugin extends PluginBase
{
    public function registerComponents()
    {
        return [
          'Raiseinfo\Contact\Components\ContactForm' => 'contactform',
        ];
    }

    public function registerSettings()
    {
    }
}

Add new page:

October CMS - quick start 18 - create contact form

Check the front of the page to confirm that it has taken effect, but the plug-in does not define HTM, so there is no content to display.

October CMS - quick start 18 - create contact form

Edit the form content below:

File:plugins\raiseinfo\contact\components\contactform\default.htm

<form action="" class="form-group">
    < label for = "" > Name: < / label >
    <input type="text" name="name" class="form-control">

    < label for = "" > email address: < / label >
    <input type="text" name="email" class="form-control">

    < label for = "" > information: < / label >
    <textarea name="content" id="" cols="30" rows="10" class="form-control"></textarea>

    < button type = "submit" class = "BTN BTN success form control" > send < / button >

</form>

October CMS - quick start 18 - create contact form

Implementation functions:
The above form has no function, and it doesn’t even set the goal of form submission. Now, first implement the method of form submission:

File:plugins\raiseinfo\contact\components\ContactForm.php

<?php

namespace Raiseinfo\Contact\Components;

use Cms\Classes\ComponentBase;
use Illuminate\Support\Facades\Input;
use Illuminate\Support\Facades\Mail;


class ContactForm extends ComponentBase
{

    public function componentDetails()
    {
        return [
          'name' => 'Contact Form',
          'description' => 'Simple contact form'
        ];
    }

    public function onSend()
    {
        $vars = [
            'name' => Input::get('name'),
            'email' => Input::get('email'),
            'content' => Input::get('content')
        ];

        // views/mail/message/htm
        Mail::send('raiseinfo.contact::mail.message', $vars, function($message) {

            $message->to('[email protected]', 'Admin Person');

            $message - > subject ('mail submitted from contact form ');

        });
    }
    
}

‘raiseinfo. Contact:: mail. Message’ is a mail template. We need to create a mail template directory and file. The structure is as follows:

plugins\raiseinfo\contact\views
plugins\raiseinfo\contact\views\mail
plugins\raiseinfo\contact\views\mail\message.htm

Edit template:

File:plugins\raiseinfo\contact\views\mail\message.htm
<p>

    You got a new message from {{ name }} at {{ email }}
    
</p>

<strong> Message </strong>

<p>

    {{ content }}

</p>

Finally, modify the action of the form. Here we use the data method

File: plugins\raiseinfo\contact\components\contactform\default.htm


<form data-request="onSend">

    < label > Name: < / label >
    <input type="text" name="name" class="form-control">

    < label > email address: < / label >
    <input type="email" name="email" class="form-control">

    < label > information: < / label >
    <textarea name="content" class="form-control"></textarea>

    < button type = "submit" class = "BTN BTN success form control" > send < / button >

</form>

test

October CMS - quick start 18 - create contact form

October CMS - quick start 18 - create contact form