5202

ein Blog über technische Fragen zu Blogger

Blogger: Kontaktformular Widget anpassen

von

Update: Fehler in der Gadget-Vorlage korrigiert.

Auf Blogger gibt es nun ein Kontaktformular Widget - ein tolles, neues Feature. Bis jetzt ging so etwas ja nur über Drittanbieter-Lösungen und die fand ich ehrlich gesagt seit jeher nervig.

Das Widget kommt optisch sehr schlicht daher. Außerdem wird es - wie alle Widgets - standardmässig auf allen Seiten angezeigt.

Ich meine, ein Kontaktformular gehört auf eine extra Seite. Außerdem wollte ich dem Widget a bisserl meinem Blog-Style anpassen.

Ich habe daher das Widget einmal um die Möglichkeit erweitert, nur auf einer statischen Seite angezeigt zu werden.

Für eine 'große' Anpassung habe ich das Widget auseinandergenommen und neu zusammengebaut. Wie das danach ausschaut, seht ihr in der Demo:


'normale' Kontaktformular Widget

Um das 'normale' Kontaktformular auf einer extra Seite anzuzeigen, müsst ihr erst mal eine entsprechende statische Seite haben. Legt also eine neue Seite an und nennt sie 'kontakt'.

Heads up! Seitennamen sind case-sensitiv, d.h. kontakt != Kontakt. Schreibt den Seitennamen klein, ansonsten funktioniert die Darstellung auf der Seite nicht!

Anschließend baut ihr das Widget ein. Dazu geht ihr im Dashboard auf Vorlage > HTML-bearbeiten und fügt direkt _unter_ diese Zeile den Widget Code ein:

<b:section class='main' id='main' showaddelement='yes'>

Das ist der Widget-Code:

<b:widget id='ContactForm1' locked='false' title='Kontaktformular' type='ContactForm'>
              <b:includable id='main'>
              <b:if cond='data:blog.pageName == &quot;kontakt&quot;'>
              <style>#Blog1 {display: none}</style>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId +  &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId +  &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId +  &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId +   &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
  </b:if>
</b:includable>
            </b:widget>

Das ist der normale Code vom Blogger Kontaktformular Widget. Ich habe diesen Code lediglich um die drei rot markierte Zeilen ergänzt.

Einmal handelt es sich dabei um ein konditionales Argument, mit dem das Widget nur auf einer bestimmten Seite angezeigt wird:

<b:if cond='data:blog.pageName == &quot;kontakt&quot;'>
...
</b:if>

Außerdem habe ich eine kleine Style Anweisung in das Widget geschrieben, mit dem der gesamte Blog-Innenteil ausgeblendet wird.

   <style>#Blog1 {display: none}</style>

Wenn ihr wollt, könnt ihr das Widget auch über den Vorlagen Designer einbauen und dann nachträglich mit dem Code ergänzen - hat den gleichen Effekt :D!

CSS

Ich habe das schon mal gepostet - falls ihr Lust habt, das 'normale' Kontaktformular zu personalisieren, ist dies die Standard-CSS dazu. Diese Standard-CSS wird euch vo Blogger zwangsweise in das Template eingespielt.

.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;
}

Wenn ihr diese CSS ändern wollt, müsst ihr sie mit einer zusätzliche Style-Anweisung überschreiben.

Um ehrlich zu sein - mir war das für mein eigenes Layout zu fitzelig. Wer will, darf sich da natürlich gerne mal austoben :D

Für mich selber habe ich gleich nach einer 'großen' Lösung gesucht und zwar habe ich das XML vom Widget umgeschrieben.

Bootstrap Kontaktformular Widget

Wenn euch die 'normale' Vorlage von Blogger zu schlicht daher kommt, probiert doch mal meine zweite Möglichkeit aus!

Dabei habe ich das Kontaktformular Widget komplett umgebaut.

Wenn ihr das ausprobieren wollt, geht ihr analog zum 'normalen' Widget vor. Diese Variante wird übrigens ebenfalls nur auf der Seite 'kontakt' angezeigt.

<b:widget id='ContactForm1' locked='false' title='Kontaktformular' type='ContactForm'>
 <b:includable id='main'>
  <b:if cond='data:blog.pageName == &quot;kontakt&quot;'>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
  <style>#Blog1 {display: none}</style>
   <form id="form_contact" class="well form-horizontal" novalidate="novalidate">
    <fieldset>
     <div class="control-group">
      <label class="control-label" for="name">Name *</label>
       <div class="controls">
        <input class="input-xlarge focused required" expr:id='data:widget.instanceId   &quot;_contact-form-name&quot;' name="name" placeholder="dein Name" type="text" value="" />
        </div>
      </div>
               <div class="control-group">
               <label class="control-label" for="email">Email *</label>
                    <div class="controls">
                      <input class="input-xlarge focused required email" expr:id='data:widget.instanceId   &quot;_contact-form-email&quot;' name="email" placeholder="deine E-Mail Adresse" type="email" value="" />
                    </div>
                </div>
                <div class="control-group">
                 <label class="control-label" for="message">Nachricht *</label>
                    <div class="controls">
                    <textarea class="input-xlarge required" cols="40" expr:id='data:widget.instanceId   &quot;_contact-form-email-message&quot;' name='email-message'  rows="8"></textarea>
                  
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" expr:id='data:widget.instanceId   &quot;_contact-form-submit&quot;' class="btn btn-info">senden</button>
                </div>
    
              <p class='contact-form-error-message' expr:id='data:widget.instanceId   &quot;_contact-form-error-message&quot;'/>
              <p class='contact-form-success-message' expr:id='data:widget.instanceId   &quot;_contact-form-success-message&quot;'/>
    
    </fieldset>
   </form>
  </b:if>
 </b:includable>
</b:widget>

Wem es interessiert: Ich benütze hier Bootstrap CSS und zwar über einen Bootstrap CDN-Server. Dabei entsteht etwa 100kb Last ... das entspricht einem kleinen Bild.

Weitere Posts zum Thema

Fragen Anmerkungen

Ein Kontaktformular ist zwar nur ein kleines Detail, aber für den Auftritt eines Blogs finde ich das wichtig. Bei mir laufen Beispielsweise rund ein viertel aller Leser-Kontakt über das Formular.

Wie ist das bei euch: Benutzt ihr ein Kontaktformular und passt ihr das an euer Blog-Layout an? Oder ist euch das wumpe und ihr braucht so etwas nicht?