Hello

I'm facing difficulties to create a very simple plugin. I'm quite sure it's a little thing but I'm searching for days and I don't find the solution. I hope to find help here.. ( I precise that I'm a newbie on OctoberCMS )

I've created the following plugin intended to provide a contact form and send an email on submit :

<?php namespace My\ToolBox\Components;

use Cms\Classes\ComponentBase;

class ContactForm extends ComponentBase
{
    /**
     * for name
     * @var string
     */
    public $form_name;

    /**
     * form content.
     * @var array
     */
    public $form_data;

    public function componentDetails()
    {
        return [
            'name'        => 'ContactForm Component',
            'description' => 'Generates the contact form'
        ];
    }

    public function defineProperties()
    {
        return [];
    }

    public function onRun()
    {
      $this->form_name = 'Contact form';
    }

  public function onSubmitContactForm()
  {
    $this->form_name = 'Sent';  // just to debug 
    $this->form_data = Input::all();

    Mail::send('Contact::form', $this->form_data, function($message) 
    {
        $message->from(post('first_name'), post('last_name'),post('email'),post('textarea1'));
        $message->to('myemailtest@somewhere.com')->subject('Contact Form success');
    });

    return true;
  }
} 

Here is the default.htm page :

<form
  class="col s12"
  data-request="{{ __SELF__ }}::onSubmitContactForm();"
  data-request-success="alert('Message sent');"
  data-request-confirm="alert('confirm message ?');"
  data-request-error="alert('Error occured');"
>

  <div class="lt-row row">
    <div class="input-field lt-col col s6">
      <input type="text" class="validate" name="first_name" id="first_name" >
      <label for="first_name" class="active">Prénom</label>
    </div>
    <div class="input-field lt-col col s6">
      <input type="text" name=="last_name" id="last_name">
      <label for="last_name">Nom</label>
    </div>
  </div>
  <div class="lt-row row">
    <div class="input-field lt-col col s12">
      <input type="email" class="validate" name="email" id="email">
      <label data-success="right" data-error="wrong" for="email">Email</label>
    </div>
  </div>
  <div class="lt-row row">
    <div class="input-field lt-col col s12">
      <textarea name=id="textarea1" id="textarea1" class="materialize-textarea"></textarea>
      <label for="textarea1">Votre message</label>
    </div>
  </div>
  <div class="lt-row row">
    <div class="lt-col col s12">
      <input type="checkbox" class="filled-in" name="filled-in-box" id="filled-in-box" checked="checked" />
      <label for="filled-in-box">Recevoir une copie de mon email</label>
    </div>
  </div>

  <div class="lt-vertical-spacer"></div>

  <div class="lt-row row">
    <div class="lt-col col s12">
      <button class="btn-large waves-effect waves-light" type="submit" >Envoyer <i class="material-icons right">envoyer</i></button>
    </div>
  </div>
</form>

And here is my email template (contact::form) :

<p>From: {{first_name}} {{last_name}} &lt;{{email}}&gt;</p>
<p>Message:</p>
<p>{{ textarea1 }}</p>
<p>--</p>
<p>Sent by my website</p>

If I add the form to the contact page, like that : {% component 'ContactForm' %}

The form is displayed properly but when I click on the submit button it seams to be reloaded empty, no "alert" message is displayed, no error log, nothing... The form name remains unchanged (form_name). It seams that the call to onSubmitContactForm() isn't working or javascript is not executed, If I display the source code of the generated page, I can see the jquery call in the bottom of the page (after the form) :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Any help would be very appreciated as I'm starting to have a headake ! Julien

Perhaps this is the problem, the syntax is wrong on how the form is defined:

<form
  class="col s12"
  data-request="{{ __SELF__ }}::onSubmitContactForm();"
  data-request-success="alert('Message sent');"
  data-request-confirm="alert('confirm message ?');"
  data-request-error="alert('Error occured');"
>

Example from the docs http://octobercms.com/docs/ajax/handlers:

<form data-request="{{ __SELF__ }}::onCalculate" data-request-update="'{{ __SELF__ }}::calcresult': '#result'">

Referencing the function that handles the event is without ()

Thank Webp for your answer, unfortunately, the problem is not there.

I just forgot to remove the '()' (that was just a test I made to try to make this working). However it doen't work without them :

<form
  class="col s12"
  data-request="{{ __SELF__ }}::onSubmitContactForm"
  data-request-success="alert('Message Envoyé');"
  data-request-confirm="alert('Confirmer l'envoi ?');"
  data-request-error="alert('Error occured');"
>

Hello I found the solution, my code is correct although I just forgot to declare : use Mail; at the begining of the component !

I'm quite confused, it's so stupid... But I think that may help if someone else is stuck like me because I don't know why no error message appeared (neither in the logs no as a popup)...

there dont have not simple form here... i am trying submit a form like calculator value 1+ value 2 to have a result through a partial like the exemple in the doc, but, this dont work, please, help a newbie