Webdesign: (Such)-Formular mit eigenen Design / Grafiken verwenden

Anleitung: Suche auf der eigenen Webseite nach eigenen Vorstellungen gestalten

Vor ein paar Wochen haben wir Euch hier im Blog gezeigt, wie man die Google Custom Search Suche über HTML bzw. CSS Formatierungen ein nettes Design verpassen kann. Heute möchte ich Euch kurz zeigen, wie man ein Formular oder auch eine Suche mit eigenen Grafiken verschönern kann. CSS ist zwar eine recht feine Sache, kommt aber auch irgendwann an seine Grenzen und wenn man ein individuelles Formular haben möchte, kommt man wohl an folgender kleinen Anleitung nicht vorbei!

In diesem Beispiel definieren wir ein Eingabefeld – einen Button zum Abschicken der Eingabe und jeweils eine Grafik, welche von der Position her frei hinter dem Eingabefeld und dem Button positioniert werden kann. Natürlich kann man auch größere Bilddateien hinterlegen und muss nicht nur beim Eingabeformular bleiben. Auch zeigen wir Euch hier nach den Basics die Umsetzung in einem CSE (Google Benutzerdefinierten Suche).

Ziel ist es ein Suchfenster in folgender Form nach der Umsetzung bekommen:

 

 

Schritt 1: Variablen definieren

Damit alles sauber funktioniert müssen die IDs / Classen definiert werden!
Wir verwenden hier:
suchfeld –> der Rahmen des Hauptbildes
suchbox –> das Eingabeformular
suchbox_button –> der Button zum Abschicken

Ein fertiges Suchformular mit der Google Custom Search Anpassung sieht nun so aus:

 

<form action=http://www.domain.de/suche/ id="suchfeld">
  <div>
    <input type="hidden" name="cx" value="partner-pub-xxxxxxx" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input class="suchbox" type="text" name="q" placeholder="Suchbegriffe" required />
    <input class="suchbox_button" type="image"src=”http://www.domain.de/suchbuttongrafik.png” name="sa" value="" />
  </div>
</form>

 

Dieses Beispiel kann natürlich auch an eigene Formulare – nicht nur für eine Suche verwendet werden!

 

Schritt 2: CSS File definieren

 

#suchfeld {
width:246px; /*Breite Hintergrundbild*/
height:40px;/*Hoehe Hintergrundbild*/
background-image: url(http://www.domain.de/hintergrundbild.png);
background-repeat:no-repeat;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
position:relative;
}
 
#suchfeld form { display:inline ; }
 
.suchbox {
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:30px;
width:175px;
height:28px;
}
 
.suchbox_button {
border:0px;
background-color:transparent;
position:absolute;
top:6px;
left:212px;
width:26px;
height:26px;
}

 

Über das Padding und Margin steuert ihr die Abstände der Hauptgrafik.

Bei der suchbox und dem suchbox_button könnt ihr die Position über TOP und Left bestimmen!

TIPP: Zu Anpassungzwecken könnt ihr die Border auf 1 oder 2 setzen – dann seht ihr besser wo sich die Suchbox befindet!

 

Einfach etwas herum spielen, bis das Eingabeformular gut aussieht und alles zusammen passt! 

Viel Erfolg!