Title: CSS form Sellsy (solution)
Last modified: May 27, 2021

---

# CSS form Sellsy (solution)

 *  ResolvedPlugin Author [Sellsy](https://wordpress.org/support/users/sellsy/)
 * (@sellsy)
 * [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/)
 * Bonjour [@misterlolo](https://wordpress.org/support/users/misterlolo/),
 * Pour répondre à votre question :
 * > `Bonjour Michael,
   > j’ai bien installé votre plugin à mon site WP et correctement relié au compte
   > Sellsy. cool
   > Mais je voudrais pourvoir créer parfois 2 ou 3 colonnes de champs pour:
   >  [civilité][
   > nom] [prenom] [email] [ mobile] [société] [fonction] [code potal] [message]
   > quel code CSS personnalisé dois-je rajouter pour y arriver ?
   > Je voudrais aussi pour gagner de la place pouvoir écrire société, nom, prénom....
   > à l'intérieur des champs plutôt qu'au dessus.
   >  quel code CSS personnalisé dois-
   > je rajouter pour y arriver ?
   > et Comment mettre à droite le bouton [envoi] ?
   > merci pour votre aide 🙂
   >  Laurent`
 * Vous pouvez utiliser le CSS et JS suivant :
 *     ```
       .form_contact_1{
           display: flex;
           flex-flow: row wrap;
           justify-content: space-around;
       }
       #form_contact #contact_form_company_name,
       #form_contact #contact_form_company_siren,
       #form_contact #contact_form_company_siret{
           width: 33% !important;
       }
       #form_contact #contact_form_contact_firstname,
       #form_contact #contact_form_contact_lastname,
       #form_contact #contact_form_contact_phone_1,
       #form_contact #contact_form_contact_phone_2,
       #form_contact #contact_form_address_zip,
       #form_contact #contact_form_address_town{
           width: 50% !important;
       }
       #form_contact label{ display: none; }
       ```
   
 *     ```
       const formLabel = {
               contact_form_company_name: 'Société',
               contact_form_company_siren: 'Siren',
               contact_form_company_siret: 'Siret',
               contact_form_company_rcs: 'RCS',
               contact_form_contact_civility: 'Civilité',
               contact_form_contact_lastname: 'Nom *',
               contact_form_contact_firstname: 'Prénom',
               contact_form_contact_email: 'Email *',
               contact_form_contact_phone_1: 'Téléphone',
               contact_form_contact_phone_2: 'Mobile',
               contact_form_contact_function: 'Fonction',
               contact_form_address_street: 'Adresse',
               contact_form_address_zip: 'Code postal',
               contact_form_address_town: 'Ville',
               contact_form_address_country: 'Pays',
               contact_form_website: 'Site web',
               contact_form_note: 'Note'
           };
   
           for (const prop in formLabel) {
               document.getElementById(<code>${prop}</code>).placeholder = <code>${formLabel[prop]}</code>;
           }
       ```
   
 * Changez les balises **code** dans le JS par un **`
 * NB : vous pouvez adapter cette exemple à vos besoins.
 * Michael
    -  This topic was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
    -  This topic was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
    -  This topic was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
    -  This topic was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
    -  This topic was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-form-sellsy-solution%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [marketingarcelys](https://wordpress.org/support/users/marketingarcelys/)
 * (@marketingarcelys)
 * [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/#post-14536738)
 * Bonjour,
 * Je suis actuellement en train de mettre en place un formulaire similaire avec
   liaison Sellsy, pouvez-vous m’expliquer avec plus de détail la partie concernant
   les placeholder ?
    Où ajoutez-vous le js ? “code” à changer par le type de balise?
 * Merci d’avance.
 * Yoh
 *  Plugin Author [Sellsy](https://wordpress.org/support/users/sellsy/)
 * (@sellsy)
 * [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/#post-14539938)
 * Bonjour,
 * **Placeholder :**
    Il sera généré dans le fichier JS. Nous allons pointer un 
   element du DOM, puis y ajouter la valeur indiquée dans la const formLabel. Vous
   pouvez donc changer le wording à cette emplacement (si besoin).
 * **JS :**
    Vous pouvez ajouter le JS dans votre thème enfant. Si vous ne disposez
   pas de thème enfant, alors vous pouvez ajouter le JS dans votre thème (attention,
   lors d’une mise à jour de votre thème, vous allez perdre les modifications). 
   Je vous conseille l’utilisation d’un thème enfant.
 * **Code :**
    Lors de l’ajout du 1er commentaire, sur cette page, l’éditeur de 
   wordpress.org a remplacé le ` par la balise < code >. Il faut bien penser le 
   remplacer pour que le rendu soit : document.getElementById(`${prop}`).placeholder
 * Michael
    -  This reply was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
    -  This reply was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
 *  [marketingarcelys](https://wordpress.org/support/users/marketingarcelys/)
 * (@marketingarcelys)
 * [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/#post-14540614)
 * Bonjour,
 * Merci pour votre réponse rapide. Je comprend mieux, il me semblait que la variable
   avait sautée.
 * Donc en gros si je récapitule, pour supprimer les label de mon formulaire (visible
   à cette adresse : ). Il faut simplement que j’importe un fichier .js dans la 
   page contact de mon thème enfant qui se constitue comme celui-ci ?
 *     ```
       	<script>
       const formLabel = {
               contact_form_company_name: 'Société',
               contact_form_contact_lastname: 'Nom *',
               contact_form_contact_email: 'Email *',
               contact_form_contact_phone_1: 'Téléphone',
               contact_form_address_street: 'Adresse',
               contact_form_address_zip: 'Code postal',
               contact_form_address_town: 'Ville',
               contact_form_note: 'Note'
           };
   
           for (const prop in formLabel) {
               document.getElementById('${prop}').placeholder = '${formLabel[prop]}';
           }
   
       	</script>
       ```
   
 * En tout cas, un grand merci pour ce plugin, la liaison entre wordpress et Sellsy
   est effective et cela génère un gain de temps énorme.
    -  This reply was modified 5 years ago by [marketingarcelys](https://wordpress.org/support/users/marketingarcelys/).
 *  [marketingarcelys](https://wordpress.org/support/users/marketingarcelys/)
 * (@marketingarcelys)
 * [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/#post-14540630)
 * Lien de l’image du formulaire : [https://ibb.co/XkjNvvr](https://ibb.co/XkjNvvr)
 *  Plugin Author [Sellsy](https://wordpress.org/support/users/sellsy/)
 * (@sellsy)
 * [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/#post-14541207)
 * Bonjour,
 * Le CSS du 1er commentaire va vous permettre de supprimer la label (dernière ligne).
 * Ex :
    #form_contact label{ display: none; }
 * Le JS du 1er commentaire va vous permettre d’indiquer un wording pour votre placeholder.
 * N’hésitez pas à laisser une note sur le plugin.
    Merci d’utiliser le plugin.
 * Michael
 *  [marketingarcelys](https://wordpress.org/support/users/marketingarcelys/)
 * (@marketingarcelys)
 * [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/#post-14541971)
 * Merci pour la réponse,
 * Oui oui aucun soucis avec la CSS, c’est très clair et au final on peut faire 
   pas mal de chose :).
 * C’était surtout au niveau du “prop”, je ne comprends pas à quoi cela correspond.
 * Le code que j’ai posté plus haut vous semble bon ?
 * Merci d’avance.
 * Yoh
 *  Plugin Author [Sellsy](https://wordpress.org/support/users/sellsy/)
 * (@sellsy)
 * [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/#post-14542026)
 * Bonjour,
 * **Prop : **
    Correspondra à la la propriété. Ex : – contact_form_company_name,
   pour le 1er tour da la boucle – contact_form_contact_lastname, pour le 2nd tour
   de la boucle – etc …
 * Il s’agira des “id” présent sur les champs du formulaire.
 * **formLabel[prop] :**
    Correspondra à la valeur.
 * Il s’agira du wording afficher dans votre placeholder.
 * NB : il faut bien utilise l’accent grave et pas la simple quote ([https://tppr.me/AkVfh](https://tppr.me/AkVfh))
 * Michael
    -  This reply was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
    -  This reply was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
    -  This reply was modified 5 years ago by [Sellsy](https://wordpress.org/support/users/sellsy/).
 *  [marketingarcelys](https://wordpress.org/support/users/marketingarcelys/)
 * (@marketingarcelys)
 * [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/#post-14544251)
 * Bonjour,
 * Un grand merci pour ces explications, tout fonctionne comme je le souhaite :).
 * Belle journée à vous.
 * Yoh.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘CSS form Sellsy (solution)’ is closed to new replies.

 * ![](https://ps.w.org/sellsy/assets/icon-256x256.jpg?rev=2603655)
 * [Sellsy](https://wordpress.org/plugins/sellsy/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/sellsy/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/sellsy/)
 * [Active Topics](https://wordpress.org/support/plugin/sellsy/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/sellsy/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/sellsy/reviews/)

 * 8 replies
 * 2 participants
 * Last reply from: [marketingarcelys](https://wordpress.org/support/users/marketingarcelys/)
 * Last activity: [5 years ago](https://wordpress.org/support/topic/css-form-sellsy-solution/#post-14544251)
 * Status: resolved