Klare Felder in Contact Form 7 (WordPress)

Bin ich mit Contact Form 7 auf meiner WordPress-Seite. Leider ist das plugin nicht haben "klare Felder klicken Sie auf" built-in als Standard saugt die für die usability.

Ich habe ein Design erstellt-Funktion, um diese Arbeit und bin fast da, müssen aber noch jemand besser mit jQuery-Fähigkeiten, um alles wie erwartet funktioniert. Hier ist mein code:

//Clear Formfields
function clearfield() {
?>
<script type="text/javascript">
    jQuery(document).ready(function($) {
         $(".clearfields").click(function () {
            var text = $(this).text();
                $(".clearfields").val("");
            });                             
    });
</script>
<?php
}
add_action( 'wp_footer', 'clearfield', 100 );

Kann ich nicht manipulieren der input-Felder verändern, ohne das plugin, aber ich kann Klassen hinzufügen. Derzeit habe ich:

<input class="clearfields" type="text" value="enter name etc">

Aktuell wird klar, dass jedes Feld mit der Klasse .clearfields das ist gut, aber ich will nur klar nur der Bereich den der Benutzer geklickt hat. Im moment löscht er alles (name, E-Mail, Firma usw.), da alle Felder der Klasse angewendet.

Sekunde, um diese mit meinem aktuellen setup auch wenn das Formular angezeigt wird, senden Sie nach dem Klick auf den submit-button die E-Mail nicht ankommen, so etwas wird mit meinem code.

Kann jemand helfen?

InformationsquelleAutor photoman355 | 2012-09-20

3

- Kontakt-Formular 7 hat eine klare Wert... benutze einfach: Wasserzeichen
```
[text* txtName watermark   "Name: "]
```
Sie sollten re-Namen zu löschen, sehr verwirrend. Vielen Dank Locke.
ja u hast Recht. Wenn meine Lösung u helfen , geben, Punkt ;P

InformationsquelleAutor Locke
1

auf die neueste version von cf7 für wordpress, können Sie das add-in die reset/clear-Schaltfläche Felder durch das hinzufügen dieser code:
```
<input type="reset" class='btn btn-primary' />
```
standardmäßig der reset-Knopf wird nicht Erben, jeder Stil, so dass es dann genauso angezeigt wie normale unstyled-Taste. Sie können immer noch gelten, css-styling, wie oben gezeigt.

hier ist das Beispiel-Formular-code für die Anzeige der Schaltfläche "submit" und "reset" - Taste neben einander mit gleichen Stile.
```
[submit class:btn class:btn-primary]<input type="reset" class='btn btn-primary' />
```
live-Vorschau hier: http://www.ewallzsolutions.com/free-quote/

InformationsquelleAutor eWallz Hafiz
1

Ich konfrontiert war ebenso gleiche Problem, so kann ich nur lösen, indem erstellt versteckt - Eingang reset-Taste und Auslösung mit jquery

Html
```
<input type="reset" id="reset" class="sr-only">
```
Jquery
```
$("#reset").trigger('click'); 
```
InformationsquelleAutor Ismail Farooq

hier ist ein funktionierendes Beispiel: http://jsfiddle.net/cyVyZ/

HTML-Code:

<input type="text" id="field1" class="clearfields" value="field 1" />
<input type="text" id="field2" class="clearfields" value="field 2" />
<input type="text" id="field3" class="clearfields" value="field 1" />

jQuery-code:

(function($) {
  $('.clearfields').bind('focus', function() {
    $(this).val('');
  });
})(jQuery);

Vielen Dank Marian

InformationsquelleAutor Marian Zburlea

Können Sie klar auf den Fokus default-Wert und Unschärfe zurück, dass Wert.

Beispiel ist hier: jsfiddle

jQuery-code:

$.fn.defaultValue = function(){              
         return this.each(function(){ 
            var default_value = $(this).val(); 
            var $this = $(this);        

            $this.focus( function() {    
                if ($this.val() == default_value) $(this).val("");
                });
            $this.blur( function() {
                if ($this.val().length == 0){
                    $this.val(default_value); 
                }
            })            
         }); 
         };

InformationsquelleAutor uhura

0

Hier ist eine perfekte Antwort, wie klar textbox-Werte auf klicken Sie in contactform7 .Schauen
http://www.bloggerseed.com/2011/07/clear-text-box-click-contactform-7/

InformationsquelleAutor user1688201

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.