Hey ho,

es gab mal eine Seite mit Tutorials, aber die ist leider offline. Da gab es ein Kontaktformular z.B. am linken Rand, mit einem kleinen Bild´l und wenn man drauf geklickt hat, hatte man das Kontaktformular. Hat jemand evtl einen Codeschnipsel dafür oder link? Weil Tante Google spuckt mir nix aus.

Grüße

funktioniert ziemlich einfach mit dem jQuery-Befehl .toggle()

Jetzt bin ich noch genau so schlau wie vorher....

ein bisschen googlen und Eigeninitiative ist dann auch bei Jimdo noch nötig.
Du hast eine theoretische Frage gestellt, ich hab dir das passende Stichwort gegeben.

Wenn du uns mal deine URL gibst, und uns sagst, um welches Bild und welches Kontaktformular es sich handelt, können wir dir konkret helfen.
Auf www.jordan-brennholz.de/produkte#stammholz habe ich das von dir gewollte Verhalten über die .toggle()-Funktion eingebaut.

Wenn ich wüsste wie ich hier die Funktion von JS einbinde, wäre es ja gut. Das ist nämlich rausgekommen wenn ich Google nutze, was jetzt schon seit 2 Std der Fall ist. Problem ist nur, dass halt ich nicht weiß wo der JS Code hinkommt, und halt das Kontaktteil beim runterscrollen von der Seite verdeckt wird und zu weit unten ist. Hier mal der Link >>>>>>soderle

Um ehrlich zu sein, glaube ich nicht, dass es mit dem einbinden vom JS getan ist. Dieses wird übrigens in den Headbereich der Seite geschrieben. Einstellungen -> Head Bearbeiten...
Es ist auch nötig den CSS- und HMTL-Teil einzubinden. Hast du den HTML-Teil schon auf deiner Seite anlegt?

Wie ist denn die URL von DEINER Seite wo das alles hinsoll?

Also die Codes hab ich entsprechend im Header und im Widget eingebunden. Ausser halt den java Effekt da weiß ich nicht wohin der kommt.
hier gehts zur hp angezeigt soll es auf jeder Seite links dann.

<script src=https://github.com/gdsmith/jquery.easing/blob/master/jquery.easing.js  type="text/javascript"></script>
 
<script type="text/javascript">
 
//<![CDATA[
 
var easeOutBounce = function (x, t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
}
 
function Animate(elem, propName, duration, start, end)  {
    var start_time = new Date().getTime();
    var interval = setInterval(function() {
      var current_time = new Date().getTime(),
        remaining = Math.max(0, start_time + duration - current_time),
        temp = remaining / duration || 0,
        percent = 1 - temp;
 
      if (start_time + duration < current_time) clearInterval(interval);
 
      var pos = easeOutBounce(null, duration * percent, 0, 1, duration),
        current = (end - start) * pos + start;
 
      elem.style[propName] = current + 'px';
    }, 1);
  }
 
var elem = document.getElementById('contactform');
var opened = false; 
 
document.getElementById('contact-button').onclick = function() {
  if (opened) {
    Animate(elem, 'left', 800, 0, -405);    
    opened = false;
  } else {
    Animate(elem, 'left', 800, -405, 0);
    opened = true;  
  }  
}
   
//]]>
</script>
 

Das hier sollte auch so zusätzlich in den Head.

hm ja toll danke 😂 mit Script wird das angefangen nee Ich pack es nicht. Also ich kam halt auf den Befehl nicht. Aber trotzdem vielen Dank. Und wie mache ich es, dass das auf jeder Seite sichtbar ist und nicht überscrollt wird vom unteren content? Bzw könnte noch höher. Habe mal mit den Werten gespielt im Header aber nicht den richtigen gefunden. Wird immer wieder überdeckt und bekomm es nicht höher

nach oben bekommst, indem das margin-top auf "-" setzt.
Um das auf allen Seiten anzuzeigen, musst du das in die sidebar verschieben.

Klasse teste ich morgen dann. Aber leuchtet nun langsam ein wenn man einen Denkanstoß bekommt. Also Widget in der Sidebar erstellen🤔

