hoe zet ik er een andere style op ??

Door Roy Rijpma op 15-09-2012 23:08 gewijzigd op 15-09-2012 23:12

2.235 views

goede dag

ik heb een vraag

ik ben be zich met een anderen website.

ik moet er wat aan aan passen. ook het contact form heb ik veranderd die zag er kwa code zo uit werkend te vinden op http://stichtingmetzorgvoorlater.nl/test/hu.html dit is niet het domein waar de site zelf op staat

<head>
<title>site</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/easyTooltip.js" type="text/javascript"></script>
<script src="js/superfish.js" type="text/javascript"></script>
<script src="js/contact-form.js" type="text/javascript"></script>


</head>

<div id="contact_form">
<form id="contact-form" method="post" class="main-contacts" action="">
<fieldset>
<input type="hidden" name="owner_email" id="owner_email" value="Email@ontvanger" />
<input type="hidden" name="serverProcessorType" id="serverProcessorType" value="php" />
<input type="hidden" name="smtpMailServer" id="smtpMailServer" value="localhost" />
<input type="hidden" name="stripHTML" id="stripHTML" value="true" />
<div class="rowElem2">
<input type="text" name="name" id="name" value="Name:" onblur="if(this.value=='') this.value='Name:'" onFocus="if(this.value =='Name:' ) this.value=''" >
<label class="error" for="name" id="name_error">*This field is required.</label>
<label class="error" for="name" id="name_error2">*This is not a valid name.</label>
</div>
<div class="rowElem2">
<input type="text" name="email" id="email" value="E-mail:" onblur="if(this.value=='') this.value='E-mail:'" onFocus="if(this.value =='E-mail:' ) this.value=''">
<label class="error" for="email" id="email_error">*This field is required.</label>
<label class="error" for="email" id="email_error2">*This is not a valid email address.</label>
</div>
<div class="rowElem2">
<input type="text" name="phone" id="phone" value="Phone:" onblur="if(this.value=='') this.value='Phone:'" onFocus="if(this.value =='Phone:' ) this.value=''" >
<label class="error" for="phone" id="phone_error">*This field is required.</label>
<label class="error" for="phone" id="phone_error2">*This is not a valid phone number.</label>
</div>
<div class="textarea-box">
<textarea cols="1" rows="1" name="message" id="message" onBlur="if(this.value=='') this.value='Message:'" onFocus="if(this.value =='Message:' ) this.value=''" >Message:</textarea>
<label class="error" for="message" id="message_error">*This field is required.</label>
<label class="error" for="message" id="message_error2">*The message is too short.</label>
</div>
<div class="buttons">
<a href="#" id="clear" class="button-3" >Clear</a>
<a href="#" id="submit" class="button-3" >Submit</a>
</div>
</fieldset>
</form>

de op maak draait in java

die ziet er zo uit

