Form and CSS

ankh2054 · April 22, 2014

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"); ?>

kongondo · April 22, 2014

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 April 22, 2014 by kongondo

ankh2054 · April 22, 2014

thanks Kongondo most helpful. I just need to get my head around it all then it should be easier. Im being impatient

Soma · April 22, 2014

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>";
}

ankh2054 · April 22, 2014

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"); ?>

ankh2054 · April 22, 2014

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)

ankh2054 · April 22, 2014

Hold on, am I not assigning the variables. Sorry this is internal dialogue on the tube.

What if I do.

$username = $input->post->username

ankh2054 · April 22, 2014

Get username from form and adding to $username variable.

$username = form->get("username");

Sign In

Form and CSS

Recommended Posts

ankh2054

Link to comment

Share on other sites

kongondo

Link to comment

Share on other sites

ankh2054

Link to comment

Share on other sites

Soma

Link to comment

Share on other sites

ankh2054

Link to comment

Share on other sites

ankh2054

Link to comment

Share on other sites

ankh2054

Link to comment

Share on other sites

ankh2054

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details