giannisok

Contact Form tutorial

Recommended Posts

3 hours ago, Missariella said:

But in the end this also does to trick for me.

just ad the action to the form with 

action="#contact-form"

Does this work if the form is filled in correctly? This was the problem I'm struggling with:

$mail = wireMail();

$mail->to($contactFormRecipient)
->from($email, $name)
->subject('Woodenfox design website form submission')
->bodyHTML($message);

if ($mail->send()) {
    // at "/contact/" this runs
    $session->sent = true;
    $session->flashMessage = "Thanks for your message! I will get back to you shortly.";
    $session->redirect($pages->get($contactPageID->url));
}
else {
    // at "/contact/#form-top" this runs, presumably because of the initial
    // problem of variables not persisting at this new URL
    $session->flashMessage = "Sorry, an error occured. Please try again.";
}

 

Share this post


Link to post
Share on other sites

I still have the $session->redirect as well for the mail send.

but for the other else statements it accepts the action redirection.

 

I am happy it works.

But now i want to actually use invisible recaptcha.

So gonna change the code.

 

Share this post


Link to post
Share on other sites

I forgot the if statements in the input fields themselves:

<input class="form-control" name="name" id="name" type="text" value="<?php if ($name) echo $name; ?>">

Now the form action works, and when filled in correctly, the redirect leaves empty fields as expected. Thanks for the suggestions, and I'm glad you got it sorted!

If you find a better way of doing the forms, be sure to share them in the forum :)

Share this post


Link to post
Share on other sites

Hi @giannisok Thank you for the tutorial, I have one problem which I got stuck for couple of days and cannot solve:

When I run my contact page, I get this   

Quote

Error:     Call to a member function errors() on a non-object (line 49 of C:\xampp\htdocs\pn\site\assets\cache\FileCompiler\site\templates\contact.php)

I can't seem to get it work, I used many tactics and followed your code line by line, but couldn't find any solution. I would be glad if you give me a hand on this.

Below is my code of contact.php file:

Quote

<?php include("header.php"); ?>
 <?php include("_contact-controller.php"); ?>
   <!-- Breadcrumbs Styles -->  
  <section class="irs-ip-breadcrumbs irs-bc-teacher">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-lg-offset-3 text-center">
          <h1 class="irs-bc-title">Contact Us</h1>
        </div>
      </div>
    </div>
  </section>

  <!-- Breadcrumbs html --> 
  <section class="irs-ip-brdcrumb">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-right irs-bb-right">
          <ul class="list-inline irs-brdcrmb">
            <li><a href="#">Home</a></li>
            <li><a href="#"> > </a></li>
            <li><a class="active" href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Breadcrumbs html --> 
  <section class="irs-contact">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 irs-padr-zero">
          <div class="irs-contact-detail">
            <h3 class="irs-contact-title">Our Locations</h3>
            <ul class="irs-contect-address">
              <li>Turkmenistan, Ashgabat</li>
              <li>A.Niyazow str,</li>
              <li>house 36, apt 34</li>
            </ul>
            <h3 class="irs-cf-title">Contact Form</h3>
            <?php 
              if($session->flashMessage):?>
                <div class="alert <?=!$session->sent && (!$v->validate() || !$resp->isSuccess()) ? 'alert-danger' : 'alert-success'?>" role="alert">
                  <?php echo $session->flashMessage; ?>
                </div>
            <?php endif; ?>
            <form class="irs-contact-formed" method="post">
              <div class="form-group <?=$v->errors('name') ? 'has-error' : ''?>">
                <label for="name">Name</label>
                <input type="text" name="name" class="form-control" id="name" value="<?=$sanitizer->text($input->post->name)?>">
              </div>
              <div class="form-group <?=$v->errors('email') ? 'has-error' : '';?>">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" value="<?=$sanitizer->text($input->post->email)?>">
              </div>
              <div class="form-group <?=$v->errors('message') ? 'has-error' : ''?>">
                <label for="message">Message</label>
                <textarea class="form-control" name="message" id="message" rows="2" placeholder="Message"><?=$sanitizer->text($input->post->message)?></textarea>
              </div>
              <div class="form-group">
                <!--Google Recaptcha code starts here -->
                  <div class="g-recaptcha" data-sitekey="<?=$googleSiteKey?>"></div>
                  <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
                <!--Google Recaptcha code ends here-->
              </div>
              <button type="submit" class="btn btn-default">Contact Us</button>
            </form> 
            <div class="irs-courses-td-sngle-dtls irs-cfp">
              <div class="irs-social-icon-td-sngle-dtls">
                <h3 class="irs-cp-follow">Follow Edu Hub</h3>
                <ul class="list-inline irs-courses-tdetls style2">
                  <li class="fbok"><a href="#"><span class="flaticon-social-3"></span> </a></li>
                  <li class="twtr"><a href="#"><span class="flaticon-social-4"></span> </a></li>
                  <li class="gplus"><a href="#"><span class="flaticon-social-media-1"></span> </a></li>
                  <li class="linkdin"><a href="#"><span class="flaticon-linkedin-logo"></span> </a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-9 irs-padl-zero">
          <div class="irs-googel-map">
            <div class="irt-google-map">
              <div class="" id="map-location" style="height: 740px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <?php 
      //here we remove the flash message because it is already shown above the form
      $session->remove('flashMessage');
      //reset sent variable for future submit
      $session->sent = false; 
    ?>
  </section>
