Bonjour, bonsoir -- voici les premiers formulaires en libre-service que je poste. Les formulaires sont codés en flex, la largeur de votre forum ne devrait pas poser de problème comme ils se redimensionnent tout seul,
voici un petit tutoriel pour que vous puissiez installer le code sans problème.

VERSION LIVE FORMULAIRES
LIEN VERS LA PA QUI VA AVEC
LIEN VERS LES CATÉGORIES QUI VONT AVEC
LIEN VERS LE QEEL QUI VA AVEC

---

(1) les informations importantes:

Avant toute chose, s'il vous plaît n'oubliez pas le crédit dans la partie disclaimer de votre forum. Si je remarque qu'il n'y en pas, je vais le notifier à FA. Respectez le travail qui a été fait. (le crédit en bas du formulaire peut être modifié avec le nom de votre forum)

IL EST INTERDIT DE PRENDRE MES CODES ET LES MODIFIER À VOTRE SAUCE COMME BON VOUS SEMBLE. RESPECTEZ LA STRUCTURE OU PRENEZ UN AUTRE CODE EN LIBRE-SERVICE, MERCI.


Si vous avez des questions je vous renvoie à mon tumblr et/ou ce sujet sur le forum.

---

(2) LES CODES

HTML

Voici le code HTML que vous pouvez c/c dans n'importe quel sujet créé.

FORMULAIRE SANS IMAGE

Code:

<center><div class="form1"><div class="form2"><div class="form_tq"><div class="form_title">TITRE DU SUJET</div><div class="form_subtitle">SOUS-TITRE DU SUJET</div><div class="form_quote">la quote de votre sujet, la longueur est à votre guise.</div></div></div><div class="form_text"><div class="form_h1"><span>01</span> TITRE ICI DE LA SECTION</div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><div class="form_cred">FORMULAIRE CRÉÉ PAR ICE AND FIRE. (2022)</div></div></center>

FORMULAIRE AVEC DEUX IMAGES

Code:

<center><div class="form1"><div class="form2"><div class="form_tq"><div class="form_title">TITRE DU SUJET</div><div class="form_subtitle">SOUS-TITRE DU SUJET</div><div class="form_quote">la quote de votre sujet, la longueur est à votre guise, la hauteur des images s'ajustent à la hauteur de cette partie.</div></div><img src="IMAGE NUMERO UN" class="form_img"><img src="IMAGE NUMERO DEUX" class="form_img"></div><div class="form_text"><div class="form_h1"><span>01</span> TITRE ICI DE LA SECTION</div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><div class="form_cred">FORMULAIRE CRÉÉ PAR ICE AND FIRE. (2022)</div></div></center>

FORMULAIRE AVEC 4 IMAGES

Code:

<center><div class="form1"><div class="form2"><img src="IMG 1" class="form_4img"><img src="IMG 2" class="form_4img"><div class="form_tq"><div class="form_title">titre du sujet</div><div class="form_subtitle">SOUS-TITRE DU SUJET</div><div class="form_quote">la quote de votre sujet, la longueur est à votre guise, la hauteur des images s'ajustent à la hauteur de cette partie. </div></div><img src="IMG 3" class="form_img"><img src="IMG 4" class="form_img"></div><div class="form_text"><div class="form_h1"><span>01</span> titre ici</div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div><div class="form_cred">FORMULAIRE CRÉÉ PAR ICE AND FIRE. (2022)</div></div></center>

FORMULAIRE AVEC UNE IMAGE

Code:

<center><div class="form1"><div class="form2"><div class="form_tq"><div class="form_title">TITRE DU SUJET</div><div class="form_subtitle">SOUS-TITRE DU SUJET</div><div class="form_quote">la quote de votre sujet, la longueur est à votre guise, la hauteur des images s'ajustent à la hauteur de cette partie.</div></div></div><img src="IMG METTRE ICI" class="form_1img"><div class="form_text"><div class="form_h1"><span>01</span> TITRE ICI DE LA SECTION</div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div><div class="form_cred">FORMULAIRE CRÉÉ PAR ICE AND FIRE. (2022)</div></div></center>

CSS

Pour installer le CSS, il faut que vous vous rendiez dans panneau d'administration, affichage, couleurs, onglet feuille de style css. Vous copiez/collez le code dans son entièreté.

