configure-contact-form-page.md

6i-Jekyll

Configure "Contact form" page

Open _config.yml and find contact section.

• to enable the "Contact form" page, set contact.enable with true.
• fill the contact.form_action with a valid URL of an endpoint, in order to parse the form. It is the URL that processes the form submission, and so for that you must have a web server to process the form (php, node.js or java ...) or a Sass solution form endpoints like the one provides by https://getform.io/

Example

# --------------
#  Form contact
# --------------
contact:
  enable: true            # Enable/ disable it
  link:
    in_menu: false        # To add a link "Contact" into menu
    in_footer: true       # To add a link "Contact" into footer
  form_action: "https://{YOUR_FORM_ENDPOINT}"

If this feature is enable, so the email in footer is withdrawn or replaced with a link to the contact page if contact.link.in_footer is set to true.

Showcase

When the contact page is enable, a link is added into the menu. This form, like anothier view in this theme, is responsive.

If you try to go to the contact page, when this feature is disabled... so you got an error message.

How to setup a form backend with Getform solution

1. Create a Getform account

If you haven’t created one already, sign up to https://app.getform.io/forms. It is super easy and free for minimal usages.

For information, the Getform free plan provides :

• 1 endpoint
• 50 submissions/mo.
• 100MB file storage
• Getform branding

See more https://getform.io/docs

2. Create a new form on Getform.io

After you log in to Getform, click to “+” button on your dashboard to create a new form then name it e.g. “Contact Form for my Jekyll Blog”

3. Configure form action in 6i-Jekyll

In settings form on Getform, get the URL of form endpoint (https://getform.io/{YOUR_UNIQUE_FORM_ENDPOINT}) , in order to fill contact.form_action parameter into _config.yml.

4. Ready to test

Test your contact form on you Jekyll site by submitting a message. After submission, You can go on getform to see the response.

Now Getform will handle the contact form submissions on your Jekyll site.

After you finish the setup, based on your needs you can also set up an email notification from form settings, use our Zapier integration to send your form submission data to 1000s of other applications and keep your form submissions spam protected by using reCaptcha integration.

How to setup a form backend with Symfony framework in PHP

If you have a server with PHP, it's easy to do it with Symfony 4 by using the Symfony MakerBundle. It helps you create empty commands, controllers, form classes, tests and more so you can forget about writing boilerplate code.

1. Genrate controller and form class with MakerBundle

First, generate a new controller class with name ContactController.

bin/console make:controller ContactController
 
 created: src/Controller/ContactController.php
 Success! 

Then, generate a new form with name ContactType. In Symfony a form class always end with the suffix of Type.

bin/console make:form

The name of the form class (e.g. GrumpyGnomeType):
 > ContactType

 created: src/Form/ContactType.php
 Success! 

2. Building our contact form class

In the form ./src/Form/ContactType.php generated by maker, let's remove the existing add('field_name'), and adding new : name, email, and message.

// ./src/Form/ContactType.php

namespace App\Form;

use App\Entity\Contact;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;

class ContactType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name')
            ->add('email', EmailType::class)
            ->add('message', TextareaType::class);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            // uncomment if you want to bind to a class
            //'data_class' => Contact::class,
        ]);
    }
}

When we add item in $builder, if we don't specify a second argument, the form field type is inferred to be of type TextType::class by default. So it will be rendered out as a standard input tag Html.

3. Get submission data of contact form in controller

To create the form we use the method createForm(). The only mandatory argument is the form type (e.g. ContactType::class) that we wish to use. By adding ::class as a suffix to any class name, behind the scenes PHP will expand out the class name to its fully qualified name automatically (a.k.a. FQCN). In other words, ContactType::class is equivalent to App\Form\ContactType, which is the namespace and the class name in one.

And to handle the response form we use the method handleRequest().

More information here : https://symfonycasts.com/screencast/symfony-forms/form-submit

// ./src/Controller/ContactController.php

namespace App\Controller;

use App\Form\ContactType;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class ContactController extends AbstractController
{
    /**
     * @Route("/submissionContact", name="contact")
     */
    public function index(Request $request)
    {
        $form = $this->createForm(ContactType::class);
        
        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) { 
            $data = $form->getData();
            // dd($data);
            // $name = $data['name'];
            // $email = $data['email'];
            // $message = $data['message'];        
        }
    }
}

If you want to persists $data submission in a database, we can do easy with doctrine and its entity manager. Just create a simple entiy ContactMessage with a name, email and message fields, and uise $entitymanager service like this :

// ./src/Controller/ContactController.php

(...)

class ContactController extends AbstractController
{
    /**
     * @Route("/submissionContact", name="contact")
     */
    public function index(EntityManagerInterface $entitymanager, Request $request)
    {
        $form = $this->createForm(ContactType::class);
        
        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) { 
            $data = $form->getData();
            
            $contactMessage = new ContactMessage();
            $contactMessage->setName($data['name']);
            $contactMessage->setEmail($data['email']);
            $contactMessage->setMessage($data['message']);

            $em->persist($contactMessage);
            $em->flush();
        }
    }
}

4. Send submission contact by mail

In Symfony, it's easy to send email with the component Symfony's Mailer & Mime components form. It's a powerful system for creating and sending emails - complete with support for multipart messages, Twig integration, CSS inlining, file attachments and a lot more. Get them installed with:

composer require symfony/mailer

After configure the transport for mail (smtp, sendmail or a 3rd party transport as you want). See more https://symfonycasts.com/screencast/mailer/config-mailcatcher#play

# .env
MAILER_DSN=smtp://user:[email protected]:port

# config/packages/mailer.yaml
framework:
  mailer:
    dsn: '%env(MAILER_DSN)%'

And finally send email in ContactController.

// ./src/Controller/ContactController.php

namespace App\Controller;

use App\Form\ContactType;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Mime\Email;

class ContactController extends AbstractController
{
    /**
     * @Route("/submissionContact", name="contact")
     */
    public function index(MailerInterface $mailer, Request $request)
    {
        $form = $this->createForm(ContactType::class);
        
        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) { 
            $data = $form->getData();
            
            $email = (new Email())
                ->from($data['email'])
                ->to([email protected])
                ->subject('[New contact message in 6i-Keyll website] From '.$data['name'])
                ->text("Message: {$data['message']}");
                                    
            $mailer->send($email);
        }
    }
}