<?php include_once("footer-2.php");?>
<?php include_once("footer.php");?>
</body>
</html>

 

 

Share this post


Link to post
Share on other sites
On 07.09.2016 at 12:26 AM, giannisok said:

Simple Contact Form
Using Google Recaptcha & Valitron validation library

1.png

2.png

3.png

I just finished creating a simple Contact-Form for a client's website so i thought it would be really helpfull to share it with the community.

The contact form uses:

The contact-form is located inside a contact-page, so the bare minimum you need in order to setup your own is:

  1. contact.php (template file used by your contact-page)
  2.  _contact-controller.php (file used as a controller for your contact-form functionality like send email, validate fields etc)
  3. 2 extra lines inside your composer.json file


So, let's start:

First you need to update your composer.json file adding 2 lines inside the require object:


"vlucas/valitron": "^1.2",
"google/recaptcha": "~1.1"

Here is a sample composer.json file:


{
  "name": "processwire/processwire",
  "type": "library",
  "description": "ProcessWire CMS/CMF",
  "keywords": [ "cms","cmf", "content management system" ],
  "homepage": "https://processwire.com",
  "authors": [
    {
      "name": "Ryan Cramer",
      "email": "ryan@processwire.com",
      "homepage": "https://processwire.com",
      "role": "Developer"
    }
  ],
  "require": {
    "php": ">=5.3.8",
    "ext-gd": "*",
    "vlucas/valitron": "^1.2",
    "google/recaptcha": "~1.1"
  },
  "autoload": {
    "files": [ "wire/core/ProcessWire.php" ]
  },
  "minimum-stability": "dev"
}

open console and navigate to processwire root folder (where composer.json file is)
on this step i assume you have already setup composer for your project, otherwise google it :)
run the following command:


composer update

this will create a vendor folder (if it does not already exist) and download valitron and google recaptcha libraries.

Then open your contact-page template file(usually named contact.php inside your templates directory) and add the following:
* Note: The form below uses bootstrap 3.0.0 css, so if you are using something else you need to make the appropriate changes.


