Contact Form snippet/controller, located in subpage, output on parentpage

Kirby 3 Solved ✅
1

Hello

We’re using your example of a simple contact form (https://getkirby.com/docs/cookbook/forms/basic-contact-form).

When we use it on a template, everything works as expected.

BUT:
We use it differently. The parentpage shows the content of the childpages. So – if we’re using the same form and we output the form on the parentpage, it’s not working anymore. After clicking the submit button, the page refreshes and nothing happens. No email, no error, just nothing.

Seems like the contact-snippet (connected to the template of the subpage), does not work together with the controller, if it’s used on a parentpage. We already tried to put the form controller code into the parentpage.php-controller, but this also changed nothing.

To sum up:

  • We use a template (e.g. parentpage.php) which shows the content of the subpages.
  • Each subpage has a template, which defines the output/layout of the content.
  • The form template does not work, if it’s output is on the parentpage
  • What is the right way to use the controller under this circumstances?

Any ideas?

Thanks in advance!

2

The controller should then be in the parent page and the action attribute of the form point to the parent page, but you also have to pass the variables down to the snippet.

1 Like
3

@texnixe Thank you for your reply!

This solved one problem, but there was another one… A condition in the controller was missing, so it only tries to get the data if there is a form template. Our fault – sorry about that.

4

Hi, I have the same problem as @MIUX-AG, so I tried to insert my variables into my snippet, but no email is sent. The page reloads and… that’s it.

To be clearer, I want to use my contact form in a snippet that is displayed on multiple pages (including my homepage).

So I created a controller named controllers/home.php (for the moment, I’ll do the same for every page template where I call my snippet). Then I added variables where I call the snippet, like this:

<?php snippet('testimonials-contact', ['alert' => $alert, 'data' => $data, 'success' => $success]) ?>

I’m not sure if I pass the right variables in my snippet.

Thanks in advance!

5

If you use multiple snippets all over the place, it might make sense to put the logic into the snippet rather than repeating it all over the place or use a shared controller.

But do I understand you correctly, that you also run into this problem on the home page itself?

Could you please post the home controller, home template and the snippet here.

6

Yes I think it’s better to put the logic into the snippet, but I don’t get how to use controllers and snippets at the same time.

Here is my home controller:

controllers/home.php

<?php
       return function($kirby, $pages, $page) {

    $alert = null;

    if($kirby->request()->is('POST') && get('submit')) {

        // check the honeypot
        if(empty(get('website')) === false) {
            go($page->url());
            exit;
        }

        $data = [
            'name'  => get('name'),
            'email' => get('email'),
            'text'  => get('text'),
            'phone' => get('phone')
        ];

        $rules = [
            'name'  => ['required', 'minLength' => 3],
            'email' => ['required', 'email'],
            'text'  => ['required', 'minLength' => 3, 'maxLength' => 3000],
        ];

        $messages = [
            'name'  => 'Merci d’entrer un nom valide (plus de 3 caractères)',
            'email' => 'Merci d’entrer une adresse email valide',
            'text'  => 'Le message doit faire entre 3 et 3000 caractères'
        ];

        // some of the data is invalid
        if($invalid = invalid($data, $rules, $messages)) {
            $alert = $invalid;

            // the data is fine, let's send the email
        } else {
            try {
                $kirby->email([
                    'template' => 'email',
                    'from'     => $data['email'],
                    'replyTo'  => $data['email'],
                    'to'       => 'delphin@hauchard.fr',
                    'subject'  => esc($data['name']) . ' vous a envoyé un message du site avocatms.fr',
                    'data'     => [
                        'text'   => esc($data['text']),
                        'sender' => esc($data['name']),
                        'phone' => esc($data['phone'])
                    ]
                ]);

            } catch (Exception $error) {
                if(option('debug')):
                    $alert['error'] = 'Votre message n’a pas pu être envoyé : <strong>' . $error->getMessage() . '</strong>';
                else:
                    $alert['error'] = 'Votre message n’a pas pu être envoyé';
                endif;
            }

            // no exception occurred, let's send a success message
            if (empty($alert) === true) {
                $success = 'Votre message a bien été envoyé, merci. Nous reviendrons vite vers vous !';
                $data = [];
            }
        }
    }

    return [
        'alert'   => $alert,
        'data'    => $data ?? false,
        'success' => $success ?? false
    ];
};

templates/home.php

<?php snippet('header') ?>
<?php snippet('hero/home') ?>

<main>
  <div class="features home-2">
    <div class="container">
      <div class="features-box2 row">
        <div class="item-features col-md-6 col-lg-4">
          <i class="fal fa-<?= $page->featureicon1() ?>"></i>
          <div class="item-content">
            <h4><?= $page->featuretitle1() ?></h4>
            <p><?= $page->featuretext1() ?></p>
            <a href="#droits" class="move-section"><?php echo t('more') ?></a>
          </div>
        </div>

        <div class="item-features col-md-6 col-lg-4">
          <i class="fal fa-<?= $page->featureicon2() ?>"></i>
          <div class="item-content">
            <h4><?= $page->featuretitle2() ?></h4>
            <p><?= $page->featuretext2() ?></p>
            <a href="#formations" class="move-section"><?php echo t('more') ?></a>
          </div>

        </div>
        <div class="item-features col-md-6 col-lg-4">
          <i class="fal fa-<?= $page->featureicon3() ?>"></i>
          <div class="item-content">
            <h4><?= $page->featuretitle3() ?></h4>
            <p><?= $page->featuretext3() ?></p>
            <a href="#mediation" class="move-section"><?php echo t('more') ?></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <section class="about-me py-80">
    [...]
  </section>

  <a class="anchor" id="droits"></a>      

  <section class="droits py-80">
    [...]
  </section>

  <a class="anchor" id="formations"></a>

  <section class="formations py-80">
    [...]
  </section>
  
  <hr/>

  <a class="anchor" id="mediation"></a>

  <section class="mediation py-80">
    [...]
  </section>

  <hr/>

<?php snippet('values') ?>
<?php snippet('testimonials-contact', ['alert' => $alert, 'data' => $data, 'success' => $success]) ?>
<?php snippet('blog') ?>
</main>

<?php snippet('footer') ?>

And finally my snippet

snippets/testimonials-contact.php

    <section class="testimonials-and-subscribe py-80">
        <img src="<?= $site->testimonialsimage()->toFile()->url() ?>" srcset="<?= $site->testimonialsimage()->toFile()->srcset(['breakpoints']) ?>" class="cover-img" alt="<?= $site->testimonialsimage()->toFile()->alt() ?>" />
        <div class="overlay-3">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="testimonials">
                            [...]
                    </div>
                    <div class="col-lg-6">
                        <div class="contact-bloc quote">
                            <div class="sec-title">
                                <h2><?php echo t('contact') ?></h2>
                            </div>
                            <?php if($success): ?>
                            <div class="alert success">
                                <p><?= $success ?></p>
                            </div>
                            <?php else: ?>
                            <?php if (teisset($alert['error'])): ?>
                                <div><?= $alert['error'] ?></div>
                            <?php endif ?>
                            <form method="post" action="<?= $page->url() ?>">
                                <div class="honeypot">
                                    <label for="website">Website <abbr title="required">*</abbr></label>
                                    <input type="website" id="website" name="website" tabindex="-1">
                                </div>
                                <div class="quote-item">
                                    <label for="name">
                                        Nom <abbr title="required">*</abbr>
                                    </label>
                                    <input type="text" id="name" name="name" value="<?= $data['name'] ?? '' ?>" required>
                                    <?= isset($alert['name']) ? '<span class="alert error">' . html($alert['name']) . '</span>' : '' ?>
                                </div>
                                <div class="quote-item">
                                    <label for="email">
                                        Email <abbr title="required">*</abbr>
                                    </label>
                                    <input type="email" id="email" name="email" value="<?= $data['email'] ?? '' ?>" required>
                                    <?= isset($alert['email']) ? '<span class="alert error">' . html($alert['email']) . '</span>' : '' ?>
                                </div>
                                <div class="quote-item">
                                    <label for="phone">
                                        Téléphone
                                    </label>
                                    <input type="phone" id="phone" name="phone" value="<?= $data['phone'] ?? '' ?>" >
                                </div>
                                <div class="quote-item">
                                    <label for="text">
                                        Texte <abbr title="required">*</abbr>
                                    </label>
                                    <textarea id="text" name="text" required><?= $data['text']?? '' ?></textarea>
                                    <?= isset($alert['text']) ? '<span class="alert error">' . html($alert['text']) . '</span>' : '' ?>
                                </div>
                                <div class="quote-ite">
                                    <input type="submit" name="submit" class="btn-1" value="Envoyer">
                                </div>
                            </form>
                            <?php endif ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </section>
7

@texnixe I don’t know if you saw my reply, I posted my codes 2 days ago.