Les formulaires propform ont déjà un aspect soigné dès leur installation — mais si vous les intégrez à votre site web ou les utilisez sous votre propre domaine, vous souhaiterez sans doute les adapter à l'identité visuelle de votre entreprise. Voici les options disponibles.
Tous les paramètres de design peuvent être configurés à deux niveaux :
| Niveau | Où | Quand |
|---|---|---|
| Au niveau du compte | Paramètres du compte → Style par défaut des formulaires | Valeurs par défaut, s'appliquent à tous les formulaires pour lesquels l'option « Utiliser le style par défaut » est activée |
| Par formulaire | Paramètres du formulaire → Style | Remplacent la valeur définie au niveau du compte pour ce formulaire spécifique |
> 💡 Recommandation : gérez le logo, les couleurs et la police une seule fois dans les paramètres du compte. Ne modifiez ces paramètres par formulaire que dans des cas particuliers (co-branding, promotions spéciales).
Apparaît au-dessus de vos formulaires.
Petit logo dans l'onglet du navigateur.
Trois options pour l'hébergement des images de logo/favicon :
https://meinmaklerbüro.de/wp-content/uploads/logo.png)mcms.onoffice.de/...)> 💡 Astuce pour le logo dans un e-mail : Si ton logo est déjà intégré dans un modèle d'e-mail onOffice, tu peux y copier l'adresse de l'image et l'utiliser dans propform — il s'agit généralement d'un PNG transparent.
Saisie sous forme de code hexadécimal (par ex. #FF6B35 pour l'orange) ou via le sélecteur de couleurs.
> 💡 Conseil CI : Choisissez une couleur d'accent identique à la couleur principale de votre site web — le formulaire intégré s'intégrera alors parfaitement à la page.
La police de caractères est sélectionnée dans les paramètres du compte/du formulaire parmi une sélection de polices Google hébergées.
> 🔒 Nous hébergeons toutes les polices Google sur nos serveurs — lorsque vous accédez à votre formulaire, aucune connexion à Google n'est établie. Vous contournez ainsi le problème lié au RGPD concernant les avertissements relatifs aux polices Google.
Si la police de votre identité visuelle ne figure pas dans la sélection :
Au lieu d'une simple couleur d'arrière-plan, vous pouvez définir une image comme arrière-plan — par exemple, une photo lifestyle évocatrice pour un formulaire de prospection.
Configuration : Paramètres du compte/du formulaire → Style → Image d'arrière-plan → Saisir l'URL de l'image.
Dans les paramètres du formulaire → Style → Style, vous choisissez l'apparence des boutons et des champs de saisie :
| Style | Apparence | Convient à |
| Angulaire (rounded-0) | angles vifs à 90° | sites web techniques / classiques |
| Arrondi (rounded) | légers arrondis | sites web modernes (par défaut) |
| Pilule (rounded-pill) | entièrement arrondi | sites web conviviaux / ludiques |
> 💡 Choisissez le type de design qui correspond au style de votre site web principal afin que les formulaires intégrés s'intègrent naturellement.
propform propose quatre variantes d'intégration (intégration JavaScript, composant web, iFrame avec hauteur automatique, iFrame simple) ainsi que des paramètres supplémentaires tels que la cible de la page de remerciement, la version du script et le comportement relatif au consentement aux cookies.
📖 Guide complet avec les quatre options et les options supplémentaires : Paramètres du formulaire → Intégration iFrame
<script> externes, mais que l'iFrame est autoriséform-id doit être le slug système, et non le chemin d'accès URL personnaliséLes formulaires propform sont automatiquement adaptatifs — les champs, les boutons et la mise en page s'adaptent à la largeur de l'écran.
<head> : <meta name="viewport" content="width=device-width, initial-scale=1.0"> (par défaut, mais parfois oublié dans les très anciens modèles)100% (pas dans px)min-widthPiège iPhone : avec « Prendre une photo », une seule image est possible. Pour le téléchargement de plusieurs photos, il faut sélectionner « Bibliothèque » — voir Échec du téléchargement de fichiers → Multi-photos sur iPhone.
## CSS personnalisé (en projet)
Actuellement, il n'est pas possible d'utiliser son propre CSS par formulaire — le design est limité aux options ci-dessus.
À venir : un champ de saisie par formulaire pour votre propre CSS et vos classes CSS, grâce auquel vous pourrez personnaliser davantage les éléments existants (par exemple, effets de survol des boutons, icônes personnalisées dans les libellés, espacement personnalisé). Si cette fonctionnalité vous intéresse et que vous avez un cas d'utilisation concret, envoyez-nous un petit message — les cas d'utilisation nous aident à établir nos priorités.
En attendant : si vous avez absolument besoin de CSS personnalisé (par exemple en raison de directives de marque très spécifiques), vous pouvez le faire autour de l'iFrame dans le CSS de votre site web — par exemple, un cadre coloré, des ombres ou un conteneur avec un padding.