Skip navigation
Currently Being Moderated

How do I place my Contact form side for my specific form?

Nov 27, 2012 10:10 AM

Tags: #cs5 #side_by_side #contact_form

Ok so I've been going through painstaking trials and errors trying to figure out how to place my form columns? rows? whatever, side by side. Below is my code and a link to see what it currently looks like. I want to place the "Your name" and "Email Address" side by side as well as add 3 more categories which will make 3 by 3 total. I figure as soon as I know how to place those first 2 side by side then the rest should be easy. Thanks you in advance!

 

http://www.ybcreations.com/ContactTest.php  - Link where the form is at.

 

 

Below is the source code followed by the CSS

 

<?php

 

 

// Set email variables

$email_to = '';

$email_subject = ' Inquiry';

 

 

// Set required fields

$required_fields = array('fullname','email','comment');

 

 

// set error messages

$error_messages = array(

          'fullname' => 'Please enter a Name to proceed.',

          'email' => 'Please enter a valid Email Address to continue.',

          'comment' => 'Please enter your Message to continue.'

);

 

 

// Set form status

$form_complete = FALSE;

 

 

// configure validation array

$validation = array();

 

 

// check form submittal

if(!empty($_POST)) {

          // Sanitise POST array

          foreach($_POST as $key => $value) $_POST[$key] = remove_email_injection(trim($value));

 

          // Loop into required fields and make sure they match our needs

          foreach($required_fields as $field) {

                    // the field has been submitted?

                    if(!array_key_exists($field, $_POST)) array_push($validation, $field);

 

                    // check there is information in the field?

                    if($_POST[$field] == '') array_push($validation, $field);

 

                    // validate the email address supplied

                    if($field == 'email') if(!validate_email_address($_POST[$field])) array_push($validation, $field);

          }

 

          // basic validation result

          if(count($validation) == 0) {

                    // Prepare our content string

                    $email_content = 'New Website Comment: ' . "\n\n";

 

                    // simple email content

                    foreach($_POST as $key => $value) {

                              if($key != 'submit') $email_content .= $key . ': ' . $value . "\n";

                    }

 

                    // if validation passed ok then send the email

                    mail($email_to, $email_subject, $email_content);

 

                    // Update form switch

                    $form_complete = TRUE;

          }

}

 

 

function validate_email_address($email = FALSE) {

          return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? TRUE : FALSE;

}

 

 

function remove_email_injection($field = FALSE) {

   return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));

}

 

 

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

 

 

<!-- Contact Form Designed by James Brand @ dreamweavertutorial.co.uk -->

<!-- Covered under creative commons license - http://dreamweavertutorial.co.uk/permissions/contact-form-permissions. htm -->

 

 

          <title>Contact Form</title>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

          <link href="Billy testing/ContactForm.css" rel="stylesheet" type="text/css" />

          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-comp ressed.js"></script>

    <script type="text/javascript" src="Billy testing/validation/validation.js"></script>

 

 

   

          <script type="text/javascript">

var nameError = '<?php echo $error_messages['fullname']; ?>';

                    var emailError = '<?php echo $error_messages['email']; ?>';

                    var commentError = '<?php echo $error_messages['comment']; ?>';

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

    </script>

 

 

</head>

 

 

 

 

 

 

 

 

<body onload="MM_preloadImages('Billy testing/x.png')">

 

 

<div id="formWrap">

<h2>We appreciate your business</h2>

 

 

<div id="form">

<?php if($form_complete === FALSE): ?>

<form action="ContactTest.php" method="post" id="comments_form">

          <div class="row">

          <div class="label">Your Name</div> <!--end .label -->

          <div class="input">

   

          <input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>"/><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>

 

 

          </div><!-- end. input --><!-- end .context -->

          </div><!-- end .row -->

   

    <div class="row">

          <div class="label">Your Email Address</div> <!--end .label -->

          <div class="input">

          <input type="text" id="email" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>"/><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>

 

 

          </div><!-- end. input --><!-- end .context -->

          </div><!-- end .row -->

   

    <div class="row">

          <div class="label">Comments</div> <!--end .label -->

          <div class="input">

          <textarea id="comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?></textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>

          </div><!-- end. input -->

          </div><!-- end .row -->

   

    <div class="submit">

    <input type="submit" id="submit" name="submit" value="Send Message" />

   

    </div><!-- end .submit-->

   

    </form>

     <?php else: ?>

<p style="font-size:25px; font-family:Arial, Helvetica, sans-serif; color:#255E67; margin-left:25px;">Thank you for your Message!</p>

<script type="text/javascript">

setTimeout('ourRedirect()', 5000)

funtion ourRedirect(){

          location.href='contact.html'

}

 

 

</script>

 

 

 

 

<?php endif; ?>

 

 

</div><!-- end #form-->

</div>

<p> </p>

<!-- end formwrap -->

 

 

 

 

</body>

</html>

 
Replies
  • Currently Being Moderated
    Nov 27, 2012 10:52 AM   in reply to BillyKundalini

    Use CSS float: left on <li> and <label> selectors

    http://alt-web.com/DEMOS/CSS-Form2.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2012 12:48 PM   in reply to BillyKundalini

    Did you look at my DEMO with code examples?

     

    Screenshot:

    CSSForm.jpg

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 27, 2012 9:21 PM   in reply to BillyKundalini

    You need a server-side script to send the filled in data to you as e-mail.

     

    Take a look at one such scripts here: http://luiszuno.com/blog/downloads/formy-little-html-contact-form/

     

    It's very lightweight, includes a form validation and works like a charm.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points