Liebe Forummitglieder,
mein Hobby ist die Erstellung von Webseiten. Ich bin 73 Jahre und Autodidakt. Nun habe ich ein ein tolles Formular entdekt auf der Seite https://co.phaseone.com/en/ unter dem Punkt Bid hochladen. Ich finde jedoch nicht die Zusammenhänge um dieses Formular nachzuempfinden. Ich habe zwar eine Aufstellung zu diesem Thema gefunden, jedoch ohne Beispiele (sourcecode). Wer ist so nett kann mir dieses kleine Formular nachbilden mit Quelle und css?
LG
Hans
Du könntest dich mal bei JotForm umsehen (ist als Widget im WD enthalten; die Nutzung ist für geringe Mailaufkommen kostenfrei). Wenn du Kosten nicht scheust, wäre vielleicht auch das Programm "Simfatic" etwas für dich. Dort kann man seine Formulare absolut frei gestalten. Voraussetzung ist ein eigener Mailaccount. Mit der Testversion solltest du gut zurecht kommen. Gruß Marboe
Hallo marboe,
ich suche keinen Formulargenerator, ich möchte das Formular verstehen und nachvollziehen. Hast Du dir das Formular mal angesehen und ausgefüllt, dann verstehst Du was ich meine. Du brauchst es ja nicht abschicken.
LG
Hans
[...] Wer ist so nett kann mir dieses kleine Formular nachbilden mit Quelle und css? [...]
Du bist ja schon groß (73), das kannst Du also ganz alleine...
Sorry, das konnte ich mir jetzt nicht verkneifen, bei der Steilvorlage 😋
Also, ganz ohne Flachserei.
Schau Dir einfach mal den Quellcode der von Dir verlinkten Website an, da findest Du alles was Dein Herz begehrt, obwohl Du vermutlich nur den keineren Teil der referenzierten CSS-, und JS Dateien benötigen wirst:
-------------------------------------------------------
<head>
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6899754/710526/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="https://co.phaseone.com/includes/css/style.css?v=1495281382">
<link rel="stylesheet" type="text/css" href="https://co.phaseone.com/includes/css/swiper.css">
<link rel="stylesheet" type="text/css" href="https://co.phaseone.com/includes/css/lightbox.css">
<link rel="stylesheet" href="https://co.phaseone.com/includes/css/photoswipe.css">
<link rel="stylesheet" href="https://co.phaseone.com/includes/css/default-skin.css">
<link rel="stylesheet" href="https://co.phaseone.com/includes/css/animate.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://co.phaseone.com/includes/js/main.js"></script>
<script src="https://co.phaseone.com/includes/js/swiper.min.js"></script>
<script src="https://co.phaseone.com/includes/js/lightbox.js"></script>
<script rc="https://co.phaseone.com/includes/js/wow.js"></script>
<script src="https://co.phaseone.com/includes/js/photoswipe.min.js"></script>
<script src="https://co.phaseone.com/includes/js/photoswipe-ui-default.min.js"></script>
<script src="https://co.phaseone.com/includes/js/scroll.js"></script>
<script src="https://co.phaseone.com/includes/js/jquery.scrolldepth.min.js"></script>
<script>
$(document).ready(function($) {
window.i = 1;
$(".file_input").click(function(event) {
$(".uploaded_file").trigger("click");
});
$(".uploaded_file").change(function() {
var filename = $('.uploaded_file')[0].files[0].name;
$(".file_name").val(filename);
});
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
function close_overlay() {
$(".overlay").removeClass('open');
$("body").removeClass('hidden');
$('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
}
$(".close_btn").click(function(event) {
close_overlay();
});
$(".terms_opener").click(function(event) {
$("#overlay_terms").addClass('open');
$("body").addClass('hidden');
});
$("body").click(function(e) {
if($("#overlay_terms").hasClass('open')) {
if(e.target.id == "overlay_terms"){
close_overlay();
}
}
});
function success_signup() {
$(".comp_signup .step_1").slideUp('300');
$(".comp_signup .step_2").slideDown('300');
}
$(".down").click(function(e) {
var form_data = new FormData();
form_data.append('job', "new_download");
form_data.append('lang', "de-DE");
$.ajax({
url : "https://co.phaseone.com/jobs.php",
type: "POST", // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data, textStatus, jqXHR) {
if(data == 1) {
success_signup();
}
}
});
});
$(".submit_btn").click(function(e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var file = $(".uploaded_file")[0].files;
var checkbox = $(".checkbox")[0].checked;
var image_file = $('.uploaded_file').prop('files')[0];
$(".error").removeClass('visible');
$(".group").removeClass('mb25');
if(name.length != 0 && email.length != 0 && email.indexOf("@") >= 0 && file.length != 0 && checkbox == true && file[0].size <= 5000000 && file[0].type.indexOf("jpeg") >= 0 && window.i == 1) {
window.i == 2;
var form_data = new FormData();
form_data.append('job', "new_signup");
form_data.append('img', "kfWCnHJCrPTUQFKTXoLPhcrJK0cFvJmQZismZbYr");
form_data.append('name', name);
form_data.append('email', email);
form_data.append('image_file', image_file);
form_data.append('lang', 'de-DE');
$.ajax({
url : "https://co.phaseone.com/jobs.php",
type: "POST", // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data, textStatus, jqXHR) {
if(data == 1) {
success_signup();
}
}
});
} else {
if(name.length <= 0) {
$(".error_name").addClass('visible');
$(".error_name").parent(".group").addClass('mb25');
}
if(email.length <= 0 || email.indexOf("@") <= 0){
$(".error_email").addClass('visible');
$(".error_email").parent(".group").addClass('mb25');
}
if(file.length <= 0 || file[0].size >= 5000000 || file[0].type.indexOf("jpeg") <= 0){
$(".error_file").addClass('visible');
$(".error_file").parent(".group").addClass('mb25');
}
if(checkbox == false ){
$(".error_check").addClass('visible');
$(".error_check").parent(".group").addClass('mb25');
}
}
});
function scroll(e){
// $('html, body').animate({
// scrollTop: $(e).offset().top
// }, 2500);
$(e).animatescroll({scrollSpeed:2000,easing:'easeOutCubic'});
}
$(".upl_image").click(function(e) {
e.preventDefault();
scroll(".comp_signup");
});
$(".upl_image_1").click(function(e) {
e.preventDefault();
$("body").removeClass('header-navigation-toggle_was-active');
$("body").removeClass('header-navigation-toggle_active');
scroll(".comp_signup");
});
$(document).on("click", ".header-navigation-toggle", function(e) {
e.preventDefault();
if($("body").hasClass('header-navigation-toggle_active')) {
$("body").removeClass('header-navigation-toggle_active');
$("body").addClass('header-navigation-toggle_was-active');
$(".language-navigation").removeClass('active');
} else {
$("body").addClass('header-navigation-toggle_active');
$("body").removeClass('header-navigation-toggle_was-active');
$(".language-navigation").removeClass('active');
}
});
$(document).on("click", ".current_language", function(e) {
e.preventDefault();
$("body").addClass('child-navigation_active');
$("body").addClass('language-selector_active');
$(".language-navigation").addClass('active');
});
$(document).on("click", ".child-navigation-back", function(e) {
e.preventDefault();
if($("body").hasClass('child-navigation_active')) {
$("body").removeClass('child-navigation_active');
$("body").removeClass('language-selector_active');
$(".language-navigation").removeClass('active');
}
});
});
</script>
</head>
<body>
<section class="comp_signup clearfix">
<div class="fw step_1">
<div class="gc">
<div class="col6">
<span class="title">Bild hochladen</span>
<form id="signup">
<div class="group">
<input id="name" type="text" required/>
<label for="name">Ihr Name <b>*</b></label>
<span class="error error_name">Dieses Feld ist ein Pflichtfeld</span>
</div>
<div class="group">
<input id="email" type="text" required/>
<label for="email">E-Mail <b>*</b></label>
<span class="error error_email">Bitte geben Sie eine gültige E-Mail-Adresse ein</span>
</div>
<div class="group">
<input id="filename" class="file_name" name="file" type="text" tabindex="-1" required >
<label for="file" class="file_label">Bild hochladen <span>(JPG, max. 5 MB)</span> <b>*</b></label>
<a class="file_input">Wähle Datei</a>
<span class="error error_file">Bitte laden Sie ein gültiges Bild hoch (JPG, max. 5MB)</span>
</div>
<input type="file" class="uploaded_file" style="display: none">
<div class="checkbox_holder">
<label class="label--checkbox"><input type="checkbox" class="checkbox"></label> <span class="terms_label"><a class="terms_opener">Ich akzeptiere die Allgemeinen Geschäftsbedingungen</a></span>
<span class="error error_check">Dieses Feld ist ein Pflichtfeld</span>
</div>
<a class="button centered submit_btn" href="">BILD EINSENDEN</a>
</form>
</div>
<div class="col6">
<div class="comp_rules">
<span class="rules_title">Die Wettbewerbsregeln</span>
<span class="rules_subtitle">Gültige Einsendungen müssen folgende Kriterien erfüllen:</span>
<div class="list_holder">
<span class="list_item">Originale RAW-Datei von Marie Bärsch verwenden</span>
<!-- <span class="list_item">Laden Sie Ihre mit Capture One Pro 10 bearbeiteten Bilder hoch</span> -->
<span class="list_item">Sie können 1 Bild pro Tag einsenden</span>
<span class="list_item">Dateiformat: JPG</span>
<span class="list_item">Max. Dateigröße: 5 MB</span>
<span class="list_item">Einsendeschluss: 23. Mai, 23:59 Uhr MEZ</span>
</div>
</div>
</div>
</div>
</div>
<div class="fw step_2" style="display: none;">
<div class="gc">
<div class="col12">
<span class="icon_container"><i class="fa fa-check" aria-hidden="true"></i></span>
<span class="title">Vielen Dank für Ihre Einsendung!</span>
<span class="subtitle">Ihr Bild wird geprüft.</span>
<p class="desc">Wir wählen täglich die „Bearbeitung des Tages“ und zeigen sie auf dieser Webseite. Sie erhalten eine E-Mail, wenn Ihr Bild ausgewählt wird. Sie können täglich einen neuen Eintrag einsenden.</p>
<p class="desc mb0">Wir kontaktieren den Gewinner per E-Mail und zeigen hier die besten Bearbeitungen.</p>
<p class="desc mb0">Der Wettbewerb endet am 23. Mai, 23:59 Uhr MEZ.</p>
<p class="desc">Viel Spaß beim Bearbeiten!</p>
</div>
</div>
</div>
</section>
</body>
-------------------------------------------------------
Wenn Du den o. a. Code in einem Platzhalter unterbringst (Head und Body trennen), dann hast Du ein funktionsfähiges Formular zum Bilder Upload. Natürlich solltest Du vorher dafür sorgen, dass die verlinkten CSS Dateien auf Deinem eigenen Server "geparkt" werden und die Referenzierung in den SRC Angaben entsprechend geändert wird.
Bevor Du den Code für Deine Site verwendest wäre es sicher nicht falsch, vorher den Urheber des Formulars zu fragen, vermutlich wird er es Dir erlauben...
Fragen kostet ja nichts...
Wie Du unschwer erkennen kannst, ist das "kleine Formular" noch mit einer Vielzahl von JS Funktionen- und CSS Steuerungsdateien verbunden, die dafür sorgen, dass das Formular korrekt formatiert wird, alle Daten erfasst-, die Bilder geprüft und richtig abgelegt werden, etc.
Last but not least musst Du unbedingt dafür sorgen, dass auf Deinem Webserver die Zugriffsrechte für den Bilder Upload richtig gesetzt werden und die dadurch möglichen Hackerangriffe abgefangen werden!
Du siehst, dass das "kleine Formular" eine Menge Arbeit machen kann...
Noch Fragen? 😇