jQuery(function(){
jQuery('.error').hide();

// reset form and hide all errors
jQuery("a#clear").click(function(){
jQuery('.error').hide();
jQuery('form#contact-form').clearForm();
});

// show message error if after editing
// the name field contains improper value
jQuery("input#name").blur(function(){
if(validateInput('name')){
if(!validateName()){
jQuery("label#name_error").hide();
jQuery("label#name_error2").show();
}
}else{
jQuery("label#name_error2").hide();
}
});

// show message error if after editing
// the email field contains improper value
jQuery("input#email").blur(function(){
if(validateInput('email')){
if(!validateEmail()){
jQuery("label#email_error").hide();
jQuery("label#email_error2").show();
}
}else{
jQuery("label#email_error2").hide();
}
});

// show message error if after editing
// the phone field contains improper value
jQuery("input#phone").blur(function(){
if(validateInput('phone')){
if(!validatePhone()){
jQuery("label#phone_error").hide();
jQuery("label#phone_error2").show();
}
}else{
jQuery("label#phone_error2").hide();
}
});

// show message error if after editing
// the message field contains improper value
jQuery("textarea#message").blur(function(){
if(validateTextArea('message')){
if(!validateMessage()){
jQuery("label#message_error").hide();
jQuery("label#message_error2").show();
}
}else{
jQuery("label#message_error2").hide();
}
});

jQuery("input#name").keydown(function(){
if(validateInput('name')){
jQuery("label#name_error").hide();
}
if(validateName()){
jQuery("label#name_error2").hide();
}
});

jQuery("input#email").keydown(function(){
if(validateInput('email')){
jQuery("label#email_error").hide();
}
if(validateEmail()){
jQuery("label#email_error2").hide();
}
});

jQuery("input#phone").keydown(function(){
if(validateInput('phone')){
jQuery("label#phone_error").hide();
}
if(validatePhone()){
jQuery("label#phone_error2").hide();
}
});

jQuery("textarea#message").keydown(function(){
if(validateTextArea('message')){
jQuery("label#message_error").hide();
}
if(validateMessage()){
jQuery("label#message_error2").hide();
}
});

var owner_email = jQuery("input#owner_email").val();
if(!isValidEmailAddress(owner_email)){
jQuery('#contact_form').html("<label class='error'>*Owner email is not valid</label>")
}

jQuery("a#submit").click(function(){
// validate and process form
var quit = false;
if(validateName()){
name = validateName();
jQuery("label#name_error").hide();
jQuery("label#name_error2").hide();
}else if(validateInput('name')){
jQuery("label#name_error").hide();
jQuery("label#name_error2").show();
quit = true;
}else{
jQuery("label#name_error").show();
jQuery("label#name_error2").hide();
quit = true;
}
if(validateEmail()){
email = validateEmail();
jQuery("label#email_error").hide();
jQuery("label#email_error2").hide();
}else if(validateInput('email')){
jQuery("label#email_error").hide();
jQuery("label#email_error2").show();
quit = true;
}else{
jQuery("label#email_error").show();
jQuery("label#email_error2").hide();
quit = true;
}
if(validatePhone()){
phone = validatePhone();
jQuery("label#phone_error").hide();
jQuery("label#phone_error2").hide();
}else if(validateInput('phone')){
jQuery("label#phone_error").hide();
jQuery("label#phone_error2").show();
quit = true;
}else{
jQuery("label#phone_error").show();
jQuery("label#phone_error2").hide();
quit = true;
}
if(validateMessage()){
message = validateMessage();
jQuery("label#message_error").hide();
jQuery("label#message_error2").hide();
}else if(validateTextArea('message')){
jQuery("label#message_error").hide();
jQuery("label#message_error2").show();
quit = true;
}else{
jQuery("label#message_error").show();
jQuery("label#message_error2").hide();
quit = true;
}
if(!quit){
var stripHTML = jQuery("input#stripHTML").val();
var smtpMailServer = jQuery("input#smtpMailServer").val();

var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&message=' + message + '&owner_email=' + owner_email + '&stripHTML=' + stripHTML + '&smtpMailServer=' + smtpMailServer;

var serverProcessorType = jQuery("input#serverProcessorType").val();
if(serverProcessorType == 'asp'){
fileExtension = 'ashx';
}else{
fileExtension = serverProcessorType;
}
var mailHandlerURL = "bin/MailHandler." + fileExtension;
jQuery.ajax({
type: "POST",
url: mailHandlerURL,
data: dataString,
success: function(){
jQuery('.error').hide();
jQuery('form#contact-form').clearForm();
jQuery('#contact_form').html("<div class='download-box'>Contact form submitted!</div>")
.append("<br><label for='message'><b>We will be in touch soon.</b></label>")
.hide()
.fadeIn(500, function(){
jQuery('#contact_form').append("<br><br><a id='back' onclick='window.location.reload(); return false;' class='button-3'>back</a>");
});
}
});
}

return false;
});
});
jQuery.fn.clearForm = function(){
return this.each(function(){
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form'){
return jQuery(':input',this).clearForm();
}
if (type == 'text' || type == 'password' || tag == 'textarea'){
this.value = '';
}else if (type == 'checkbox' || type == 'radio'){
this.checked = false;
}else if (tag == 'select'){
this.selectedIndex = -1;
}
});
};
function isValidName(name){
var pattern = new RegExp(/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/);

return pattern.test(name);
}
function isValidEmailAddress(emailAddress){
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

return pattern.test(emailAddress);
}

