Intégrer un formulaire avec boutton

**mattmax55** · 28/01/2020, 18h53

Bonjour,
Je souhaiterais intégrer tout le code d'un formulaire au milieu d'une page html en appuyant sur un bouton de la barre de navigation mais je ne sais pas comment faire (utiliser du js, jQuery…?)
Aidez moi svp…
Merci d'avance

**djedjethai** · 29/01/2020, 03h33

Bonjour,

Tu peux le faire en js ou jQuery, comme tu veux.

un ex avec js

ton button (tu le mets ou tu veux)

Code HTML :

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

<button onclick="myFunction()">Click Me</button>

ta fonction ds ton script js

Code :

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

1
2
3
4
5
6
7
8
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

et ta div contenant ton formulaire, se trouvant la ou tu veux qu'il apparaisse

Code HTML :

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

1
2
3
4
5
<div id="myDIV">
  <form>
    Ton formulaire
  </form>
</div>

voici le lien d’où je sorts çà https://www.w3schools.com/howto/howt..._hide_show.asp

Bon, l’inconvénient avec ce script est que tu risques d'avoir un blancs, a l'emplacement de la div que tu masques..... Si c'est le cas, il faut coder (en js, avec des .createElement(), .appendChild(), etc.) ton formulaire dans ta fonction, et laisser ta <div id="myDIV"> vide.

**javatwister** · 29/01/2020, 14h19

Envoyé par mattmax55

Je souhaiterais intégrer tout le code d'un formulaire au milieu d'une page html en appuyant sur un bouton de la barre de navigation

Bonjour,

- je ne pige pas le concept d'"intégrer";
- la "barre de navigation" n'a pas grand chose à voir avec le code d'une page html;

Donc, il faudrait reformuler, voire concrétiser le problème.

**djedjethai** · 30/01/2020, 05h43

Salut,

Voici un code qui fonctionne, ton formulaire apparait et disparait lorsque tu click le bouton. Mets le bouton ou tu veux ca fonctionnera pareil.

fichier html:

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
<!DOCTYPE html>
<html>
    <head>
        <title>Contact Form using JavaScript</title> <!-- Include CSS file here -->
        <link href="form.css" rel="stylesheet">
        <script src="form.js"></script>
    </head>
    <body>
        <div id="main">
        <h1>Contact Form using JavaScript</h1>
        <button style="background-Color: green ;" onclick="showForm()">Formulaire</button>
        <div id="form_sample"></div><!--Include JS file here -->
        </div>
    </body>
</html>

le fichier js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
let clicks = 0;
 
function showForm() {
 
    clicks += 1;
 
    if (clicks < 2) {
        // Fetching HTML Elements in Variables by ID.
        var x = document.getElementById("form_sample");
        var createform = document.createElement('form'); // Create New Element Form
        createform.setAttribute("action", ""); // Setting Action Attribute on Form
        createform.setAttribute("method", "post"); // Setting Method Attribute on Form
        createform.setAttribute("id", "toRemove");
        x.appendChild(createform).style.visibility = status;
 
        var heading = document.createElement('h2'); // Heading of Form
        heading.innerHTML = "Contact Form ";
        createform.appendChild(heading);
 
        var line = document.createElement('hr'); // Giving Horizontal Row After Heading
        createform.appendChild(line);
 
        var linebreak = document.createElement('br');
        createform.appendChild(linebreak);
 
        var namelabel = document.createElement('label'); // Create Label for Name Field
        namelabel.innerHTML = "Your Name : "; // Set Field Labels
        createform.appendChild(namelabel);
 
        var inputelement = document.createElement('input'); // Create Input Field for Name
        inputelement.setAttribute("type", "text");
        inputelement.setAttribute("name", "dname");
        createform.appendChild(inputelement);
 
        var linebreak = document.createElement('br');
        createform.appendChild(linebreak);
 
        var emaillabel = document.createElement('label'); // Create Label for E-mail Field
        emaillabel.innerHTML = "Your Email : ";
        createform.appendChild(emaillabel);
 
        var emailelement = document.createElement('input'); // Create Input Field for E-mail
        emailelement.setAttribute("type", "text");
        emailelement.setAttribute("name", "demail");
        createform.appendChild(emailelement);
 
        var emailbreak = document.createElement('br');
        createform.appendChild(emailbreak);
 
        var messagelabel = document.createElement('label'); // Append Textarea
        messagelabel.innerHTML = "Your Message : ";
        createform.appendChild(messagelabel);
 
        var texareaelement = document.createElement('textarea');
        texareaelement.setAttribute("name", "dmessage");
        createform.appendChild(texareaelement);
 
        var messagebreak = document.createElement('br');
        createform.appendChild(messagebreak);
 
        var submitelement = document.createElement('input'); // Append Submit Button
        submitelement.setAttribute("type", "submit");
        submitelement.setAttribute("name", "dsubmit");
        submitelement.setAttribute("value", "Submit");
        createform.appendChild(submitelement);
 
    } else {
        var x = document.getElementById("toRemove").remove();
        clicks = 0;
    }
}

et t'as meme le css (magnifique non !!!):

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/* Below line is write to use Google font online */
@import "http://fonts.googleapis.com/css?family=Ubuntu";
div#main{
width:830px;
height:650px;
margin:0 auto;
font-family:'Ubuntu',sans-serif
}
div#form_sample{
text-align:center;
width:300px;
padding:0 50px 15px;
margin-top:20px;
float:left
}
#main h1{
margin-top:40px
}
hr{
margin-top:-5px
}
label{
float:left;
font-size:16px
}
input[type="text"]{
width:100%;
margin-top:10px;
height:35px;
margin-bottom:25px;
padding:10px;
border:3px solid #2BC1F2
}
textarea{
width:100%;
border:3px solid #2BC1F2;
padding:10px;
margin-bottom:25px;
margin-top:10px;
height:100px;
resize:none
}
input[type="submit"]{
width:100%;
padding:10px 45px;
background-color:#2BC1F2;
border:none;
color:#fff;
font-size:18px;
font-weight:700;
cursor:pointer;
font-family:'Ubuntu',sans-serif
}
/* -------------------------------------
CSS for Sidebar (optional)
---------------------------------------- */
div#fugo{
float:right
}

le lien d'origine (j'ai évidemment modifie 2-3 détails). https://www.formget.com/javascript-contact-form/

Intégrer un formulaire avec boutton

JavaScript

Discussions similaires

Partager

Partager