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

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

Framework CSS Bootstrap

Vue hybride

Discussions similaires

Partager

Partager