TOPIC:

Styling a form with bootstrap 4 classes 2 days 7 hours ago #252819

  • Topic Author
  • activha
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 22
  • Thanks: 0
Hello
We are on joomla 3 but use heavily bootstrap 4 on our template
I'd like to style the form used in this page activ-ha.com/lead-creation to allow a nicer display with everything online and taking the full div width
Could you tell me how to do it ?
I tried setting classes in the backend form but no success so far
Any clue ?
Thanks
Jean

Please Log in or Create an account to join the conversation.

Styling a form with bootstrap 4 classes 2 days 6 hours ago #252820

  • Eddy.vh's Avatar
  • Eddy.vh
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 568
  • Karma: 4
  • Thanks: 94
Bonsoir Jean.

Breezingforms pour Joomla! 3 utilise bootstrap 3 maxi. Il faudra attendre Joomla!4 pour bénéficier de BS4 dans Breezingforms.

Jusque là, si vous souhaitez ajouter des classes BS4 à vos éléments, il est peut-être envisageable de le faire à l'aide de Javascript.

Si cela vous convient et que vous ne savez pas comment, faites-le savoir, je pourrais vous guider.

Bonne soirée.
Eddy.

Please Log in or Create an account to join the conversation.

Styling a form with bootstrap 4 classes 2 days 6 hours ago #252821

  • Topic Author
  • activha
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 22
  • Thanks: 0
Merci pour le français :-)

oui en fait je voudrais faire quelque chose de correct avec BS4 sachant que nous le chargeons partout sur le site.

Pouvez vous m'aider sur ce point ? en fait je cherche à faire quelque chose du genre de l'input email sur cette page houah.com/accueil-houah

Merci beaucoup

Please Log in or Create an account to join the conversation.

Styling a form with bootstrap 4 classes 2 days 5 hours ago #252822

  • Eddy.vh's Avatar
  • Eddy.vh
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 568
  • Karma: 4
  • Thanks: 94
Il s'agit apparemment d'un input email suivi directement d'un input de type subit.

Il est peut-être possible de réaliser ça avec un peu de css.

J'y jette un œil demain matin.

Eddy.

Please Log in or Create an account to join the conversation.

Styling a form with bootstrap 4 classes 1 day 14 hours ago #252851

  • Eddy.vh's Avatar
  • Eddy.vh
  • Offline
  • Ultimate Breezer
  • Ultimate Breezer
  • Posts: 568
  • Karma: 4
  • Thanks: 94
Bonjour Jean,

J'ai jeté un œil à l'exemple que vous mentionnez plus haut, il s'agit d'un formulaire intégré à Joomshaper SP Page Builder, que vous utilisez également. Ce formulaire utilise seulement un positionnement absolu pour ses éléments afin de les placer où le webmaster le veut.
Je ne sais pas si c'est un style intégré originairement à SPPB ou quelque chose de personnalisé.

Si vous tenez à faire le même type de chose avec BreezingForms, il faut insérer des css personnelles, soit dans un thème personnalisé soit dans un fichier css custom de votre template de site, soit encore pour cet unique formulaire, dans la partie "Avant le formulaire" des "Pièces de formulaire".
J'ai fait un petit test et suis arrivé à quelque chose de très similaire, pour ne pas dire identique.

Il y a plusieurs manière de faire et j'ai utilisé la suivante :
  1. J'ai paramétré le formulaire pour qu'il n'inclut pas le bouton "Envoyer".
  2. J'ai préparé le formulaire avec une section dans laquelle j'ai placé deux éléments, l'un de type texte pour lequel j'ai indiqué un type "email" à l'aide de javascript (script d'initialisation du champ) et le second de type "bouton d'envoi" (libellé et nom = submit ou ce que vous voulez et Valeur = "Book A Demo" ou le texte que vous souhaitez voir sur le bouton)
  3. Dans le script d'action du bouton, vous cocher "Bibliothèque" et "Clic" et vous sélectionnez le script "FF::ff_validate_Submit"
  4. J'ai ensuite paramétré le formulaire avec un thème Bootstrap par défaut et coché les options
    "Utilise Bootstrap3" et "Utilise Bootstrap3 intégré".
  5. Ensuite, dans les propriétés avancées du formulaire -> Plus d'options -> Pièces de formulaire -> Avant le formulaire, j'ai inséré les css suivantes dans un echo php pour l'intégration au code source de la page.
    echo'
    
    <style>
    form.bfQuickMode {
        max-width: 600px;
        margin: auto;
    }
    
    #sec1 .bfClearfix {
      display: flex;
    }
    
    #sec1 .bfClearfix > div {
      flex: 0 1 auto;
      padding: 0;
      width: 30%;
    }
    #sec1 .bfClearfix > div:first-of-type {
        width: 70%;
    }
    
    .bfQuickMode span.bfbs3-nonform-control, button {
        width: 100% !important;
    }
    .bfQuickMode input[type=email] {
      padding-left: 2em !important;
      border-color: #673ab7 !important;
      border-right: none !important;
      border-radius: 2em 0 0 2em !important;
      height: 42px;
    }
    
    .bfQuickMode button {
      height: 42px;
      background: #673ab7 !important;
      border-left:0 !important;
      border-radius: 0 2em 2em 0 !important;
      font-weight: 800 !important;
    }
    .bfQuickMode input[type=email], .bfQuickMode button {
        box-shadow: 0 16px 32px rgba(0,0,0,0.2);
    }
    </style>
    
    ';

Avec ces étapes, j'obtiens un formulaire comme l'exemple ci-dessous :


Je vous joins une copie de ce petit formulaire que vous pourrez à loisir installer sur votre site afin de voir comment il est construit et même l'utiliser si vous le souhaitez. Il faudra alors paramétrer les notifications afin que vous receviez l'e-mail administrateur.

Pour l'installation, suivez les étapes de la section "Comment installer un package" de ce tutoriel (en français).

Je vous souhaite une excellente fin de semaine.

Cordialement,
Eddy
Attachments:

Please Log in or Create an account to join the conversation.

Last edit: Post by Eddy.vh.

Styling a form with bootstrap 4 classes 1 day 11 hours ago #252857

  • Topic Author
  • activha
  • Offline
  • Junior Breezer
  • Junior Breezer
  • Posts: 22
  • Thanks: 0
Merci beaucoup pour tout ! J'ai essayé de le reproduire mais comme nous sommes sur bootstrap 4 il y a un souci que je n'arrive pas à régler sur les deux champs houah.com/ si vous avez un moment je veux bien un conseil supplémentaire...

Par ailleurs est ce que vous faites du dev en css spécifique en freelance aussi ?

Cordialement,
Jean

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
  • 2
Moderators: ForumSupport
Time to create page: 0.080 seconds

BreezingForms Pro 1.4.7 for WordPress Released!

Available in the membership section.

September Discount!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!