Insérer un checkbox sur mon site web

**VasantV** · 06/12/2022, 15h47

Bonjour,
j'ai créé mon site web avec Zyro: medecinechinoiseannecy.fr

Je souhaiterais ajouter une checkbox et Zyro ne propose pas cette option. Il faut donc que j'insère un code mais je ne sais pas coder.

Pourriez-vous m'aider, svp?

Voici ce que je veux créer:

Texte: J'ai lu et j'accepte les CGU (avec lien direct vers les CGU)

Checkbox à cocher pour signifier l'accord

Bouton "Je prends rendez-vous", utilisable uniquement si la check box est cochée, et qui renvoie vers le site de prise de rendez-vous

Le tout dans un format qui correspond à celui utilisé sur le site si possible

Quelqu'un pourrait m'aider ?

Merci beaucoup

**laurentSc** · 09/12/2022, 00h10

Bonsoir,

Moi, j'aurais utilisé le CMS Wordpress (le plus utilisé au monde) qui te permettrait cela.

Néanmoins, en gros, il est nécessaire d'ajouter un formulaire html dont le seul champ serait une checkbox et son action (un fichier PHP) testerait la valeur de la checkbox et si elle vaut true alors il affiche le texte Je prends rendez-vous à l'intérieur d'un bouton, et celui-ci faisant un lien vers https://soins.calendoc.net/pro/4907/890293809249631. C'est OK ?

Code pour le formulaire html :

Code html :

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

1
2
3
4
<form method="POST" action="action-chkbox.php">
<input type="checkbox" name="rdv" action="prendre-rdv.php">
<input type="submit" value="je prends rdv">
</form>

Code de prendre-rdv.php :

Code php :

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

1
2
3
4
if ($_POST['rdv']) /* si ça vaut true, c'est que la chkbox est cochée */
{
//on affiche le texte dans un bouton et autour de celui-ci, on place un lien html
}

C'est l'idée mais je m'arrête ce soir...

**VasantV** · 09/12/2022, 10h14

Bonjour LaurentSc

Merci beaucoup pour ta réponse. C'est sympa d'avoir passé du temps pour m'aider.
Ton code fonctionne mais il manque la partie " J'accepte les conditions générales d'utilisation"
En gros, je voudrais un truc comme ça:
□ J'ai lu et j'accepte les CGU ( avec lien vers les CGU)
si la case est cochée: bouton " Je prends RDV" qui envoie vers le site de rendez-vous

Merci encore

**laurentSc** · 09/12/2022, 10h57

Code html :

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

1
2
3
4
5
<form method="POST" action="action-chkbox.php">
<input type="checkbox" name="rdv" id="chkb" action="prendre-rdv.php">
<label for="chkb">J'ai lu et j'accepte les CGU (<a href="cgu.html">CGU</a>)</label>
<input type="submit" value="je prends rdv">
</form>

Si tu veux, je te donne aussi un code (html + css) pour que le fichier php affiche un bouton...

**VasantV** · 09/12/2022, 14h42

Bonjour LaurentSc

Merci encore pour ton aide ! C'est super
Je veux bien, si tu as encore un peu de temps, que tu insères un bouton qui renvoie vers le site de rendez-vous...
En fait, je sais insérer un code sur ma page mais je ne sais pas le créer !
Si tu veux voir mon site, c'est medecinechinoiseannecy.fr.
Tu verras, il y a des boutons d'accès aux rendez-vous un peu partout !
Merci encore pour ton aide
Anne-C

**laurentSc** · 09/12/2022, 14h54

