VDL Webdevelopment 

Een formulier bouwen in October-CMS

Een e-mailformulier op je pagina

Op iedere website worden wel formulieren gebuikt. Nu zijn daar voor October-CMS hele goede plugins voor maar wij vinden: hoe minder plugins hoe beter. Het maken van een formulier is in dit framework geen hogere wiskunde dus we maken het zelf.

De twee tabs van je pagina

Als je een pagina aanmaakt krijg je een tekstveld met daarin twee tabs: opmaak en code. Deze gaan we vandaag allebei gebruiken. Uiteindelijk worden deze twee tabs samengevoegd in het paginabestand.

In de tab 'Opmaak'

In de tab 'Opmaak' plaatsen we het formulier zelf. October-CMS heeft daar een eigen notatie voor:

        {{ form_open({ request: 'onHandleForm' }) }}

            Hier komt je formuier

        {{ form_close() }}

Tussen de openings,- en sluitingstags komen de formuliervelden. Dit is gewone HTML. We gebruiken de typeaanduingen zoals het hoort. Bij een emailadres definieren we type="email" en bij een telefoonnummer type="number". Zo maken we gebruik van HTML-5 basisvalidatie. Het is nog geen echte validatie, daar schrijven we een apart artikel over. Maar je voorkomt dat mensen bijvoorbeeld de extensie vergeten bij het invullen van het emailadres. We maken ze ook verplicht door required="required" toe te voegen aan het element.

    {{ form_open({ request: 'onHandleForm' }) }}
        <input type="text" name="name" required="required" placeholder="Naam" />
        <input type="email" name="email" required="required" placeholder="Emailadres" />
        <input type="number" name="phone" required="required" placeholder="Telefoon" />
        <textarea required="required" name="mailtext"></textarea>
        <input class="submit" type="submit" value="Verstuur bericht!"/>
    {{ form_close() }}

    {% if notice %}
        <div class="alert alert-success">Dank voor je bericht. We nemen zo spoedig mogelijk contact met je op.</div>
    {% endif %}

In de tab 'Code'

In de tab 'Code' handelen we het formulier af. We definieren de variabelen die verstuurd werden voor de verwerking en voegen de code toe waarmee de email wordt verzonden.

    function onHandleForm()
    {
            $name = post('name');
            $email = post('email');
            $phone = post('phone');
            $mailtext = post('mailtext');

            Mail::send('vdlwebdev.website.contact', ['name' => $name , 'phone' => $phone, 'email' => $email, 'mailtext' => $mailtext], function($message) {
            $message->subject('Informatieaanvraag via webformulier');
            $message->to('administratie@jacobs-en-vanes.nl','Theodorus va Essen');
            $message->cc('nogiemand@jacobs-en-vanes.nl','Ferdinand Jacobse');
        });

        $this['notice'] = 'success';

    }

Zoals je ziet hebben we ook een antwoord voor de gebruiker. Wanneer je de notice toevoegd voordat de functie wordt afgesloten kun je deze in je HTML opnemen met een if-statement.

Beide tabs samengevoegd

Wanneer je de pagina opslaat worden de beide tabs samengevoegd in één tekstbestand. Hieronder zie je een voorbeeld van de contactpagina. Op regel 23 zie je het dubbele isgelijk-teken (==) dat code en opmaak scheidt.

Posted in October CMS on Oct 16, 2016