Code:

:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;  
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/***************************** LES FORMULAIRES *****************************/

/*CONTAINER DES FORMULAIRES*/
.form1 {text-align: justify;
    background: var(--background1);
    width: auto; /*à modifier si vous voulez une largeur fixe*/
    border-radius: 10px;
  padding: 10px;
    line-height: 24px;}

/*CONTAINER DU TITRE, SOUS TITRE ET CITATION*/
.form2 {    display: flex;
    margin: 0 0 7px 0;}

/*partie contenant le titre, sous titre et citation*/
.form_tq {    background: var(--background2);
    width: 100%;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 7px 7px 11px;
}

/*styling titre*/
.form_title {border-bottom: var(--border1);
    color: var(--acc1);
    font-weight: 700;
    text-transform: lowercase;
    font-size: 20px;
    padding: 0 0 5px 18px;
  line-height: initial;}

/*styling sous-titre*/
.form_subtitle {   margin: 14px 0 5px;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--acc2);
    padding: 0 0 0 35px;
    letter-spacing: 1px;
    line-height: 9px;}

/*styling citation*/
.form_quote {     text-transform: lowercase;
    font-size: 11px;
    padding: 0 0 0 49px;
    width: 90%;
    line-height: 15px;
    box-sizing: border-box;}

/*styling de l'image formulaire avec 1 seule image*/
.form_1img {width: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: var(--background2);
    border-radius: 10px;
    margin: 0 0 7px;
    height: 158px;
    object-fit: cover;}

/*styling des deux/quatre images*/
.form_img, .form_4img {border-radius: 7px;
    min-height: 79px;
    object-fit: cover;
    width: 70px;
    padding: 3px;
    box-sizing: border-box;
    background: var(--background2);
}

.form_img {    margin: 0 7px 0;}

.form_4img {margin: 0 7px 0 0;}

.form_img:last-child {margin:0;}

/*container du texte principal*/
.form_text {background: var(--background2);
    padding: 20px;
    border-radius: 10px;
  font-size: 14px;}

/*styling du crédit*/
.form_cred {background: var(--background2);
    border-radius: 7px;
    margin: 7px 0 0;
    text-align: center;
    font-size: 9px;
    color: var(--acc1);
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1px;}

/*styling des titres dans le texte*/
.form_h1 {    border-bottom: var(--border1);
    font-size: 18px;
        margin: 0 0 4px;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--acc1);
    padding: 0 0 4px;}

.form_h1 span {    background: var(--background1);
    border-radius: 6px;
    padding: 0 5px;
    font-size: 16px;
    color: var(--acc2);}

---

(3) choses à savoir

AJOUTER UNE LARGEUR AUX FORMULAIRES
Comme le formulaire n'a pas de largeur sûre, lorsque vous prévisualisez votre message, le formulaire sera étiré à la longueur de votre forum. Le formulaire n'en sera pas déformé puisqu'il est codé de façon à ce qu'il s'ajuste à la largeur de n'importe quelle page. Mais si vous souhaitez mettre une largeur fixe (convenant à la largeur de votre forum), vous pouvez modifier cette balise:

Code:

.form1

Le width actuel est en auto, il vous suffit de mettre le nombre qui convient le mieux à la largeur de votre forum.

TITRE DES SECTIONS DANS LE SUJET

J'ai ajouté un petit code de "titre" dans les sujets que vous pouvez utiliser si vous le souhaitez. Vous pouvez le retrouver dans le code des formulaires, mais je le répète encore une fois ici:

Code:

<div class="form_h1"><span>01</span> TITRE ICI DE LA SECTION</div>

Après le /div vous n'avez pas besoin de sauter une ligne. Vous pouvez immédiatement écrire après.

---

(5) mot de fin

Je le redis, mais vraiment si vous avez un problème ou une question, surtout n'hésitez pas.

Je serais bien entendu très heureuse de voir le résultat final dans le cas où vous utilisez les formulaires, donc n'hésitez vraiment pas à me l'envoyer. Vous pouvez également laisser une suggestion dans ce sujet.

FORMULAIRE CRÉÉ PAR ICE AND FIRE. (2021)