<?php namespace ProcessWire;
include('_contact-controller.php')
?>
<div class="container">
	<div class="row">
		<div class=" col-md-4">
            <h2>Contact Form</h2>

            <?php if($session->flashMessage):?>
            <div class="alert <?=!$session->sent && (!$v->validate() || !$resp->isSuccess()) ? 'alert-danger' : 'alert-success'?>" role="alert">
              <?php echo $session->flashMessage;?>
            </div>
            <?php endif;?>

            <form id="contact-form" method="post">
                <div class="form-group <?=$v->errors('name') ? 'has-error' : ''?>">
                    <label for="name">Name</label>
                    <input class="form-control" name="name" id="name" type="text" value="<?=$sanitizer->text($input->post->name)?>">
                </div>
                <div class="form-group <?=$v->errors('email') ? 'has-error' : ''?>">
                    <label for="email">Email</label>
                    <input class="form-control" name="email" id="email" type="text" value="<?=$sanitizer->text($input->post->email)?>">
                </div>
                <div class="form-group <?=$v->errors('message') ? 'has-error' : ''?>">
                    <label for="message">Message</label>
                    <textarea class="form-control" name="message" id="message"><?=$sanitizer->text($input->post->message)?></textarea>
                </div>
                <div class="form-group">

                    <!-- Google Recaptcha code START -->
                    <div class="g-recaptcha" data-sitekey="<?=$googleSiteKey?>"></div>
                    <script type="text/javascript"
                            src="https://www.google.com/recaptcha/api.js">
                    </script>
                    <!-- Google Recaptcha code END -->

                </div>
                <button type="submit" class="btn btn-primary">SEND</button>
            </form>
      	</div>
    </div>
</div>
<?php
    //here we remove the flash-message because it is already shown above the form.
    $session->remove('flashMessage');
    //reset 'sent' variable for future submit
	$session->sent = false;
?>


Next create a file inside you templates directory with name: _contact-controller.php:
and set the required variables($googleSiteKey, $contactFormRecipient, $contactPageID)


<?php
namespace ProcessWire;

/**
*    here we include Valitron & Google recaptcha libraries
*    make sure the path is correct in your template
*/
include(dirname(__FILE__) . "/../../vendor/vlucas/valitron/src/Valitron/Validator.php");
include(dirname(__FILE__) . '/../../vendor/google/recaptcha/src/ReCaptcha/ReCaptcha.php');

/**
*    here we add the form field values to Valitron
*/
$v = new \Valitron\Validator(array(
        'name' => $sanitizer->text($input->post->name),
        'email' => $sanitizer->email($input->post->email),
        'message' => $sanitizer->text($input->post->message),
    )
);

/**
*    validation rules set for each form field
*    For more details on Valitron/Validator usage visit: 
*    https://github.com/vlucas/valitron
*/
$v->rule('required', ['name', 'email', 'message']);
$v->rule('lengthMin', 'name', 5);
$v->rule('email', 'email');

/**
*    set Google recaptcha site-key & secret-key
*    create a new key from: https://www.google.com/recaptcha/admin
*/
$googleSiteKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$googleSecretKey = 'YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY';

/**
*    set the email of the contact form recipient(usually the website owner)
*/
$contactFormRecipient = 'your@company.com';

/**
*    set the id of contact-page in order to redirect there when the form is sent
*/
$contactPageID = '1045';

//here we check whether the 'name' field exists inside post variables (which means the form is posted)
if ($input->post->name) {

    //if fields validation passes
    if ($v->validate()) {

        $reCaptcha = new \ReCaptcha\ReCaptcha($googleSecretKey);
        $resp = $reCaptcha->verify($input->post->{'g-recaptcha-response'}, $_SERVER["REMOTE_ADDR"]);

        //if google-recaptcha validation passes
        if ($resp->isSuccess()) {
        
            //This is the HTML message
            $message = '
                <html>
                    <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                        <title>Contact Form | ' . $input->post->name . '</title>
                    </head>
                    <body>
                        <p>' . $input->post->message . '</p>
                    </body>
                </html>';

            //here we send the form to $contactFormRecipient
            wireMail($contactFormRecipient, $input->post->email, "Contact Form | " . $input->post->name, $message);
            
            //here we set a flash-message to notify the user that the form was successfully sent
            $session->flashMessage = 'Thank you for your message! We will get in touch with you shortly.';
            
            //save in session that the form is sent
			$session->sent = true;

            //finally redirect user to contact-page
            $session->redirect($pages->get($contactPageID)->url);
        } else {
            //self explain
            $session->flashMessage = 'Error while validating you are not a robot!';
        }
    }
}
?>