Je viens de regarder le code d'un des boutons (avec l'inspecteur) mais avec Zyro, le code est un peu compliqué. Comme j'ai déjà fait ça pour mes besoins, j'ai beaucoup plus simple...Petite question : je suppose que ton site doit être "responsive" (qu'il tourne aussi bien sur ordi que sur mobile). Me le confirmes tu ?

**laurentSc** · 09/12/2022, 15h12

Voici un code de bouton "responsive" :

Code html :

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

<a href="https://soins.calendoc.net/pro/4907/890293809249631"><div class="box offset-bottom-right-shadow"><span class="btn-contact">Prendre RDV</span></div></a>

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
/* Boutons coins arrondis */
.box {
    text-align: center;
    margin-bottom: 30px;
    padding: 50px 0px;
    background-color: white;
    color: black;
    vertical-align: middle;
}
 
.offset-bottom-right-shadow {
    border-radius: 2em;
    box-shadow: 0px 5px 10px;
}
 
 
@media (min-width: 800px) {
  .box{
    width:10%;
  }
    .btn-contact{
        display:block;
        font-size:20px;
    }
}
@media (max-width: 800px) {
   .box{
    width:30%;
  }
    .btn-contact{
        display:block;
        font-size:20px;
    }

https://codepen.io/laurentsch/pen/jOKRboV

**VasantV** · 09/12/2022, 19h30

C'est canon, Merci laurent,
... Mais je fais comment pour intégrer le CSS au cade Html ?
J'ai plein de qualités... mais vraiment pas en inormatique !
En tous cas, si tu passes par Annecy, je t'offre une séance de médecine Chinoise !

**mathieu** · 09/12/2022, 19h52

si vous pouvez mettre du code html, vous pouvez y mettre des balises style et mettre le code css à l'intérieur :

Code html :

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

1
2
3
4
5
6
7
<style>
 
.box {
    text-align : center;
...
 
</style>

**laurentSc** · 09/12/2022, 22h04

mathieu t'a indiqué une solution :

Code html :

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

1
2
3
4
5
<style>
text-align : center;
...
</style>
<a href="...">...</a>

Mais tu peux aussi intégrer le CSS dans la partie <head> de ton site : https://support.zyro.com/en/articles...website-s-code auquel cas dans le <head> tu mets simplement :

Code css :

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

1
2
3
4
<style>
text-align:center;
...
</style>

et tu insères le code html comme tu sais le faire.

**VasantV** · 09/12/2022, 22h22

Super Mathieu Laurent!
On progresse, on progresse ; J'ai réussi à insérer CSS dans le html !
https://medecinechinoiseannecy.fr/testcode

Cependant il me reste quelques problèmes:
1- Je peux prendre rendez-vous même si je ne coche pas les CGV
2- Je voudrais pouvoir ouvrir mes CGV dans un nouvel onglet
3. Je voudrais pouvoir prendre rendez-vous dans un nouvel onglet

Merci encore
AnneC

**laurentSc** · 09/12/2022, 22h54

Je découvre Zyro. Mais j'ai vu qu'on ne peut pas insérer un formulaire en mettant juste son code html, comme on vient de faire ; il faut utiliser le module "contact form" : https://support.zyro.com/en/articles...a-contact-form

Pourquoi avoir choisi ce logiciel peu connu et ne disposant pas d'une communauté qui pourrait t'aider (comme Wordpress) ?

**laurentSc** · 09/12/2022, 23h23

Envoyé par VasantV

Je voudrais pouvoir prendre rendez-vous dans un nouvel onglet

Code html :

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

<a href="https://soins.calendoc.net/pro/4907/890293809249631" target="_blank"><div class="box offset-bottom-right-shadow"><span class="btn-contact">Prendre RDV</span></div></a>

**VasantV** · 12/12/2022, 12h01

Bonjour
Merci encore pour votre aide, Je vais maintenant pouvoir me débrouiller avec tout ce que vous m'avez enseigné !
J'ai choisi Zyro car je voulais faire mon site seule et que c'est beaucoup plus simple que Wordpress. Leur seul problème est qu'ils n'ont pas de boutons
Merci encore pour votre aide et belles fêtes de fin d'année
AnneC

**laurentSc** · 12/12/2022, 12h19

Bonjour,
pourtant, y a bien un bouton, ici : https://support.zyro.com/fr/articles...-d-un-site-web...

Insérer un checkbox sur mon site web

Discussions similaires

Partager

Partager