You are here:
Every website benefits from a contact form, providing a channel for feedback and potential sales leads. Thankfully, adding a contact form to your Sulu CMS site is a breeze. Let’s get started.
We need to login into the Sulu CMS installation and add in ‘Sulu Form Bundle’
### Run this from SSH, instead of FTP / SFTP
$ cd <your-sulu-cms-installation-dir>
$ composer require sulu/form-bundle
### Add the form bundle in the database
$ php bin/console doctrine:schema:update --force
Next, is to enable ‘Sulu Form Bundle’ privileges. Go to ‘Menu’ -> ‘Settings’ -> ‘User Roles’ and select which user roles that should be able to create and manage the form, and then enable it.
Once you clear the website cache, and refresh your browser, you will see the ‘Form’ menu appears (assuming that you are using an account that have the form privileges).
The next step is to make a page template where the form can be embedded. Create ‘contact.xml’ file in <your-sulu-base-dir>/config/templates/pages, using your IDE (or File Manager).
### <your-sulu-base-dir>/config/templates/pages
<?xml version="1.0" ?>
<template xmlns="http://schemas.sulu.io/template/template"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">
<key>contact</key>
<view>pages/contact</view>
<controller>Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction</controller>
<cacheLifetime>604800</cacheLifetime>
<meta><title lang="en">Contact Form</title></meta>
<properties>
<property name="title" type="text_line" mandatory="true">
<meta><title lang="en">Title</title></meta>
<params>
<param name="headline" value="true"/>
</params>
<tag name="sulu.rlp.part"/>
</property>
<property name="url" type="resource_locator" mandatory="true">
<meta>
<title lang="en">Resourcelocator</title>
</meta>
<tag name="sulu.rlp"/>
</property>
<property name="form" type="single_form_selection">
<meta>
<title lang="en">Form</title>
</meta>
<params>
<param name="resourceKey" value="page"/>
</params>
</property>
</properties>
</template>
Then register this template as the base template for your website.
### <your-sulu-base-dir>/config/webspaces/website.xml
<default-templates>
<default-template type="page">default</default-template>
<default-template type="home">homepage</default-template>
<default-template type="form">contact</default-template>
</default-templates>
Then create a page template where you can display your form
### <your-sulu-base-dir>/templates/pages/contact.html.twig
{% extends 'base.html.twig' %}
{% block style %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<style>
/* These are mainly for the blog styles, which usually I put into a CSS file. For the sake of this example, I'll just embed it here */
:root {
--bulma-family-primary: "Kumbh Sans", sans-serif;
--bulma-family-secondary: "Lato", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--bulma-family-secondary);
}
h2 {
font-size: 2rem;
margin-top: 1rem;
}
p {
margin-top: 0.8rem;
}
</style>
{% endblock %}
{% block header %}
<header class="section has-background-link">
<div class="container">
<nav class="navbar has-background-link" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item has-text-white-ter" href="{{ sulu_content_root_path() }}">Hostinger Sulu</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="topNavbar" class="navbar-menu">
<div class="navbar-start">
{% for item in sulu_navigation_root_tree('main', 1) %}
<a class="navbar-item has-text-white-ter" href="{{ sulu_content_path(item.url) }}" title="{{ item.title }}">{{ item.title }}</a>
{% endfor %}
</div>
</div>
</nav>
</div>
</header>
{% endblock %}
{% block content %}
<section class="section is-medium">
{% if content.form %}
{% if app.request.get('send') != 'true' %}
{# FORM THEME #}
{% form_theme content.form '@SuluForm/themes/basic.html.twig' %}
{{ form(content.form) }}
{% else %}
{{ view.form.entity.successText|raw }}
{% endif %}
{% endif %}
</section>
{% endblock %}
{% block footer %}
<footer class="footer has-background-link">
<div class="container">
<p class="has-text-centered has-text-white-ter">Copyright©2025 Mr. D Loves Website. All rights reserved.</p>
</div>
</footer>
{% endblock %}
That’s it. All that you have to do now is to create a form and then, select that form in this Contact Page template to display it from your website.
Posted in Sulu CMS