# Utilisation côté FrontOffice du site

Lorsque l'on affiche la page/article sur laquelle le Shortcode simaxFormSubmiter (\[**sfs-form-identification id="1" titre="Contact"**]) est utilisé, ce dernier est automatiquement remplacé par le code HTML du formulaire correspondant.

Sur validation du formulaire à \[Envoyer], l'enregistrement SIMAX est créé (via NOUTOnline) et un message de réussite ou éventuellement d'erreur est affiché selon le cas.

&#x20;

Ex. du code HTML d'un formulaire de Contact :

\<table class="nout\_simaxform">

\<tbody>

&#x20;           \<tr>

&#x20;               \<td>\<input type="text" name="id\_123456" placeholder="Nom\*" required/>\</td>

&#x20;               \<td>\<input type="text" name="id\_111111" placeholder="Prénom\*" required/>\</td>

&#x20;           \</tr>

&#x20;           \<tr>

&#x20;               \<td>\<input type="number" name="id\_222222" placeholder="Téléphone\*" required/>\</td>

&#x20;               \<td>\<input type="text" name="id\_333333" placeholder="Société\*" required/>\</td>

&#x20;           \</tr>

&#x20;           \<tr>

&#x20;               \<td colspan="2">

&#x20;                   \<input type="email" name="id\_444444" placeholder="Email\*" required/>

&#x20;               \</td>

&#x20;           \</tr>

&#x20;           \<tr>

&#x20;               \<td colspan="2">

&#x20;                   \<textarea name="id\_555555" rows="6" cols="60" placeholder="Message">\</textarea>

&#x20;               \</td>

&#x20;           \</tr>

&#x20;           \<tr>

&#x20;               \<td class="nofullwidth">

&#x20;                   \<input type="submit" value="Envoyer">

&#x20;               \</td>

&#x20;           \</tr>

&#x20;       \</tbody>

\</table>

<br>

&#x20;Ex. du rendu en FrontOffice (note la présentation du formulaire, dépend du CSS utilisé sur le site)

<figure><img src="https://1324884545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvBJ3Kpe0vg6NlDz0QDIX%2Fuploads%2FBwxI6VkEUZR1n2MHqjqU%2Fimage.png?alt=media&#x26;token=321c7b5c-c2c1-44c0-b599-3bd592cd7be3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1324884545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvBJ3Kpe0vg6NlDz0QDIX%2Fuploads%2FLYqjAvHM5GVo1TugOzDl%2Fimage.png?alt=media&#x26;token=9b7922c6-248d-4008-b843-debf7cd065b6" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1324884545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvBJ3Kpe0vg6NlDz0QDIX%2Fuploads%2FU83VRROynemVrodpD1jp%2Fimage.png?alt=media&#x26;token=0e941507-2f16-4a46-93da-db0d0ee1b59d" alt=""><figcaption></figcaption></figure>
