5202

ein Blog über technische Fragen zu Blogger

Blogger: Kommt ein Kontakt Formular Widget?

von

So Freunde, das Problem mit meinem Rechner ist gelöst - ich bin zurück auf dem Spielfeld :D!

Am Sonntag wird es [falls ich fertig werde !] mit der Serie 'Ein eigenes Template entsteht' endlich weitergehen.

Bei der Vorbereitung zum nächsten Post habe ich mir die aktuellen Blogger-Layout Dateien noch mal angeschaut und dabei etwas verblüffendes entdeckt - über diese Entdeckung möchte ich heute kurz was schreiben.

Ein Traum wird wahr - Blogger scheint ein eigenes Kontakt Formular Widget zu bekommen!

Blogger CSS Layout

Das typische 'look & feel' von Blogger und sämtlicher Widgets entsteht über eine CSS-Dateien - nämlich http://www.blogger.com/static/v1/widgets/3934819169-widgets.js.

Diese Datei ist gepackt und sehr unübersichtlich - ich habe sie mal entpackt und die entscheidende Stellen extrahiert. Ihr findet hier die komplette CSS für ein Kontakt-Formular.

.contact-form-widget {
    height: 320;
    margin-left: 0;
    max-width: 250px;
    min-width: 250px;
    padding: 0;
    padding-top: 0;
    width: 220;
}
.contact-form-success-message {
    background: #f9edbe;
    border: 0 solid #f0c36d;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    color: #222;
    font-size: 11px;
    line-height: 19px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
}
.contact-form-error-message {
    background: #f9edbe;
    border: 0 solid #f0c36d;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    color: #666;
    font-size: 11px;
    font-weight: bold;
    line-height: 19px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
}
.contact-form-success-message-with-border {
    background: #f9edbe;
    border: 1px solid #f0c36d;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    color: #222;
    font-size: 11px;
    line-height: 19px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
}
.contact-form-error-message-with-border {
    background: #f9edbe;
    border: 1px solid #f0c36d;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    color: #666;
    font-size: 11px;
    font-weight: bold;
    line-height: 19px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
}
.contact-form-cross {
    height: 11px;
    margin: 0 5px;
    vertical-align: -8.5%;
    width: 11px;
}
.contact-form-email,
.contact-form-name {
    background: #fff;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-top: 1px solid #c0c0c0;
    box-sizing: border-box;
    color: #333;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 13px;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 0;
    vertical-align: top;
}
.contact-form-email-message {
    background: #fff;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-top: 1px solid #c0c0c0;
    box-sizing: border-box;
    color: #333;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 13px;
    margin: 0;
    margin-top: 5px;
    padding: 0;
    vertical-align: top;
}
.contact-form-email:hover,
.contact-form-name:hover,
.contact-form-email-message:hover {
    border: 1px solid #b9b9b9;
    border-top: 1px solid #a0a0a0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.contact-form-email:focus,
.contact-form-name:focus,
.contact-form-email-message:focus {
    border: 1px solid #4d90fe;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    outline: none;
}
.contact-form-name,
.contact-form-email,
.contact-form-email-message { width: 220px }
.contact-form-button {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-transition: all .218s;
    -moz-transition: all .218s;
    -o-transition: all .218s;
    -webkit-user-select: none;
    -moz-user-select: none;
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
    border: 1px solid #dcdcdc;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    color: #444;
    cursor: default;
    display: inline-block;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1');
    font-family: "Arial","Helvetica",sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 24px;
    line-height: 24px;
    margin-left: 0;
    min-width: 54px;
    *min-width: 70px;
    padding: 0 8px;
    text-align: center;
    transition: all .218s;
}
.contact-form-button:hover,
.contact-form-button.hover {
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -moz-transition: all 0;
    -o-transition: all 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -webkit-transition: all 0;
    background-color: #f8f8f8;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
    background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
    background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
    background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
    background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
    background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
    border: 1px solid #c6c6c6;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    color: #222;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#f1f1f1');
    transition: all 0;
}
.contact-form-button.focus,
.contact-form-button.right.focus,
.contact-form-button.mid.focus,
.contact-form-button.left.focus {
    border: 1px solid #4d90fe;
    outline: none;
    z-index: 4 !important;
}
.contact-form-button-submit:focus,
.contact-form-button-submit.focus {
    -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.contact-form-button-submit:focus,
.contact-form-button-submit.focus { border-color: #404040 }
.contact-form-button-submit:focus:hover,
.contact-form-button-submit.focus:hover {
    -moz-box-shadow: inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
}
.contact-form-button-submit {
    background-color: #666;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#777),to(#555));
    background-image: -webkit-linear-gradient(top,#777,#555);
    background-image: -moz-linear-gradient(top,#777,#555);
    background-image: -ms-linear-gradient(top,#777,#555);
    background-image: -o-linear-gradient(top,#777,#555);
    background-image: linear-gradient(top,#777,#555);
    border: 1px solid #505050;
    color: #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#777777',EndColorStr='#555555');
}
.contact-form-button-submit:hover {
    background-color: #555;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#666),to(#444));
    background-image: -webkit-linear-gradient(top,#666,#444);
    background-image: -moz-linear-gradient(top,#666,#444);
    background-image: -ms-linear-gradient(top,#666,#444);
    background-image: -o-linear-gradient(top,#666,#444);
    background-image: linear-gradient(top,#666,#444);
    border: 1px solid #404040;
    color: #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',EndColorStr='#444444');
}
.contact-form-button-submit:active,
.contact-form-button-submit:focus:active,
.contact-form-button-submit.focus:active {
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.contact-form-button-submit {
    background-color: #4d90fe;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
    background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
    background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
    background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
    background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
    background-image: linear-gradient(top,#4d90fe,#4787ed);
    border-color: #3079ed;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed');
}
.contact-form-button-submit:hover {
    background-color: #357ae8;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));
    background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
    background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
    background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
    background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
    background-image: linear-gradient(top,#4d90fe,#357ae8);
    border-color: #2f5bb7;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#357ae8');
}
.contact-form-button.disabled,
.contact-form-button.disabled:hover,
.contact-form-button.disabled:active {
    background: none;
    border: 1px solid #f3f3f3;
    border: 1px solid rgba(0,0,0,.05);
    color: #b8b8b8;
    cursor: default;
    pointer-events: none;
}
.contact-form-button-submit.disabled,
.contact-form-button-submit.disabled:hover,
.contact-form-button-submit.disabled:active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    background-color: #666;
    border: 1px solid #505050;
    color: #fff;
    filter: alpha(opacity=50);
    opacity: .5;
}
.contact-form-button-submit.disabled,
.contact-form-button-submit.disabled:hover,
.contact-form-button-submit.disabled:active {
    background-color: #4d90fe;
    border-color: #3079ed;
}

Nachdem Blogger so eine CSS nicht just für fun in sein CSS-Bündel packt, gehe ich mal davon aus, dass ein Kontakt Formular Widget kurz vorm Start ist.

So etwas gab es in Blogger bisher nicht - ist aber nach meiner Einschätzung einer der Widgets, das am häufigsten nachgefragt wird.

Wie schaut nun das ganze aus?

Ich habe die CSS von oben in einem Editor mal mit einem Standardformular ausprobiert und das Ergebnis schaut ... na ja, sehr Blogger like aus :D.

Aber das ist egal - es ist kein iFrame, also werden wir das neue Formular mit CSS an jedes Layout anpassen können. Ich freue mich schon drauf!

Weitere Posts zum Thema

Fragen Anmerkungen

Was haltet ihr von einem nativen Kontakt Widget? Sinnvoll oder braucht ihr so etwas nicht? Seit ihr mit euren bisherigen Kontakt-Lösung zufrieden?