genau. In der sidebar. Dann musst mit den margin und padding Werten spielen.

Danke TiJo,

soweit alles super geklappt, aber das Teil klappt nicht auf

 

<style>
/* <![CDATA[ */
.jtpl-content  {
max-width: 1600px;
}
/*]]>*/
</style>
 

<style>
/* <![CDATA[ */
#contactform {  
  width: 400px;
  left: -405px;
  height: 500px;
  margin: 25px 0;
  position: fixed;
  box-shadow: 0 0 12px 0 #333;  
}
 
#contact-button { 
  width: 5%;  
  padding: 7% 3%;  
  cursor: pointer;
  margin-left: 400px;
  margin-top: -600px;
  font-size: 23px; 
  color: white;  
  position: absolute;
}
 
#contactform, #contact-button {
  background-color: #1D1F20;
  border-radius: 0 15px 15px 0; 
  border: 5px solid #666666; 
  border-left: none;
}
 
.rotated-text {
    display: inline-block;
    white-space: nowrap;
    /* this is for shity "non IE" browsers
       that dosn't support writing-mode */
    -webkit-transform: translate(1.1em,0) rotate(90deg);
       -moz-transform: translate(1.1em,0) rotate(90deg);
         -o-transform: translate(1.1em,0) rotate(90deg);
            transform: translate(1.1em,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;*/
   /* IE9+ */
   -ms-transform: none;
   -ms-transform-origin: none;
   /* IE8+ */
   -ms-writing-mode: tb-rl;
   /* IE7 and below */
   *writing-mode: tb-rl;
}
 
.rotated-text:before {
    content: "";
    float: left;
    margin-top: 100%;
}
 
form {
  width: 100%;
  padding: 20px;
}
 
form input {
  display: block;
  border: none;
  width: 300px;
  height: 35px; 
  margin: 15px 30px;  
}
 
form textarea {
  width: 300px;
  margin: 40px 30px;
  height: 170px;
}
 
form textarea, form input { 
  border: 3px solid #666666;
  border-radius: 5px;
  background: #f2f2f2;  
}
/*]]>*/
</style>
 

<script src="https://github.com/gdsmith/jquery.easing/blob/master/jquery.easing.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
//<![CDATA[
 var easeOutBounce = function (x, t, b, c, d) {
                if ((t/=d) < (1/2.75)) {
                        return c*(7.5625*t*t) + b;
                } else if (t < (2/2.75)) {
                        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
                } else if (t < (2.5/2.75)) {
                        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
                } else {
                        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
                }
}
 
function Animate(elem, propName, duration, start, end)  {
    var start_time = new Date().getTime();
    var interval = setInterval(function() {
      var current_time = new Date().getTime(),
        remaining = Math.max(0, start_time + duration - current_time),
        temp = remaining / duration || 0,
        percent = 1 - temp;
 
      if (start_time + duration < current_time) clearInterval(interval);
 
      var pos = easeOutBounce(null, duration * percent, 0, 1, duration),
        current = (end - start) * pos + start;
 
      elem.style[propName] = current + 'px';
    }, 1);
  }
 
var elem = document.getElementById('contactform');
var opened = false; 
 
document.getElementById('contact-button').onclick = function() {
  if (opened) {
    Animate(elem, 'left', 800, 0, -405);    
    opened = false;
  } else {
    Animate(elem, 'left', 800, -405, 0);
    opened = true;  
  }  
}
 

   
//]]>
</script>
 
 

Okay habe es in die Sidebar eingefügt, aber wird auch nicht auf allen Seiten angezeigt. Bzw mal ist es weiter oben, mal ganz unten dann gar nicht da... Sehr merlwürdig alles

Es scheint wohl ein Problem mit dem Laden der Datei zu geben. Ich konnte den Fehler allerdings nicht ausmachen.

Du hast also drei Möglichkeiten:
1. selber herumprobieren
2. auf jemand warte der dir evtl. doch helfen kann
3. dir ein anderen Formular zu suchen

Ich würde zu Variante 3 tendieren, da bei dem jetzigen kein funktionierendes Formular dahinter steckt. Es gibt noch nicht mal einen "Absenden"-Button.

Alles klar ich tendiere auch zu 3. weil ja nix geht. Wie gesagt es gab mal eine tolle Seite mit Scripts da war alles bei, aber halt gelöscht. Aber danke ich werd mal ein neues Formular suchen 😬

So ich habe da mein ein schickes Formular gefunden. Ist zwar nur ein Feedback, aber erfüllt ja dennoch seinen Zweck. Aber 1. äähhmmm fehlt da nicht noch, wo man die Daten vom Mailserver etc eingibt? und 2. kann man da noch einen Spamschutz einbauen? klick :)

