Tesla CMS Helpdesk

Bij een standaard website moet er natuurlijk ook een contact formulier in komen. Laten we is kijken hoe we dit contact formulier kunnen toevoegen. Volg in ieder geval de volgende stappen.

1.       Ga naar www.jouwdomein.nl/admin

2.       Login met de login gegevens

3.       Ga naar pagina’s

4.       Druk op pagina toevoegen

5.       Selecteer hier bij soort  “contact”

6.       Vul de titel, seo titel, keywords en omschrijving in.

7.       Druk op opslaan

8.       Je ziet nu een lijst met mogelijke invoervelden selecteer degene die van belang zijn en druk op opslaan.

9.       Nu hebben we al wel onze data opgeslagen maar is deze nog niet gekoppeld met onze website. Om dit te doen moeten we onze template aanpassen deze is te vinden in de map /contact. Ook hier is de standaard index.tpl. Ook in deze file kunnen we gebruik maken van de tags.

• {$title}         De titel van de pagina
• {$content}   De inhoud van de pagina

10.   Laten we zeggen dat we de volgende html layout willen omzetten.

 <div class=”content”>
                  <form  method=”post” action=””>
                           <table>
                                    <tr>
                                             <td>
                                                      Naam
                                             </td>
                                             <td>
                                                      <input type= “text” name=”naam” />
                                             </td>
                                    </tr>
                                    <tr>
                                             <td>
                                                      Email
                                             </td>
                                             <td>
                                                      <input type=”text” name=”email” />
                                             </td>
                                    </tr>
                                    <tr>
                                             <td>
                                                      Bericht
                                             </td>
                                             <td>
                                                      <textarea name=”message”></textarea>
                                             </td>
                                    </tr>
                                    <tr>
                                             <td colspan=”2”>
                                                      <input type=”submit” value=”verzenden” />
                                             </td>
                                    </tr>
                           </table>
                  </form>
         </div>

11.   Om het formulier te kunnen gebruiken zetten we op de plaats waar deze dient te komen de volgende template code {form=@table.tpl} Laten we deze code even ontleden

         {                  Geeft aan dat je begint met een template code

         form            Geeft aan dat het gaat om een formulier

         =@              Geeft aan dat je 1 element terug verwacht in dit geval het formulier

         table.tpl      De naam van het bestand waar de data verder gespecificeert is

         }                  Geeft aan dat je eindigt met een template code

12.   Het bestand zal er nu als volgt uitzien

         <div class=”content”>
                  {form=@table.tpl}
         </div>

13.   We slaan nu het bestand index.tpl op.

14.   We maken nu het bestand table.tpl aan in de map /components/forms/

15.   Plaats hier de niet herhalende html code. Je kan gebruik van de volgende tags.

         {$form_start}    Hierin bevindt zich de html form start tag

         {$form}               Hierin bevindt zich de herhalende elementen van het formulier

         {$form_end}     Hierin bevindt zich de html form end tag

16.   Als we klaar zijn zal het bestand er als volgt uitzien.

{$form_start}
         <table>
                  {$form}
                 <tr>
                          <td>
                                   <input type=”submit” value=”verstuur” />
                          </td>
                  </tr>
         </table>
{$form_end}

17.   We kunnen nu table.tpl opslaan

18.   De elementen kunnen we ook opmaken. Deze zijn te vinden in de map /components/forms/elements/(naam van de template). In ons geval is dat dus de map /components/forms/elements/table  We kennen de volgende (herhalende) elementen

•          Input
  
•          Captcha
  
•          Textarea
  
•          Select
  
•          Radio
  
•          Password
  
•          Checkbox
  

19.   In ieder bestand kan je de volgende tags gebruiken

         {$type}                  Het type veld

         {$value}                De waarde van het veld

         {$id}                      Het unieke id

         {$name}                De naam van het inputveld

         {$placeholder}      De placeholder

         {$title}                   De naam van het veld

         {$error}                 De eventuele error die geplaatst word

20.   Laten we als voorbeeld de input velden aanpassen voor onze layout.

21.   We maken een file input.tpl aan in de map /components/forms/elements/table hierin plaatsen we onze layout. Deze zal er als volgt uitzien.

         <tr>
                  <td>{$title}</td>
                  <td>
                           <input type=”text” name=”{$name}” value=”{$value}” />
                  </td>
         </tr>

Laten we dit bestand opslaan.

22.   Laten we nu ook de textarea aanpassen.

23.   We maken een file textarea.tpl aan in de map components/forms/elements/table hierin plaatsen we onze layout. Deze zal er als volgt uitzien.

 <tr>
	<td>{$title}</td>
	<td>
		<textarea name=”{$name}”>{$value}</textarea>
	</td>
</tr>

24.   Laten we dit bestand opslaan.