function isValidPhoneNumber(phoneNumber){
var pattern = new RegExp(/^\+?(\d[\d\-\+ ]{5,}\d$)/);

return pattern.test(phoneNumber);
}

function validateName(){
var name = jQuery("input#name").val();
if(isValidName(name)){
return name;
}else{
return false;
}
}

function validateEmail(){
var email = jQuery("input#email").val();
if(!isValidEmailAddress(email)){
return false;
}else{
return email;
}
}

function validatePhone(){
var phone = jQuery("input#phone").val();
if(!isValidPhoneNumber(phone)){
return false;
}else{
return phone;
}
}

function validateMessage(){
var message = jQuery("textarea#message").val();
if(message.length < 10){
return false;
}else{
return message;
}
}

// make sure visitor does not input a blank field
function validateInput(field){
var fieldObject = jQuery("input#" + field + "").val();
if(fieldObject.length < 1){
return false;
}else{
return true;
}
}

function validateTextArea(field){
var fieldObject = jQuery("textarea#" + field + "").val();
if(fieldObject.length < 1){
return false;
}else{
return true;
}
}

ik kreeg al te horen dat het contact form het niet deed ??? ik had zo iets van okéé

ik heb het script er in gegooit wat wel werk maar vind het qua op maak minder mooi

<?php
session_start(); // zorg ervoor dat session_start ALTIJD bovenaan ALLES van je pagina staat, anders werkt het niet!

/*******************************
* CONTACT FORMULIER *
* contactformulier.php *
* *
* Author: Miranda Verburg *
* Datum: 10 september 2010 *
* *
* Pas het e-mail adres aan *
* bij $mail_ontv en upload *
* het naar je webserver.. *
********************************/

// E-mailadres van de ontvanger
$mail_ontv = '[email protected]'; // <<<----- voer jouw e-mailadres hier in!

// Speciale checks voor naam en e-mailadres
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
// naam controle
if (empty($_POST['naam']))
$naam_fout = 1;
// e-mail controle
if (function_exists('filter_var') && !filter_var($_POST['mail'], FILTER_VALIDATE_EMAIL))
$email_fout = 1;
// antiflood controle
if (!empty($_SESSION['antiflood']))
{
$seconde = 20; // 20 seconden voordat dezelfde persoon nog een keer een e-mail mag versturen
$tijd = time() - $_SESSION['antiflood'];
if($tijd < $seconde)
$antiflood = 1;
}
}

// Kijk of alle velden zijn ingevuld - naam mag alleen uit letters bestaan en het e-mailadres moet juist zijn
if (($_SERVER['REQUEST_METHOD'] == 'POST' && (!empty($antiflood) || empty($_POST['naam']) || !empty($naam_fout) || empty($_POST['mail']) || !empty($email_fout) || empty($_POST['bericht']) || empty($_POST['onderwerp']))) || $_SERVER['REQUEST_METHOD'] == 'GET')
{
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (!empty($naam_fout))
echo '<p>Uw naam is niet ingevuld.</p>';
elseif (!empty($email_fout))
echo '<p>Uw e-mailadres is niet juist.</p>';
elseif (!empty($antiflood))
echo '<p>U mag slechts één bericht per ' . $seconde . ' seconde versturen.</p>';
else
echo '<p>U bent uw naam, e-mailadres, onderwerp of bericht vergeten in te vullen.</p>';
}

// HTML e-mail formlier
echo '<form method="post" action="' . $_SERVER['REQUEST_URI'] . '" />
<p>

<label for="naam">Naam:</label><br />
<input type="text" id="naam" name="naam" value="' . (isset($_POST['naam']) ? htmlspecialchars($_POST['naam']) : '') . '" /><br />