LG die dani :)

zwei Sachen:

Ich befürchte, dass der Code auf einem php-Script aufbaut. Jimdo erlaubt aber keine eigenen PHP-Files, sofern ich das richtig weiß.
Du kannst aber den Code umbauen, und den Formmailer von https://www.onlex.de/index.php?pid=info_formmailer verwenden. Ist sehr simple zu implementieren und der Account ist kostenlos.

ich habe mal kurzerhand aus deinem Beispiel und den Standard-Jimdo-Elementen sowas gebaut.
zu sehen hier: https://www.jordan-brennholz.de/contact/ . Die Anleitung dazu kann ich, bei Bedarf, in den laufenden Tagen schicken.

Wow Hut ab das ist ja mal mega geil. Ja so hatte ich mir das auch vorgestellt. Aber wie ist es da mit Auslesen von der Mailadresse? Weil ich hatte den Tag mal was gelesen bezüglich Spambots die was mit "mail to" auslesen können. Weil habe seit Anfang an Probleme mit Spammails ( so 60 pro Tag mindestens ) Wo ich vor ein paar Tagen nur 2 Seiten auf meiner HP sichbar hatte, war fast eine Woche lang Ruhe. Jetzt geht es wieder los. Es steht aber auch nirgends auf der Seite die komplette Mailadresse, sondern ist mit (at) und (dot) geschrieben. Weiß ja nicht, ob die dinger da die ReCaptcha "auslesen" können. Aber hätte trotzdem gern das Script :)

LG

Danke.
Das mit den Mailbots kann ich dir nicht sagen. Aber ich bekomme auch relativ viel Spam durch meine Seite. Allerdings aufs die richtige eMailadresse und nicht durch irgendwelche Formulare.

Zum Code: Ich verwende hier das Jimdo-Eigene Formular mit CSS Anpassungen, auch das Captcha ist von Jimdo. Das ist nicht nur ein "Copy&Paste-Script, sondern das muss jeweils vom Benutzer angepasst. Momentan habe ich aber keine Zeit dafür eine Anleitung zu schreiben. Es sind auch noch ein paar Dinge drin, die mir bei der mobilen Version nicht gefallen.
Ich hoffe, dass ich es am Wochenende soweit habe und eine Anleitung schreiben kann.

Ja auf die richtige Mailadresse bekomm ich den ganzen Mist auch. Ausser, wie gesagt wo nur 2 Seiten von der ganzen HP online waren war Ruhe.
Ja nur keine Eile :) Ging bis jetzt auch ohne :)

Aber find es toll, wenn man halt so Kontakt seitlich halt hat, als in der Navleiste noch. Ein Kumpel von mir wollte ja mal drüber schauen der kann CSS etc, aber traut sich nicht an Jimdo ran. Obwohl Jimdo ja offen ist für fast alles. Aber eine Anleitung wäre supi, da mach ich erstmal bis dahin andere "Baustellen"

Achja passt jetzt nicht zu dem Thema, aber hast Du oder evtl wer anders eine Seite wo viele CSS Sachen zusammen gefasst sind? Also schön übersichtlich? Weil ich habe z-B bei mir den Content verbreitert, jetzt soll auf die ganze Seitenbreite eine farbige Box oder rechteck, wo man Text reinschreiben kann und Bilder. Dacht evtl an Spalten, aber die bekommt man ja nicht als kompletten Streifen?