Thats all!
You now have a simple contact-form working with captcha and field validation!
I would be more than happy to help anyone having problems on the setup.
 

I always get call to a member function errors(), on a non-object. Cannot solve it. Any help appreciated

Share this post


Link to post
Share on other sites

Hi @Batyr and welcome to the forums :)

I'm rushing out the door in two seconds but I can see this thread on the phone. Have you got the namespace at the top of your template files (contact and _contact-controller)?

<?php namespace ProcessWire; ?>

Also, the error points to line 49, what's on that line? I wish the forum had line numbers sometimes.

Share this post


Link to post
Share on other sites

Hi @SamC thank you for your reply. I just have it on my header.php file.

Here is the 49th line

<div class="form-group <?php echo $v->errors('name') ? 'has-error' : '';?>">

 

Share this post


Link to post
Share on other sites
7 hours ago, Batyr said:

I just have it on my header.php file.

Did you try putting the namespace at the top of the _contact-controller.php file?

What I reckon is $v is a Valitron object, and your error is complaining about a 'non-object' being referenced (trying to call a method called errors() on it). $v is in _contact-controller.php and your calling a method on it in contact.php. These two files don't 'know' about each other (even though you have the namespace in header.php). Maybe unnecessary, but to avoid things like this (undefined functions is another one that crops up) I just add the namespace to the top of every template. It's not that much hassle as I never have tonnes of templates anyway.

Therefore I would think that adding the namespace to _contact-controller.php would solve your issue.

Now I might be wrong but I'd try this if you haven't already. I can't see anything wrong with the code at a glance, especially if you copied it from a working example. The only difference I see is that yours doesn't have the namespaces.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
18 hours ago, SamC said:

Did you try putting the namespace at the top of the _contact-controller.php file?

What I reckon is $v is a Valitron object, and your error is complaining about a 'non-object' being referenced (trying to call a method called errors() on it). $v is in _contact-controller.php and your calling a method on it in contact.php. These two files don't 'know' about each other (even though you have the namespace in header.php). Maybe unnecessary, but to avoid things like this (undefined functions is another one that crops up) I just add the namespace to the top of every template. It's not that much hassle as I never have tonnes of templates anyway.

Therefore I would think that adding the namespace to _contact-controller.php would solve your issue.

Now I might be wrong but I'd try this if you haven't already. I can't see anything wrong with the code at a glance, especially if you copied it from a working example. The only difference I see is that yours doesn't have the namespaces.

Hi @SamC Thank you for your help, I put namespace Processwire on both, contact.php and _contact-controller.php it all worked. I just had some design problems thus my page won't load properly. I guess I have to take more attention to frontend as well :D Thank you again!

  • Like 1

Share this post


Link to post
Share on other sites
On 02.12.2017 at 4:39 PM, SamC said:

Glad you got it working :) 

Thank you @SamC for the great help. Now it seems that when I enter all the information I get an error from Google ReCaptcha. Whenever I enter all the right credentials it throws me "Error while validating you are not a robot!"  

I tried to re-entering the information so many times but no luck.

Снимок.PNG

Share this post


Link to post
Share on other sites

Did you complete the recaptcha too? i.e. ticking the box and "Select all images with blah blah..." before submitting? The error comes from somewhere in you _contact_controller.php file, the line where the check for validation happens. Goes a bit like this:

