integrieren

Google Forms nahtlos in WordPress integrieren

WordPress-Plugins für Formulare gibt es viele, aber es muss ja nicht alles in der eigenen Datenbank gespeichert werden. Insbesondere, wenn ihr die Daten weiter verarbeiten möchtet und sie dafür zum Beispiel in einer Tabelle braucht. Wie ihr in wenigen Schritten ein mit Google-Forms erstelltes Formular nahtlos in WordPress integriert, lest ihr in diesem Beitrag.

 

Google-Forms-in-WP-753x403

Google-Forms sind einfach zu bedienen und bieten viele Funktionen, um schnell Umfragen und Formulare zu erstellen. Praktisch sind auch die Validierungsmöglichkeiten der einzelnen Felder und die nutzerfreundlichen Hinweise am Textfeld, falls die eingegebenen Daten nicht den Vorgaben entsprechen. Auch die weitere Verarbeitung der Daten fällt leicht, da die Angaben in einer Google-Tabelle gespeichert werden. Einzig, dass per iframe eingebundene Umfragen als Google-Forms Element aus eurem Design herausstechen, trübt das Bild. Aber ihr könnt die Google-Formulare auch direkt in eure Seite integrieren und an euer persönliches Design anpassen:

Google-Formular-Iframe

1. Fragebogen in Google Forms erstellen

Zuerst erstellt ihr in Google-Forms einen Fragebogen mit den gewünschten Fragetypen, legt dann fest, welche Angaben erforderlich sind und ruft im nächsten Schritt die URL zum Fragebogen ab. Jeder, der die URL zu eurem Fragebogen kennt oder über einen Link darauf stößt, kann euren Fragebogen ansehen und ausfüllen. Darum bietet es sich an, das Formular direkt in WordPress zu integrieren und nicht zu verlinken oder per iframe einzubinden.

Google-Formular

2. WordPress-Plugin Google Forms installieren

Mit dem Plugin Google Forms holt ihr euch praktische Funktionen für Google-Forms in eure WordPress-Seite. Dazu gleich mehr.

3. Ein neue Umfrage anlegen und anpassen

Über den Navigationspunkt „Google Forms“ gelangt ihr zur Übersicht eurer bisher angelegten, beziehungsweise konfigurierten Formulare. Per Klick ist schnell der Dialog für das neue Formular aufgerufen:

Backend 1

Selbsterklärend fügt ihr in das erste Feld die URL zu eurer Google-Form ein. Interessanter wird es mit dem zweiten Feld, denn hier könnt ihr eine beliebige URL hinterlegen, die im Anschluss an das Absenden des Formulars angezeigt wird. Ideal, um Ziele in Google Analytics über die Seiten-URL zu erfassen. Damit das Weiterleiten auf eure eigene Abschlussseite funktioniert, wählt ihr im Dropdown „Style“ die Option „Redirect“. Zusätzlich könnt ihr euch noch eine E-Mail-Benachrichtigung bei neuen Abschlüssen einrichten. Als letztes funktionierendes Schmankerl ergänzt ihr das Formular mit einem Captcha über gleichnamige Option oben rechts in der Ecke.

Von den zahlreichen weiteren Optionen haben in unserem Test die CSS-Ergänzungen, die Zeilenumbrüche und das Einblenden des rechtlichen Hinweises von Google nicht funktioniert. Korrekterweise solltet ihr eure User also vor dem Absenden noch darauf hinweisen, dass die Formulardaten in einer Tabelle bei Google gespeichert werden.

4. Shortcode in Beitrag oder Seite einfügen

Nach Veröffentlichung des Formulars in WordPress, könnt ihr aus der Übersicht den Shortcode kopieren. Diesen Code fügt ihr an gewünschter Position einfach in eine Seite oder in einen Beitrag ein. Nach dem Abspeichern erscheint dort das Formular:

Frontend4

5. Testen

Ob jetzt alles wie geplant funktioniert, testet ihr am besten selbst. Klappt die Weiterleitung auf eure eigene Abschlussseite? Bei unseren Tests war jeweils für 1 bis 2 Sekunden die Google-Abschlussseite sichtbar, bis wir auf die von uns eingestellte Seite weitergeleitet wurden.

Frontend2

Frontend3