Zitat

---

style="background-color: #0389d1; border: #dddddd 1px solid; padding: 8px; border-radius: 6px 6px 6px 6px;"
...kann man bei einem Bild nirgens einfügen, denn für Bilder gibt es keinen html-Editor.

Also setzt Du unter "Einstellungen > Head bearbeiten" folgenden Code ein:


<style>
.ownbg {
background-color: #0389d1;
border: #dddddd 1px solid; padding: 8px;
border-radius: 6px 6px 6px 6px;
}
</style>


Damit hast Du Dir eine sog. "CSS-Klasse" erstellt. Diese kannst Du so wie sie ist in Textfeldern benutzen: Du schreibst jetzt im Textfeld html

<div class="ownbg"> vor den html-Code.

Willst Du ein Bild mit dem Rahmen versehen, ergänzt Du einfach das CSS-Skript mit der ID oder der Klasse des Bildes und einem "img" für "Bild" z.B.:


<style>
.ownbg,
#cc-m-5976376564 img {
border: #dddddd 1px solid;
padding: 8px;
border-radius: 6px;
}
</style>


...das "#cc-m-5976376564" ist die ID des Containers, in dem sich das Bild befindet.
"#cc-m-5976376564 img" bedeutet also: "gilt für alle Bilder (img) im Container #cc-m-5976376564"

ich hoffe, ich habe das gut genug erklärt. Wenn nicht, schreib noch mal :)

LG, az

---

Gut hier wäre was, was ich momentan Versuche.
Scheint auch zu klappen, aber da brauch ich sicher das ganze Befehlskram wie links, mittig, rechts, Schriftgröße, Stil etc.

leider schaff ich es nicht meine Variante responsive zu machen. Bei schmalen Bildschirmen rutscht der "Feedback" nach unten.
Vielleicht weißt ja jemand wie man das lösen könnte.

Im Gesamten schaut das so aus:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
 
<script src="//code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript">
//<![CDATA[
$(function() {
    
$( "#m5039faf4225127640" ).attr( "placeholder", "E-Mail Adresse" );
$( "#m5039faf4225127641" ).attr( "placeholder", "Feedback eingeben" );
 

 
      $("#feedback-tab").appendTo( $( "#cc-m-10212886871" ) );
      
      
    
    
        $("#feedback-tab").click(function() {
                $("#cc-m-form-10212886871").toggle("slide");
        });
 
        $("#cc-m-form-10212886871 form").on('submit', function(event) {
                var $form = $(this);
                $.ajax({
                        type: $form.attr('method'),
                        url: $form.attr('action'),
                        data: $form.serialize(),
                        success: function() {
                                $("#cc-m-form-10212886871").toggle("slide").find("textarea").val('');
                        }
                });
                event.preventDefault();
        });
});
//]]>
</script>
 
<style type="text/css">
/*<![CDATA[*/
 
#cc-m-10212886871 {
        position: fixed;
        left: 0;
        margin-top:-300px;
        height: 490;
        margin-left: -3px;
       }
       
#cc-m-form-10212886871 {
        float: left;
        width:240px;
        height: 100%;
        z-index: 1000;
        padding-left: 5px;
        padding-right: 10px;
        background-color: rgba(255,255,255,1);
        border: 1px solid rgba(0,0,0,.2);
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
        -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        display:none;
        
}
 
#feedback-tab {
      
        float: right;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        text-align: center;
        width: 120px;
        height: 42px;
        background-color: rgba(0,0,0,0.5);
        margin-top: 60px;
        margin-left: -42px;
        padding-top: 5px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
}
 
#feedback-tab:hover {
        background-color: rgba(0,0,0,0.4);
}
 
#cc-m-form-10212886871 textarea {
    
        resize: true;
}
 
.cc-m-form-note{
    display: none;
}
 
#cc-m-form-10212886871 label {
    display: none;
}
/*]]>*/
</style>
 

 

Bin blutiger Anfänger.
Wo und wie habt Ihr den Code auf Jimdo eingebaut?