// if form has been submitted
if ($input->post->sendMe) {
  // if fields are filled out correctly
  if ($v->validate()) {
    // if recpatcha is successful
    if ($captcha->verifyResponse() === true) { // <<<<<<<<<<<<<<<<<<<<<<<< YOU'RE FAILING HERE
      // if mail has been sent successfully
      if ($mail->send()) {
        $session->sent = true;
        $session->flashMessage = "Thanks for your message! I will get back to you shortly.";
        $session->redirect($pages->get($contactPageID)->url);
      }
      else {
        // problem sending mail
        $session->flashMessage = "Sorry, an error occured. Please try again.";
      }
    }
    else {
      // problem with recaptcha
      $session->flashMessage = 'Recaptcha must be complete.'; // <<<<<<<<<<<<<<<<<<<<<<<< SO ELSE STATEMENT RUNS
    }
  }
  else {
    // problem with fields
    $session->flashMessage = 'Please fill out the fields correctly.';
  }
}

 

 

Share this post


Link to post
Share on other sites
1 hour ago, SamC said:

Did you complete the recaptcha too? i.e. ticking the box and "Select all images with blah blah..." before submitting? The error comes from somewhere in you _contact_controller.php file, the line where the check for validation happens. Goes a bit like this:


// if form has been submitted
if ($input->post->sendMe) {
  // if fields are filled out correctly
  if ($v->validate()) {
    // if recpatcha is successful
    if ($captcha->verifyResponse() === true) { // <<<<<<<<<<<<<<<<<<<<<<<< YOU'RE FAILING HERE
      // if mail has been sent successfully
      if ($mail->send()) {
        $session->sent = true;
        $session->flashMessage = "Thanks for your message! I will get back to you shortly.";
        $session->redirect($pages->get($contactPageID)->url);
      }
      else {
        // problem sending mail
        $session->flashMessage = "Sorry, an error occured. Please try again.";
      }
    }
    else {
      // problem with recaptcha
      $session->flashMessage = 'Recaptcha must be complete.'; // <<<<<<<<<<<<<<<<<<<<<<<< SO ELSE STATEMENT RUNS
    }
  }
  else {
    // problem with fields
    $session->flashMessage = 'Please fill out the fields correctly.';
  }
}

 

 

Yeah I put the tick and went through all of its procedures one by one. Still no luck. I have tried it almost 100 times, still nothing. Here is my _contact-controller.php code

//here we check whether the 'name' field exists inside post variables (which means the form is posted)
if ($input->post->name) {

    //if fields validation passes
    if ($v->validate()) {

        $reCaptcha = new \ReCaptcha\ReCaptcha($googleSecretKey);
        $resp = $reCaptcha->verify($input->post->{'g-recaptcha-response'}, $_SERVER["REMOTE_ADDR"]);

        //if google-recaptcha validation passes
        if ($resp->isSuccess()) {
        
            //This is the HTML message
            $message = '
                <html>
                    <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                        <title>Contact Form | ' . $input->post->name . '</title>
                    </head>
                    <body>
                        <p>' . $input->post->message . '</p>
                    </body>
                </html>';

            //here we send the form to $contactFormRecipient
            wireMail($contactFormRecipient, $input->post->email, "Contact Form | " . $input->post->name, $message);
            
            //here we set a flash-message to notify the user that the form was successfully sent
            $session->flashMessage = 'Thank you for your message! We will get in touch with you shortly.';
            
            //save in session that the form is sent
			$session->sent = true;

            //finally redirect user to contact-page
            $session->redirect($pages->get($contactPageID)->url);
        } else {
            //self explain
            $session->flashMessage = 'Error while validating you are not a robot!';
        }
    }
}
?>

 

Share this post


Link to post
Share on other sites

I do it differently, I use the google recaptcha module here - can install it via classname (MarkupGoogleRecaptcha) in the admin (modules page).

So, in my form at the top (where you include valitron):

$captcha = $modules->get("MarkupGoogleRecaptcha");

...then to render it, just:

<label for="recaptcha">Recaptcha (required)</label>
<!-- Google Recaptcha code START -->
<?php echo $captcha->render(); ?>
<!-- Google Recaptcha code END -->

...and to check the response:

if ($captcha->verifyResponse() === true) 

I found this way easier. You fill out the secret key and stuff in the module instead of pasting it into your php file.

  • Like 2

Share this post


Link to post
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