CSS form Sellsy (solution)

ResolvedPlugin Author

(@sellsy)

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.
This topic was modified 5 years ago by Sellsy.
This topic was modified 5 years ago by Sellsy.
This topic was modified 5 years ago by Sellsy.
This topic was modified 5 years ago by Sellsy.

The page I need help with: [log in to see the link]

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

marketingarcelys
(@marketingarcelys)

5 years ago

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
(@sellsy)

5 years ago
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 ww.wp.xz.cn 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.
- This reply was modified 5 years ago by Sellsy.
marketingarcelys
(@marketingarcelys)

5 years ago
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.
marketingarcelys
(@marketingarcelys)

5 years ago

Lien de l’image du formulaire : https://ibb.co/XkjNvvr

Plugin Author Sellsy
(@sellsy)

5 years ago

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
(@marketingarcelys)

5 years ago

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
(@sellsy)

5 years ago
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)

Michael
- This reply was modified 5 years ago by Sellsy.
- This reply was modified 5 years ago by Sellsy.
- This reply was modified 5 years ago by Sellsy.
marketingarcelys
(@marketingarcelys)

5 years ago

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.