Construction des pages

  • WordPress :5.2
  • Statut : non résolu
3 sujets de 1 à 3 (sur un total de 3)
  • Auteur
    Messages
  • #2283761
    mumu51
    Participant
    Initié WordPress
    48 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7
    • Thème utilisé : Je le fais moi-même
    • Extensions en place : Askimet
    • Nom de l’hébergeur : En local

    Problème(s) rencontré(s) :

    J’essaie de découper un formulaire qui diffuserait un contenu selon les choix fait sur la page précédente :

    • Sur une page d’accueil, je choisi une option, et lorsque je valide mon choix, je suis redirigé vers une page contenant un formulaire avec une étape en moins (puisque l’option a été choisie juste avant)
    • En revanche, si sur ma page d’accueil,  j’appuie sur un bouton me redirigeant vers le même formulaire et sans avoir choisi une option ; mon formulaire va contenir une étape en plus à compléter.

    Et en fait, je n’ai aucune idée de comment faire pour réaliser ce découpage.

    J’avais commencé à faire ceci :

    <?php get_header(); ?>
    <div class="jumbotron text-center">
    /* [...] */
    <div class="container pb-5">
    	<div class="row row-titre mb-5">
    		<div class="col-12 d-flex flex-column">
    			<p class="lead semibold">Des prestations complétes</p>
    			<h2><b>Pour vos évenements ardennais</b></h2>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-12 d-flex">
    			<form id="formules-form" method="POST" action="<?php echo get_home_url(); ?>/devis" class="d-flex flex-column" data-aos="fade-right">
    				<b>Obtenir un devis</b>
    				<p>Pour quel événement souhaitez-vous faire appel à mes services ?</p>
    				<div class="inputGroup">
    					<input id="radio1" name="radio" type="radio" value="1"/>
    					<label for="radio1"><img src="<?php bloginfo('template_directory');?>/assets/icons/birthday.png" class="traiteur-icon"> Un anniversaire</label>
    				</div>
    				<div class="inputGroup">
    					<input id="radio2" name="radio" type="radio" value="2"/>
    					<label for="radio2"><img src="<?php bloginfo('template_directory');?>/assets/icons/baptism.png" class="traiteur-icon"> Un baptême</label>
    				</div>
    				<div class="inputGroup">
    					<input id="radio3" name="radio" type="radio" value="3"/>
    					<label for="radio3"><img src="<?php bloginfo('template_directory');?>/assets/icons/retirement.png" class="traiteur-icon"> Un départ en retraite</label>
    				</div>
    				<div class="inputGroup">
    					<input id="radio4" name="radio" type="radio" value="4"/>
    					<label for="radio4"><img src="<?php bloginfo('template_directory');?>/assets/icons/wedding.png" class="traiteur-icon"> Un mariage</label>
    				</div>
    				<button id="start" class="btn btn-primary">Commencer ma demande</button>
    			</form>
    			<div id="traiteur-formules-img" data-aos="fade-left">
    				<img src="<?php bloginfo('template_directory');?>/assets/img/traiteur-formules.jpg"></figure>
    			</div>
    		</div>
    	</div>
    </div>
    
    <?php get_footer(); ?>
    Partie home

    <form method="POST" id="devis_form" class="mt-5">
    <?php if (isset($_POST["radio"])) { ?>
    	<ul class="nav nav-tabs flex-column flex-sm-row justify-content-around">
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape active active_tab" id="lieu_details" data-toggle="pill">Lieu</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="date_details" data-toggle="pill">Date</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="heure_details" data-toggle="pill">Heure</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="convives_details" data-toggle="pill">Convives</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="regimes_details" data-toggle="pill">Régimes/Allergies</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="budget_details" data-toggle="pill">Budget</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="identification_details" data-toggle="pill">Identification</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="contact_details" data-toggle="pill">Contact</a>
    		</li>
    	</ul>
    	<div id="progress-input" class="progress mb-3">
    		<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-vluemax="100" style="width:0%;">
    			<span class="sr-only">0%</span>
    		</div>
    	</div>
    	<div class="tab-content pt-5">
    		<?php include('devis-content.php'); ?>
    	</div>
    <?php } else { ?>
    	<ul class="nav nav-tabs flex-column flex-sm-row justify-content-around">
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape active active_tab" id="event_details" data-toggle="pill">Evenement</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="lieu_details" data-toggle="pill">Lieu</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="date_details" data-toggle="pill">Date</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="heure_details" data-toggle="pill">Heure</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="convives_details" data-toggle="pill">Convives</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="regimes_details" data-toggle="pill">Régimes/Allergies</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="budget_details" data-toggle="pill">Budget</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="identification_details" data-toggle="pill">Identification</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link disabled nav-etape inactive_tab" id="contact_details" data-toggle="pill">Contact</a>
    		</li>
    	</ul>
    	<div id="progress-input" class="progress mb-3">
    		<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-vluemax="100" style="width:0%;">
    			<span class="sr-only">0%</span>
    		</div>
    	</div>
    	<div class="tab-content pt-5">
    		<div class="tab-pane active" id="list_event_details">
    			<div class="tab-head text-center mb-5">
    				<h2>Titre</h2>
    				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    			</div>
    			<div class="form-group col-8 offset-2">
    				<div class="inputGroup">
    					<input id="radio1" name="radio" type="radio" value="1"/>
    					<label for="radio1"><img src="<?php bloginfo('template_directory');?>/assets/icons/birthday.png" width="32" height="32"> Un anniversaire</label>
    				</div>
    				<div class="inputGroup">
    					<input id="radio2" name="radio" type="radio" value="2"/>
    					<label for="radio2"><img src="<?php bloginfo('template_directory');?>/assets/icons/baptism.png" width="32" height="32"> Un baptême</label>
    				</div>
    				<div class="inputGroup">
    					<input id="radio3" name="radio" type="radio" value="3"/>
    					<label for="radio3"><img src="<?php bloginfo('template_directory');?>/assets/icons/retirement.png" width="32" height="32"> Un départ en retraite</label>
    				</div>
    				<div class="inputGroup">
    					<input id="radio4" name="radio" type="radio" value="4"/>
    					<label for="radio4"><img src="<?php bloginfo('template_directory');?>/assets/icons/wedding.png" width="32" height="32"> Un mariage</label>
    				</div>
    				<div class="d-flex justify-content-between mt-5">
    					<button id="start-devis" class="btn btn-primary">Commencer ma demande</button>
    				</div>
    			</div>
    		</div>
    	</div>
    <?php } ?>
    </form>
    <div id="result"></div>
    Partie devis-body

    <div class="tab-pane active" id="list_lieu_details">
    	<div class="tab-head text-center mb-5">
    		<h2>Sylvie, toujours à votre écoute !</h2>
        	<?php
    			$message_intro = "<p class='lead'>Pour commencer, où se déroule ";
    			switch($_POST["radio"]) 
    			{
    			case 1:
    			    $message = $message_intro . " cet anniversaire ?</p>";
    			    $event = "anniversaire";
    			    break;
    			case 2:
    			    $message = $message_intro . " ce baptême ?</p>";
    			    $event = "baptême";
    			    break;
    			case 3:
    			    $message = $message_intro . " ce départ en retraite ?</p>";
    			    $event = "départ en retraite";
    			    break;
    			case 4:
    			    $message = $message_intro . " ce mariage ?</p>";
    			    $event = "mariage";
    			    break;
    			}
    			echo $message;
    			$_SESSION['event'] = $event;
    		?>
    	</div>
    	<div class="form-group col-8 offset-2">
    		<label for="lieu">Adresse ou ville de l'événement</label>
    		<input type="text" name="lieu" id="lieu" class="form-control" placeholder="Exemple : Givet, Charleville-Mézières, Les Ayvelles..." />
    		<span id="error_lieu" class="text-danger"></span>
    		<div class="d-flex justify-content-end mt-5">
    			<button type="button" name="btn_lieu_details" id="btn_lieu_details_next" class="btn btn-primary btn-next">Choisir une date <i class="fa fa-chevron-right"></i></button>
    		</div>
    	</div>
    </div>
    <div class="tab-pane" id="list_date_details">
    	<div class="tab-head text-center mb-5">
    		<h2>Titre</h2>
    		<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    	</div>
    	<div class="form-group col-8 offset-2">
    		<label for="date">À quelle date l'événement débutera-t-il ? </label>
    		<input type="date" name="date" id="date" class="form-control" />
    		<span id="error_date" class="text-danger"></span>
    		<div class="d-flex justify-content-between mt-5">
    			<button type="button" name="btn_date_details_previous" id="btn_date_details_previous" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i> Redéfinir le lieu</button>
    			<button type="button" name="btn_date_details" id="btn_date_details_next" class="btn btn-primary btn-next">Définir l'heure <i class="fa fa-chevron-right"></i></button>
    		</div>
    	</div>
    </div>
    <div class="tab-pane" id="list_heure_details">
    	<div class="tab-head text-center mb-5">
    		<h2>Titre</h2>
    		<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    	</div>
    	<div class="form-group col-8 offset-2">
    		<label for="heure">À quelle heure commence votre événement ?</label>
    		<input type="time" name="heure" id="heure" class="form-control" />
    		<span id="error_heure" class="text-danger"></span>
    		<div class="d-flex justify-content-between mt-5">
    			<button type="button" name="btn_heure_details_previous" id="btn_heure_details_previous" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i> Redéfinir la date</button>
    			<button type="button" name="btn_heure_details" id="btn_heure_details_next" class="btn btn-primary btn-next">Les convives <i class="fa fa-chevron-right"></i></button>
    		</div>
    	</div>
    </div>
    <div class="tab-pane" id="list_convives_details">
    	<div class="tab-head text-center mb-5">
    		<h2>Titre</h2>
    		<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    	</div>
    	<div class="form-group col-8 offset-2">
    		<label for="convives">Nombre de convives</label>
    		<input type="number" name="convives" id="convives" class="form-control" placeholder="Minimum 15 convives"/>
    		<span id="error_convives" class="text-danger"></span>
    		<div class="d-flex justify-content-between mt-5">
    			<button type="button" name="btn_heure_details_previous" id="btn_convives_details_previous" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i> Redéfinir l'heure</button>
    			<button type="button" name="btn_heure_details" id="btn_convives_details_next" class="btn btn-primary btn-next">Régimes spécifiques <i class="fa fa-chevron-right"></i></button>
    		</div>
    	</div>
    </div>
    <div class="tab-pane" id="list_regimes_details">
    	<div class="tab-head text-center mb-5">
    		<h2>Titre</h2>
    		<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    	</div>
    	<div class="form-group col-8 offset-2">
    		<div class="d-flex justify-content-between mb-5">
    			<div class="form-check">
    			  	<input class="form-check-input" name="options_regimes[]" type="checkbox" value="vegetalien" id="vegetalien">
    			  	<label class="form-check-label d-flex align-items-center justify-content-center flex-column" for="vegetalien">
    					<span class="libelle">Végétalien</span>
    			   		<span class="indicator"></span>
    				</label>
    			</div>
    			<div class="form-check">
    			 	<input class="form-check-input" name="options_regimes[]" type="checkbox" value="vegetarien" id="vegetarien">
    			  	<label class="form-check-label d-flex align-items-center justify-content-center flex-column" for="vegetarien">
    			  		<span class="libelle">Végétarien</span>
    			   		<span class="indicator"></span>
    				</label>
    			</div>
    			<div class="form-check">
    			 	<input class="form-check-input" name="options_regimes[]" type="checkbox" value="sans porc" id="sansporc">
    			  	<label class="form-check-label d-flex align-items-center justify-content-center flex-column" for="sansporc">
    			  		<span class="libelle">Sans porc</span>
    			  		<span class="indicator"></span>
    			  	</label>
    			</div>
    		</div>
    		<label for="allergies">Autre demande particulière (Facultatif)</label>
    		<textarea name="allergies" id="allergies" class="form-control" placeholder="Exemple : Allergies"></textarea>
    		<div class="d-flex justify-content-between mt-5">
    			<button type="button" name="btn_regimes_details_previous" id="btn_regimes_details_previous" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i> Redéfinir le nombre de convives</button>
    			<button type="button" name="btn_regimes_details" id="btn_regimes_details_next" class="btn btn-primary btn-next">Mon budget <i class="fa fa-chevron-right"></i></button>
    		</div>
    	</div>
    </div>
    <div class="tab-pane" id="list_budget_details">
    	<div class="tab-head text-center mb-5">
    		<h2>Titre</h2>
    		<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    	</div>
    	<div class="form-group col-8 offset-2">
    		<div id="btnBudget" class="btn-group btn-group-toggle mb-5 d-flex justify-content-center" data-toggle="buttons">
    			<label class="btn btn-secondary active">
    				<input type="radio" name="options_budget" id="byPeopleRadio" value="/personnes" autocomplete="off" checked> Par personnes
    			</label>
    			<label class="btn btn-secondary">
    				<input type="radio" name="options_budget" id="byTotalRadio" value="au total" autocomplete="off"> Prix total
    			</label>
    		</div>
    		<div id="byPeople" class="toggle-choice-radios justify-content-between mb-5">
    			<div class="form-check">
    			  	<input class="form-check-input" name="budgetOption" type="radio" value="tranche1" id="tranche1" checked>
    			  	<label class="form-check-label d-flex align-items-center justify-content-center flex-column" for="tranche1">
    			  		<span class="libelle">Tranche de prix 1</span>
    			  		<span class="indicator"></span>
    			  	</label>
    			</div>
    			<div class="form-check">
    			 	<input class="form-check-input" name="budgetOption" type="radio" value="tranche2" id="tranche2">
    			  	<label class="form-check-label d-flex align-items-center justify-content-center flex-column" for="tranche2">
    			  		<span class="libelle">Tranche de prix 2</span>
    			  		<span class="indicator"></span>
    			  	</label>
    			</div>
    			<div class="form-check">
    			 	<input class="form-check-input" name="budgetOption" type="radio" value="tranche3" id="tranche3">
    			  	<label class="form-check-label d-flex align-items-center justify-content-center flex-column" for="tranche3">
    			  		<span class="libelle">Tranche de prix 3</span>
    			  		<span class="indicator"></span>
    			  	</label>
    			</div>
    		</div>
    		<div id="byTotal" class="toggle-choice-radios justify-content-between mb-5">
    			<div class="form-check">
    			  	<input class="form-check-input" name="budgetOption" type="radio" value="tranche4" id="tranche4">
    			  	<label class="form-check-label d-flex align-items-center justify-content-center flex-column" for="tranche4">
    			  		<span class="libelle">Tranche de prix 4</span>
    			  		<span class="indicator"></span>
    			  	</label>
    			</div>
    			<div class="form-check">
    			 	<input class="form-check-input" name="budgetOption" type="radio" value="tranche5" id="tranche5">
    			  	<label class="form-check-label d-flex align-items-center justify-content-center flex-column" for="tranche5">
    			  		<span class="libelle">Tranche de prix 5</span>
    			  		<span class="indicator"></span>
    			  	</label>
    			</div>
    			<div class="form-check">
    			 	<input class="form-check-input" name="budgetOption" type="radio" value="tranche6" id="tranche6">
    			  	<label class="form-check-label d-flex align-items-center justify-content-center flex-column" for="tranche6">
    			  		<span class="libelle">Tranche de prix 6</span>
    			  		<span class="indicator"></span>
    			  	</label>
    			</div>
    		</div>
    		<span id="error_budget" class="text-danger"></span>
    		<div class="d-flex justify-content-between mt-5">
    			<button type="button" name="btn_budget_details_previous" id="btn_budget_details_previous" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i> Revenir sur les régimes</button>
    			<button type="button" name="btn_budget_details" id="btn_budget_details_next" class="btn btn-primary btn-next">Mes informations <i class="fa fa-chevron-right"></i></button>
    		</div>
    	</div>
    </div>
    <div class="tab-pane" id="list_identification_details">
    	<div class="tab-head text-center mb-5">
    		<h2>Titre</h2>
    		<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    	</div>
    	<div class="form-group col-8 offset-2">
    		<div id="btnGenre" class="btn-group btn-group-toggle mb-5 d-flex justify-content-center" data-toggle="buttons">
    			<label class="btn btn-secondary active">
    				<input type="radio" name="options_genre" id="m" value="m" autocomplete="off" checked> M
    			</label>
    			<label class="btn btn-secondary">
    				<input type="radio" name="options_genre" id="mme" value="mme" autocomplete="off"> Mme
    			</label>
    		</div>
    		<div class="form-label-group mb-4">
    			<label for="name">Nom *</label>
    		    <input type="text" name="name" id="name" class="form-control" placeholder="Nom de famille" required="">
    		    <span id="error_identification" class="text-danger"></span>
    		</div>
    		<div class="form-label-group">
    			<label for="firstname">Prénom (facultatif)</label>
    			<input type="text" name="firstname" id="firstname" class="form-control" placeholder="Prénom" />
    		</div>
    		<div class="d-flex justify-content-between mt-5">
    			<button type="button" name="btn_identification_details_previous" id="btn_identification_details_previous" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i> Modifier mon budget</button>
    			<button type="button" name="btn_identification_details" id="btn_identification_details_next" class="btn btn-primary btn-next">Être recontacté(e) <i class="fa fa-chevron-right"></i></button>
    		</div>
    	</div>
    </div>
    <div class="tab-pane" id="list_contact_details">
    	<div class="tab-head text-center mb-5">
    		<h2>Titre</h2>
    		<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    	</div>
    	<div class="form-group col-8 offset-2 mb-5">
    		<div class="form-label-group mb-4">
    			<label for="adresse-e">Email *</label>
    		    <input type="text" name="email" id="email" class="form-control" placeholder="Exemple@gmail.com" required="">
    		</div>
    		<div class="form-label-group mb-4">
    			<label for="telephone">Téléphone (facultatif)</label>
    		    <input type="text" name="telephone" id="telephone" class="form-control" placeholder="Numéro de téléphone">
    		    <textarea class="mt-4 w-100" name="indications" placeholder="Précisez des horaires auxquelles je peux vous contacter"></textarea>
    		</div>
    		<span id="error_contact" class="text-danger"></span>
    		<div class="d-flex justify-content-between mt-5">
    			<button type="button" name="btn_contact_details_previous" id="btn_contact_details_previous" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i> Modifier mes informations</button>
    			<button type="button" name="btn_contact_details" id="btn_contact_details_next" class="btn btn-primary btn-next">Terminer ma demande <i class="fa fa-chevron-right"></i></button>
    		</div>
    	</div>
    </div>
    Partie body-content

    Personnellement, je trouve que ma façon de procéder n’est pas très claire, et si quelqu’un repassait derrière moi ça serait vite compliqué.

    Existe-il un découpage que j’ignore ?

    Typiquement, j’aimerais procéder comme sur ce site avec les formulaires qui s’adaptent :

    À savoir que j’utilise AJAX à la fin et également un indicateur d’étape.

    Merci à celles et ceux qui pourront m’aider 🙂

    #2283787
    momofr@free.fr
    Modérateur
    Maître WordPress
    2710 contributions

    Salut, dans ton exemple la première page ne fait pas partie du formulaire et juste un ensemble d’URL vers des formulaires différents.

    Pour le reste tu as le choix entre un formulaire à étapes avec une extension comme multi-step-form ou quelque chose d’un peu plus compliqué avec contact-form-7-multi-step-module par exemple ou contact-form-7-multi-step-addon.

    Construire le formulaire sur plusieurs pages implique de gérer les informations dans la session, si tu restes sur la même page c’est normalement dans le formulaire.
    Mon expérience ce limite à des choses intégrées à Elementor avec des extensions Premiums.

    #2283938
    mumu51
    Participant
    Initié WordPress
    48 contributions

    Bonjour,

    Tout d’abord, merci pour ta réponse !
    Pour ma part, je tiens entièrement à développer mon thème à la main, et sans plugin/extensions, pour bien appréhender WordPress et ses fonctions.

    Du coup, j’ai creusé un peu plus (bon pas beaucoup pour le coup, mais au moins j’ai fais simple), et ma façon de faire se résume à tester si un choix à été fait à partir de ma page d’accueil.
    Si oui, j’utilise get_template_part(‘parts/devis’,’body’) qui me redirige en fait vers mon formulaire “normal” (et dedans j’ai bien créé une variable session, comme tu le dis, et ça, bien avant mon soucis), et si pas de choix depuis la page d’accueil, je passerai d’abord par une page intermédiaire, avec pour contenu, le formulaire que j’avais sur ma page d’accueil, et qui, lorsque j’aurai fais mon choix, me redirigera vers mon formulaire “normal”.

    Du coup j’ai :

    <?php
        /*
        Template Name: devis
        */
    	get_template_part('parts/devis','header'); 
    	if (isset($_POST["radio"])) {
    		get_template_part('parts/devis','body');
    	}
    	else{
    		get_template_part('parts/devis','inter-form');
    	}
    	get_template_part('parts/devis','footer');
    ?>
    devis.php

    <div class="container pb-5">
    	<div class="row row-titre mb-5">
    		<div class="col-12 d-flex flex-column">
    			<form id="formules-form" method="POST" action="<?php echo get_home_url(); ?>/devis" class="d-flex flex-column" data-aos="fade-right">
    				<div class="text-center mb-5">
    					<h2>Titre</h2>
    					<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    				</div>
    				<div class="inputGroup">
    					<input id="radio1" name="radio" type="radio" value="1"/>
    					<label for="radio1"><img src="<?php bloginfo('template_directory');?>/assets/icons/birthday.png" width="32" height="32" class="mr-2"> Un anniversaire</label>
    				</div>
    				<div class="inputGroup">
    					<input id="radio2" name="radio" type="radio" value="2"/>
    					<label for="radio2"><img src="<?php bloginfo('template_directory');?>/assets/icons/baptism.png"  width="32" height="32" class="mr-2"> Un baptême</label>
    				</div>
    				<div class="inputGroup">
    					<input id="radio3" name="radio" type="radio" value="3"/>
    					<label for="radio3"><img src="<?php bloginfo('template_directory');?>/assets/icons/retirement.png"  width="32" height="32" class="mr-2"> Un départ en retraite</label>
    				</div>
    				<div class="inputGroup">
    					<input id="radio4" name="radio" type="radio" value="4"/>
    					<label for="radio4"><img src="<?php bloginfo('template_directory');?>/assets/icons/wedding.png"  width="32" height="32" class="mr-2"> Un mariage</label>
    				</div>
    				<button id="start" class="btn btn-primary">Commencer ma demande</button>
    			</form>
    		</div>
    	</div>
    </div>
    Page intermédiaire

    Peut-être que ma façon de procéder fera grincer des dents certains développeurs (je pense ça car c’est une manière de faire très artisanale ^^), mais en attendant, je semble avoir résolu mon problème.

    • Cette réponse a été modifiée le il y a 1 week et 2 jours par  mumu51.
3 sujets de 1 à 3 (sur un total de 3)
  • Vous devez être connecté pour répondre à ce sujet.