Icône de ressource

Widget Framework 2.5.9

Aucune permission de téléchargement

Fa1con74

Membre
Messages
51
Réactions
3
Bonjour,

Je souhaite créer un widget pour l'inscription à une newsletter et je souhaite qu'il ressemble à ceci
2015-03-13_09-03-43.png qui est un exemple trouvé ici avec ce code
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>

et voici le code de mon widget

<form action='http://eletters.xxxx.xx/subscription.php' method='post' target='pmnlwindow' onsubmit="window.open('http://eletters.xxxx.xx/subscription.php', 'pmnlwindow', 'scrollbars=yes,width=700,height=210');return true">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" name='email_addr' value='' size='30' placeholder="Email address">
</div>
<input type='hidden' name='list_id' value='4'>
<input type='hidden' name='op' value='join'>
<input class="btn btn-default btn-sm" type='submit' value='souscrire'>
</form>

mais malheureusement voici le résultat : 2015-03-13_09-09-48.png

Comment puis-je faire ?

Merci
 

Ombre

Pêcheur CSS !
Membre
Messages
1 284
Réactions
157
Bonsoir,

J'ai pris exemple sur ce code HTML, à toi de rajouter la partie FORM:

Code:
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>

Et voici la partie CSS:

Code:
.form-control {
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.form-control:focus {
    border-color: #66afe9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}
.form-control::-moz-placeholder {
    color: #777777;
    opacity: 1;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #eeeeee;
    cursor: not-allowed;
    opacity: 1;
}
textarea.form-control {
    height: auto;
}
.fa-fw {
    text-align: center;
    width: 1.28571em;
}
*::before, *::after {
    box-sizing: border-box;
}
* {
    box-sizing: border-box;
}
.input-group {
    border-collapse: separate;
    display: table;
    position: relative;
    margin-bottom: 5px !important;
}
.input-group .form-control {
    float: left;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}
.input-group-addon {
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #555555;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    padding: 6px 12px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    width: auto%;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

Voici le résultat identique à celui du site en question:

Ombre_01__14-03-2015 18h43.png
 

Fa1con74

Membre
Messages
51
Réactions
3
Bonsoir,

J'ai pris exemple sur ce code HTML, à toi de rajouter la partie FORM:

Code:
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
Et voici la partie CSS:

Code:
.form-control {
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.form-control:focus {
    border-color: #66afe9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}
.form-control::-moz-placeholder {
    color: #777777;
    opacity: 1;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #eeeeee;
    cursor: not-allowed;
    opacity: 1;
}
textarea.form-control {
    height: auto;
}
.fa-fw {
    text-align: center;
    width: 1.28571em;
}
*::before, *::after {
    box-sizing: border-box;
}
* {
    box-sizing: border-box;
}
.input-group {
    border-collapse: separate;
    display: table;
    position: relative;
    margin-bottom: 5px !important;
}
.input-group .form-control {
    float: left;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}
.input-group-addon {
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #555555;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    padding: 6px 12px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    width: auto%;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
Voici le résultat identique à celui du site en question:

Voir la pièce jointe 9893

Merci beaucoup, il faut que je me penche sur les css
 

Fa1con74

Membre
Messages
51
Réactions
3
Bonjour,

eh oui encore moi, avec l'aide de ombre, j'ai réussi le début de mon widget
mais maintenant je n'arrive pas à faire le bouton de souscription

Code:
<form action='http://xxxxx.xxxx.fr/subscription.php' method='post' target='pmnlwindow' onsubmit="window.open('http://xxxxx.xxxx.fr/subscription.php', 'pmnlwindow', 'scrollbars=yes,width=700,height=210');return true">
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" name='email_addr' value='' size='30' placeholder="Adresse Mail">
</div>
<div class="input-group margin-bottom-sm">
<input type='hidden' name='list_id' value='4'>
<input type='hidden' name='op' value='join'>
<span class="input-group-addon">
<i class="fa fa-user-plus pull-left"></i></span>
<input class="btn-primary btn" type='submit' value='souscrire'>
</div>
</form>

J'aimerai que le bouton ressemble à ceci 2015-03-16_07-04-06.png

et le mien ressemble à cela :( 2015-03-16_07-05-38.png
 

Antrax

Membre
Messages
1
Réactions
0
Merci et bravo pour cette trad !!

J'ajouterais que la trad est pas facile a réaliser et de qualité ;)
 
Haut