Jump to content

Form and CSS


ankh2054
 Share

Recommended Posts

Hi All,

I have followed a tutorial on firms to start building my user registration form. It works great thanks Soma.  What I am struggling with is the CSS around the form. What I would lie to do is build the form myself in HTML, is this achievable?

My register.php is below, but instead of just outputting the form using <? echo $out; ?>. I would like to build the form myself so I can use twitter bootstrap as the base CSS.:

<?php
 
$out = '';
 
// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');
 
// create a text input
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
$form->append($field); // append the field to the form
 
// create email field
$field = $modules->get("InputfieldEmail");
$field->label = "E-Mail";
$field->attr('id+name','email');
$field->required = 1;
$form->append($field); // append the field
 
// you get the idea
$field = $modules->get("InputfieldPassword");
$field->label = "Passwort";
$field->attr("id+name","pass");
$field->required = 1;
$form->append($field);
 
// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","Subscribe");
$submit->attr("id+name","submit");
$form->append($submit);
 
// form was submitted so we process the form
if($input->post->submit) {
 
    // user submitted the form, process it and check for errors
    $form->processInput($input->post);
 
    // here is a good point for extra/custom validation and manipulate fields
    $email = $form->get("email");
    if($email && (strpos($email->value,'@hotmail') !== FALSE)){
        // attach an error to the field
        // and it will get displayed along the field
        $email->error("Sorry we don't accept hotmail addresses for now.");
    }
 
    if($form->getErrors()) {
        // the form is processed and populated
        // but contains errors
        $out .= $form->render();
    } else {
 
        // do with the form what you like, create and save it as page
        // or send emails. to get the values you can use
        // $email = $form->get("email")->value;
        // $name = $form->get("name")->value;
        // $pass = $form->get("pass")->value;
        //
        // to sanitize input
        // $name = $sanitizer->text($input->post->name);
        // $email = $sanitizer->email($form->get("email")->value);
        $out .= "<p>You submission was completed! Thanks for your time.";
    }
 
} else {
    // render out form without processing
    $out .= $form->render();
}

?>

  <?php include("./head.inc"); ?>

<body>

  <?php include("./navbar.inc"); ?>

  <div class="container">
     <div class="row">

    <? echo $out; ?>

     </div>

  <?php include ("./foot.inc"); ?>
  </div>

<?php include ("./java.inc"); ?>
Link to comment
Share on other sites

Charles,

Soma's code above was just an example of how you can use the API to build a form, not a firm recommendation of how forms should be built. By all means, go ahead and build a normal HTML form, style it as you wish :-). PW will not get in your way at all. As someone new to PW, I'd encourage you to (atm) stay away from such advanced code and instead focus on the basics of PW. Later, once comfortable with the API, you can have a go at using more advanced features of the API. 

Once you've built your HTML form (or whichever other way you do it), the 3 vital things you need to do/think about are:

1. Where is the form input sent? - this needs to be a PHP file server side, waiting for that form button to be pressed :-)

2. Grabbing and SANITIZING (am not shouting; just emphasising ;) ) the data sent by the form

3. Doing something with the SANITIZED values - typically you will want to save them to a database.

In between, there are other things like client-side validation of the form, form submission feedback, etc. Validation will also be done via 'sanitizing'.

For #2, read the below thoroughly: 

http://processwire.com/api/variables/input/

http://processwire.com/api/variables/sanitizer/

Get your head round that first - it is probably the most important of the above 3. Clicking a form submit button is easy; what to do afterwards is the main work...

Hope this helps!

Edited by kongondo
  • Like 2
Link to comment
Share on other sites

There's many ways to get to build a formular. I never used Bootstrap so I don't know what's needed (but can imagine)

There's a markup and classes array to give the InputfieldWrapper that allows to customize some of it. That's more what than where.

https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/core/InputfieldWrapper.php#L71

https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/core/InputfieldWrapper.php#L642

Since each InputfieldWrapper and Inputfield gets rendered you could modify the render method with hooks. Or maybe just foreach the fields and echo out the inputs yourself.

Just some random example, instead of $out .= $form->render() after a $form->processInput($input->post)

$out = '';
foreach($form->children as $input){
    if($input->getErrors()) {
        foreach($input->getErrors() as $e) $errors .= "<em class='error'>$e</em>";
    }
    $out .= "<div class='field'><label for='$input->id'>{$input->render()}</label>$errors</div>";
}
Link to comment
Share on other sites

So I have created this.... clearly not working, but could anyone point me in the right direction. 

<?php

$form = array(
  'full_name' => $input->post->full_name,
  'username' => $input->post->username,
  'password' => $input->post->password,
  'email' => $input->post->email,
  
);

if($input->post->submit) {

   
        //create the new user
        $new_user = new User();
        $new_user->of(false);
        $new_user->name = $username;
        $new_user->email = $email;
        $new_user->pass = $password;
        $new_user->addRole("guest");
        $new_user->user_full_name = $full_name;
        $new_user->save();
        $new_user->of(true);
    }

?>

<?php include("./head.inc"); ?>
<?php include ("./navbar.inc"); ?>

<div class="errors"><?php echo $errors; ?></div>

<div class="container">

            <div class="row omb_row-sm-offset-3">
                <div class="col-xs-12 col-sm-6">    
                    <form class="omb_loginForm" action="./" accept-charset="UTF-8" autocomplete="off" method="POST">
                      
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" class="form-control" name="username" placeholder="Username">
                        </div>

                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" class="form-control" name="full_name" placeholder="Full Name">
                        </div>
                         <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                            <input type="text" class="form-control" name="email" placeholder="Email">
                        </div>
                        <span class="help-block"></span>
                                            
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                            <input  type="password" class="form-control" name="password" placeholder="Password">
                        </div>
                        <span class="help-block"></span>
                        

                   
                    
                    <input class="loginLoginValue" type="hidden" name="submit" value="submit" />

                        <button class="btn btn-lg btn-primary btn-block" type="submit" name="submit" value="register">Register</button>
                    </form>
                </div>
            </div>
        </div>
<?php include("./foot.inc"); ?>
<?php include ("./java.inc"); ?>
Link to comment
Share on other sites

It's saying I have a empty name field, so I'm clearly missing something. 

Error: Exception: Can't save page 0: /d1scordia8/access/users//: It has an empty 'name' field (in /var/www/www.bommachine.co.uk/wire/core/Pages.php line 604)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...