<label for="last">achternaam:</label><br />
<input type="text" id="last" name="last" value="' . (isset($_POST['last']) ? htmlspecialchars($_POST['last']) : '') . '" /><br />

<label for="mail">E-mailadres:</label><br />
<input type="text" id="mail" name="mail" value="' . (isset($_POST['mail']) ? htmlspecialchars($_POST['mail']) : '') . '" /><br />

<label for="onderwerp">Onderwerp:</label><br />
<input type="text" id="onderwerp" name="onderwerp" value="' . (isset($_POST['onderwerp']) ? htmlspecialchars($_POST['onderwerp']) : '') . '" /><br />

<label for="bericht">Bericht:</label><br />
<textarea id="bericht" name="bericht" rows="8" style="width: 400px;">' . (isset($_POST['bericht']) ? htmlspecialchars($_POST['bericht']) : '') . '</textarea><br />

<input type="submit" name="submit" value=" Versturen " />
</p>
</form>';
}
// versturen naar
else
{
// set datum
$datum = date('d/m/Y H:i:s');
$inhoud_mail .= "===================================================\n";
$inhoud_mail .= "Ingevulde contact formulier " . $_SERVER['HTTP_HOST'] . "\n";
$inhoud_mail .= "===================================================\n\n";

$inhoud_mail .= "Naam: " . htmlspecialchars($_POST['naam']) . "\n";
$inhoud_mail .= "Achternaam: " . htmlspecialchars($_POST['last']) . "\n";
$inhoud_mail .= "E-mail adres: " . htmlspecialchars($_POST['mail']) . "\n";
$inhoud_mail .= "onderwerp: " . htmlspecialchars($_POST['onderwerp']) . "\n";
$inhoud_mail .= "Bericht:\n";
$inhoud_mail .= htmlspecialchars($_POST['bericht']) . "\n\n";

$inhoud_mail .= "Verstuurd op " . $datum . " via het IP adres " . $_SERVER['REMOTE_ADDR'] . "\n\n";

$inhoud_mail .= "===================================================\n\n";

// --------------------
// spambot protectie
// ------
// van de tutorial: http://www.phphulp.nl/php/tutorial/beveiliging/spam-vrije-contact-formulieren/340/
// ------

$headers = 'From: ' . htmlspecialchars($_POST['naam']). htmlspecialchars($_POST['last']). ' <' . $_POST['mail'] . '>';

$headers = stripslashes($headers);
$headers = str_replace('\n', '', $headers); // Verwijder \n
$headers = str_replace('\r', '', $headers); // Verwijder \r
$headers = str_replace("\"", "\\\"", str_replace("\\", "\\\\", $headers)); // Slashes van quotes

$_POST['onderwerp'] = str_replace('\n', '', $_POST['onderwerp']); // Verwijder \n
$_POST['onderwerp'] = str_replace('\r', '', $_POST['onderwerp']); // Verwijder \r
$_POST['onderwerp'] = str_replace("\"", "\\\"", str_replace("\\", "\\\\", $_POST['onderwerp'])); // Slashes van quotes
// altanatief ( mail($mail_ontv, $_POST['onderwerp'], $inhoud_mail, $headers))

if (mail($mail_ontv,'Contact Smzvl.nl', $inhoud_mail, $headers))
{
// zorg ervoor dat dezelfde persoon niet kan spammen
$_SESSION['antiflood'] = time();

header ("refresh:7; url=contact.php");
echo '<h1>Het contactformulier is verzonden</h1>

<p>Bedankt voor het invullen van het contactformulier. We zullen zo spoedig mogelijk contact met u opnemen.</p>
<p></p>';
}
else
{
echo '<h1>Het contactformulier is niet verzonden</h1>

<p><b>Onze excuses.</b> Het contactformulier kon niet verzonden worden.</p>';
}
}
?>

die het prima doet.

de vraag is hoe krijg ik de op maak van het eersten Form in het PHP form

wie meer nodig heeft die kan daar om vraagen . zo als CSS

[size=xsmall]Toevoeging op 15/09/2012 23:10:24:[/size]

op maak draait in CSS sorry voor die fout