Google forms 2

6. Darstellung anpassen

Feinheiten im Umfrage-Layout nehmt ihr in eurer style.css vor. Den Abstand zwischen den einzelnen Fragen erstellt ihr zum Beispiel mit folgendem Code, den ihr einfach an das Ende eurer style.css anfügt oder in ein Custom-CSS-Plugin kopiert.

.ss-q-title {
 margin-top: 40px;
 }

Fazit: Auch wenn in unserem Test nicht mehr alle Funktionen des Plugins greifen, so ist es dennoch eine gute Möglichkeit, Google-Forms nahtlos in eure WordPress-Seite zu integrieren. Praktisch, denn so bleiben eure User auf eurer Seite und können nach dem Absenden der Form zu einer weiterführenden Seite geleitet werden.

Google-Suche auf der Website integrieren

Embedding a Search Bar in Adobe Muse – Google Custom Search

 

The ability to add a search bar to your website is not currently available in Muse, which means we need to find a clever workaround.  By using third party HTML and embedding it into our site, we can get a basic (but functional!) search feature up and running in Muse very quickly.  Powered by Google “Custom Search” this a really easy way to quickly add this functionality.

To see a google site search bar within Muse in action, check out the following site:

Click here to view a sample search bar

 

Step 1 – Create your search bar

Visit the Google Custom Search homepage at http://www.google.com/cse/ and sign in with your google account. Once logged in, you have the ability to create multiple versions of search bars and embed them on any site.

Click “Add” to start.


Next, enter your website address in the “Sites to Search” bar shown below.  You have a variety of options from searching single pages to complete websites.  We recommend you search the entire website, so just enter your domain as usual.  For our example, we will use the domain www.muse-themes.com. Click create, and let’s start customizing the search bar.

Step 2 – Style the search bar

Once you’ve created the bar, you can customize a variety of options to help it blend seamlessly into your website.  Click the “Look and Feel” tab on the left to access the customization options.

Within “Look and Feel”, let’s set the layout of our search engine.  For the example provided in this post I’ve used the “Full Width” layout, which provides the results across the full width of the site (or frame).  The content placed below the bar in Muse will automatically push down below the results – cool!  This feels non-intrusive, and doesn’t require you to drastically redesign your site to integrate it.

Next, let’s click the “Themes” tab within “Look and Feel” and select a color for our search results.  As you select different theme options, the search bar preview on the right updates as you go.  We will select the minimalist style.

Lastly, you can customize the font, color and border styles of your search bar, as well as the display format of the results.  For the sake of this demonstration, we left the results set to their defaults.  Be sure to click the blue SAVE button after you make any changes.

Step 3 – Embed the search bar

In order to embed the bar in our site, we need the embed code provided by Google.  Click “Save and Get Code” in the blue box shown above. Google will generate embed code for the search bar and display it in the grey box below.

Copy the embed code, jump back into Muse and select Object > Insert HTML


Once the HTML is embedded, Muse will generate a preview of the bar. Scale or size this frame to fill the area you’ve allotted in your design.


When you’re happy with the placement of the bar, publish your site to the web and preview it in action!

Click here to see the finished result!

When we use the search bar, results are displayed directly on the site in within the full column width.  If we decided to use the “Overlay” layout option within the search bar settings instead, you DO NOT need to re-embed the code.  Simply change the settings within your google account, save it, and your Muse site will automatically reflect the changes.

Umzug von Facebook auf Google+ / Facebook-Freunde in Google+ integrieren

In „Kreise“ (Circles) fügen Sie Freunde und Kollegen, die bereits bei Google+ sind, Ihren Kreisen hinzu. Unter „Personen suchen“ macht das Netzwerk Vorschläge, basierend auf Ihrem Google-Mail-Adressbuch und den Kontakten, die Sie bereits hinzugefügt haben.

Es ist sehr hilfreich alle wichtigen Kontakte für Social-Media-Dienste in einem Maildienst zu sammeln. So bietet zum Beispiel Yahoo Mail den Export des Adressbuchs zu Google+ an, auch Hotmail exportiert auf Wunsch. Sollte Ihr hinzugefügter Kontakt noch nicht in Google+ registriert sein, dürfen Sie ihn per Schaltfläche einladen. (mehr …)