Mettre en forme (CSS) et rendre modal un formulaire de contact BOOTSTRAP

Version imprimable

07/08/2022, 01h00
el_debutanti

Mettre en forme (CSS) et rendre modal un formulaire de contact BOOTSTRAP

Bonjour à tous,
Après mon précédent formulaire Bootstrap 4... réussi (merci :) mais le reste de mon site n'étant compatible que Bootstrap 5 et plus, je tente de configurer un nouveau formulaire.
Mais voilà, Bootstrap ne rentre pas (les CSS etc...) et le rendre modal, encore moins :weird:
https://jsfiddle.net/herde2/quybg8c0/2/
Alors un coup de pouce ne serait pas de refus;)
Merci et bon dimanche,
ED

Bonjour à tous,
C'est encore un problème de bibliothèque (CSS ?) :calim2:
En quoi le <head> de mon site :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" type="text/css" href="css/lddc.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/custom.css" />
        <link rel="stylesheet" href="css/animate.css">
		<script src="js/modernizr.custom.79639.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
		<script src="https://kit.fontawesome.com/9eeb5b4021.js" crossorigin="anonymous"></script>
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

est-il incompatible avec le <head> de cette modale qui fonctionne très bien ailleurs :

Code:

1
2
3
4
5
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://use.fontawesome.com/releases/v5.7.2/css/all.css"></script>

Des heures que je cherche sur Internet :weird:
Merci pour votre aide,
ED

08/08/2022, 11h33
NoSmoking

Bonjour,
c'est le même m3rdi3r que dans ta discussion : Formulaire qui ne s'ouvre pas en modal.

Donc met de l'ordre, et comprend tes erreurs, dans tes fichiers inclus ou utilise ce qui fonctionne !

Bonjour NoSmoking,
Cela ne fonction e pas avec

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Cela décale toute la mise en forme du site et je n'ai plus de formulaire affiché, contrairement à mon <head> actuel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		<link rel="stylesheet" type="text/css" href="css/lddc.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/custom.css" />
        <link rel="stylesheet" href="css/animate.css">
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
		<link href='http://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
		<script src="js/modernizr.custom.79639.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
		<script src="https://kit.fontawesome.com/9eeb5b4021.js" crossorigin="anonymous"></script>
		<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
		<script type="text/javascript" src="js/jquery.localscroll.js"></script>
		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
		<script src="https://use.fontawesome.com/releases/v5.7.2/css/all.css"></script>

J'avais le même souci avec la modale de la précédente discussion, problème de version de Bootstrap :calim2:
Merci pour ton aide,
ED

08/08/2022, 17h06
NoSmoking

Citation:

J'avais le même souci avec la modale de la précédente discussion, problème de version de Bootstrap :calim2:

Met à jour ta version, au minimum 4.6, et reprend les bases de l'intégration et surtout fait le ménage dans tes fichiers inclus !
08/08/2022, 20h48
el_debutanti

Merci NoSmoking,
Je vais tacher de mettre ça en ligne, mais des mois que je reste avec le même problème.
Maintenant (comme toujours avec une mise à jour Bootstrap) la navbar se trouve à gauche (au lieu d'être à droite) et devient centrer verticalement au scroll :weird:
Des mois que ça dure ...
Merci pour ton aide NoSMoking ;)
09/08/2022, 13h43
el_debutanti

Bonjour,
J'ai mis la page en ligne :
https://lapagetest.fr/index2%20copie.html
On peut y voir la barre de nav qui n'est pas à droite et descend au scroll. L'animation typo (sur fond vert) idem (à gauche au lieu d'être centrée) et la modale (messagerie) qui n'est pas opérationnelle.
Tout cela en changeant de bibliothèque.
Merci pour votre aide,
ED
09/08/2022, 17h00
NoSmoking

:koi:
je n'y comprends plus rien, quel est le rapport avec « Mettre en forme (CSS) et rendre modal un formulaire de contact BOOTSTRAP » ?

Tu tires dans tout les sens mais sans avoir de méthodes de travail un minimum solide. Règle tes problèmes un par un en structurant ton travail

Concernant ton problème initial je te dirais de regarder la documentation, bien faite, au sujet des « Modal », version 4.6 pour ce lien.

Citation:

Tout cela en changeant de bibliothèque.

Choisi une version et surtout tiens-t’en à cette version ;)
09/08/2022, 17h13
el_debutanti

Bonjour NoSmoking,
Le problème est que cette page est un ensemble de morceaux de pages d'exercices utilisant divers Bootstrap :aie:
C'est là où ça pique, je comprends :weird:
Merci pour ton lien ;)
Bonne soirée,
ED
09/08/2022, 17h16
el_debutanti

Par contre, en restant sur la 4.6, comment rendre la navbar et le centrage de texte compatible ?
Encore merci 8-)
ED
11/08/2022, 10h36
el_debutanti

Merci pour tout NoSmoking.
Bonne journée,
:zoubi: