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

**el_debutanti** · 07/08/2022, 01h00

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

https://jsfiddle.net/herde2/quybg8c0/2/
Alors un coup de pouce ne serait pas de refus

Merci et bon dimanche,
ED

**el_debutanti** · 07/08/2022, 17h18

Bonjour à tous,
C'est encore un problème de bibliothèque (CSS ?)

En quoi le <head> de mon site :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci pour votre aide,
ED

**NoSmoking** · 08/08/2022, 11h33

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 !

**el_debutanti** · 08/08/2022, 14h52

Bonjour NoSmoking,
Cela ne fonction e pas avec

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci pour ton aide,
ED

**NoSmoking** · 08/08/2022, 17h06

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

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 !

**el_debutanti** · 08/08/2022, 20h48

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

Des mois que ça dure ...
Merci pour ton aide NoSMoking

**el_debutanti** · 09/08/2022, 13h43

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

**NoSmoking** · 09/08/2022, 17h00

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.

Tout cela en changeant de bibliothèque.

Choisi une version et surtout tiens-t’en à cette version