Team

Solutions

Work

Blog

Engage

Team

Solutions

Work

Blog

Engage

How to create gratitude wall using Elementor Pro and Contact form 7

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Here is an interesting feature you can add to your community websites. Allow your members to post what they are thankful for and showcase their messages on the ‘gratitude’ wall on your website. We searched for the plugins in the WordPress directory that could help us, but couldn’t find the one that meets our needs so we decided to build a custom solution.

Plugins that we used for this solution are:

  1. Elementor Pro Page Builder – Elementor is probably the most popular drag and drop page builder for WordPress. It comes with a powerful and widget rich free version and even more advanced PRO version which we need since it has Posts widget that we’ll utilize for showcasing the messages of gratitude. Additionally, we’ll use Elementor Popups to place a form for adding new messages of gratitude.
  2. Contact Form 7 – this is one of the most popular free plugins for managing multiple contact forms on the website, it offers a high level of flexibility and possibility for customization. You can download it for free from the WordPress plugin directory or install it directly through your WordPress Dashboard. We will use this plugin to create a form which members will use to share what they are grateful for.
  3. Post My CF7 Form – this is a free WordPress plugin that enables turning form fields to post fields. Each submitted form will be saved as a new post type or added to an existing post type. Submissions are saved and managed from the WordPress Dashboard. It’s mainly designed for developers, but don’t worry if you aren’t one.

We will show you how to configure and use these plugins and provide you with all the custom code for this solution to work.

Install and activate plugins

Let’s start by installing and activating plugins we talked about. We will present you with a couple of options so you can choose the one that works best for you:

  1. Install the plugins from your WordPress website Dashboard using the Search plugins feature. From the WordPress Dashboard, navigate to Plugins -> Add New and type in the names of plugins we mentioned above, one by one, in the search bar. You can use this method to install Elementor Free and two Contact Form 7 plugins.
  2. Download the plugins’ .zip file from the WordPress.org directory by following the links we provided and install them by using the Upload plugin feature by WordPress. Elementor Pro is a premium plugin and you will need to purchase it from the Elementor official website and use this method to install it. We provided the download link when we talked about this plugin specifically, but here it is again.
  3. Install the plugins by using FTP (File Transfer Protocol) or SFTP (Secure File Transfer Protocol). FileZilla is one of the most used software solutions for file transfers if you prefer to use this option.

After installations are complete, activate installed plugins.

Create a form for posting new messages of gratitude

The first step is to create a new form by using the Contact Form 7 plugin. We will use this form to allow members to post their messages of gratitude. From WordPress Dashboard navigate to Contact -> Add New:

We only need two fields in this form:

  1. A text field that will be used for the title. We are calling this “I’m thankful for:“, here members will enter in one or two words what they are grateful for. For example Love, Family, Holidays etc. We are making this field required by adding * sign next to the field type.
  2. A text area field that we are naming “Why:“. In this field, members can explain why are they grateful for the words/short phrases they used in their title. This will also be a required field and we are going to limit the number of characters members can enter here from 10 to 140. To accomplish this, we are adding two parameters inside the field minlength:10 and maxlength:140. There is also a parameter x4 which will make the height of the form equal to 4 rows.

We are naming this a Gratitude form and saving it by clicking on the Save button.

Set up form mapping to custom post type

We will now start working with Post My CF7 Form plugin settings. Options for this plugin are added to Contact Form 7 interface. To access them navigate to Contact -> Contact Forms to open all available forms:

Find the form you created for posting messages of gratitude and look for Create new button under Form to Post title.

Click on this link and you will see all available options for Post My CF7 Form. While there are many options here that you can use to make your post more or less structurally complicated, we are going to go with the most basic setup for our solution.

Default post fields – this is the place to assign form fields mapping to post elements. We are assigning gratitude title to Post title and gratitude message to Post Content. The post author field will stay empty and that will result with automatically assigning gratitude writer as a post author. This is plugin’s default setting but, if needed, you can easily change it.

Custom Meta Fields and Taxonomies we won’t utilize in this case, but you can always use them for your website. Find out more about them here.

Save the form to post – you will need to specify a couple of things here:

  1. Post type pinned – choose to create a new custom post type for your messages of gratitude or use already available post type on your websites like Posts, Pages, Portfolios… We want this to be a separate post type, for simple management and filtering. If you decide to use an existing post type, you will only need to select one. Next steps are for the new custom post type.
  2. Post type – specify the slug for your new post type. We want to be able to find it easily in the menu so we are naming this one simply gratitude. This is also important for later as we will need to call this post type in custom functions we will need to add.
  3. Singular name and Plural name are self-explanatory to add.
  4. Attributes – we are leaving default setting and only checking show_in_nav_menus to add new custom post type in Dashboard.

Make sure to double-check your settings before clicking on Publish Map button since there isn’t an Edit option for these settings. After our mapping is finished, you will see a new navigation item in the WordPress Dashboard called Gratitudes.

Create a popup for gratitude form

Instead of placing the form on some page or gratitudes archive for this, we will use Elementor Popup that opens when a user clicks on a button on the gratitude wall page. To create a new popup go to Elementor Templates -> Popups:

Click on Add new popup button.

Select Popup as a template type and type a name for your template. Our name is Gratitude form popup. Click on Create Template button.

You can choose to insert a popup design from predefined templates or create a custom one. We went with option two. Our popup settings are simple:

  • Width of the popup is set to 400px.
  • Height is Fit to Content.
  • The popup is positioned on the right side of the screen in the middle of the vertical axis.
  • We added some basic entrance and exit animation in slide behaviour.

We created a very basic popup layout, but if you want this is a place to unleash all the creativity you have and style you popup as you like. Our elements are in Navigator and the popup preview is on the left.

When you finish designing your popup click on green Publish button on the page left bottom corner. You will see popup Publish settings.

Leave Conditions and Triggers empty and just click on the Save & Close button at the bottom.

Add some messages of gratitude and control publish status

Before we start working on gratitude wall page we will add some messages of gratitude from the backend to have something to work with. From the WordPress Dashboard navigate to Gratitudes and click on Add New.

Insert title and content and click on the Publish button. Repeat this step couple of times.

When you create a new custom post item from backend, you can control its status – Draft or Published. But when you add a new gratitude item by filling out the form we set up, the default status for the message is Draft. To change this default behaviour add the following code to your theme’s functions.php file (Appearance -> Theme Editor).

// Changes Gratitude default status from draft to publish
add_filter( 'cf7_2_post_status_gratitude', 'publish_your_custom_post',10,3);
function publish_your_custom_post($status, $ckf7_key, $submitted_data){
  return 'publish';
} 

Make sure to replace post type slug in filter cf7_2_post_status_gratitude if you named your custom post type differently. Replace gratitude with your slug name. After this code is added, new form submission will be automatically set to published.

Create a Gratitude wall page

From WordPress Dashboard navigate to Pages -> Add New. Name your new page Gratitude Wall or what you prefer and click Publish. After that, click on Edit with Elementor button.

Here is how you can add and customize Posts widget to showcase messages of gratitude we created previously:

If you prefer to follow written instructions:

  1. Drag and drop Posts widget to page content area.
  2. Jump to Query settings and change the metadata source to be Gratitudes.
  3. Choose Cards for Skin option.
  4. We increased to 9 posts per page just to show everything we created for this demo, but you can adjust this as you see fit.
  5. By default, Posts widget shows date and comments for post metadata. We need the date but not the comments so we removed them. Instead of comments, we added the visibility of the Author of the message.
  6. We don’t need Read More, Badge or Avatar box so we removed them.
  7. Under Style options, we added background color for the card.
  8. We changed the color of the card Title and increased font size for Excerpt which is used to show gratitude content.
  9. Save these changes by clicking on the Update button.

You will see something similar on your website frontend, but there might be some variations depending on your WP theme:

Let’s make this a bit more stylized by adding some background image to the entire page. It can make a lot of difference from a UX perspective:

Add button for gratitude form popup

We are almost finished. What we need now is to add a button on the Gratitude page that will be used for opening the popup with the form for adding new messages of gratitude. Here is how we do that:

There are two important settings to cover for this button:

  1. Button Link – you will need to use Dynamic Tags and under Actions choose Popup. Search for the name of your popup with gratitude form and add it here. Button action needs to be Open Popup.
  2. Button Positioning – These settings are located under the Advanced tab. Choose Inline for button width and make its position Fixed. Move it to the right in horizontal positioning and bottom for vertical positioning. Add some offset in your preferred units to move button away from page borders. We applied simple 40px for both orientations.

Button stylization is completely up to you. Your page should look like this:

A simple click on the button we’ve added should open a popup on the right side of the page. This will be enough to have a fully working solution, but there is one more detail we think can improve the user experience for the ones who add new messages.

Add redirection to page after form submission

One more thing we want to add inside functions.php file is redirection to the page after form submission. We will redirect a user to the gratitude wall page that will cause the page to refresh. This works great in our case because the members will be able to see their messages right after they submitted them. The code for this is:

// Redirect to Gratitude page after the form is submitted

add_action( 'wp_footer', 'redirect_cf7' );
function redirect_cf7() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = '/gratitudes-wall/';
}, false );
</script>
<?php
} 

location = ‘/gratitudes-wall/’; – this line is most important for you and here you need to place URL of the page you want to redirect after form submission. Now let’s see this in action:

Conclusion

We hope you can use this solution for some of the ideas you have. You can utilize it for more than a gratitude wall on your website. We tried to be as detailed as possible and provide you with all the information you need to do to make this approach work.

Let us know if you found this article helpful and what type of content you used while applying this solution. If you have any additional questions, as always, leave a comment below.

Do you want our team to design and develop a stunning website for you? Send us the details and we'll start discussing a strategy for your project!
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.

Leave a Reply

Comments

  1. OH MY GOD!!!

    It’s just awesome.

    Keeping writing and showing such awesome step by step articles.

    Just loved the Gratitude Wall using, Elementor, CF7 and all.

  2. I have recently started a website, the information you offer on this website has helped me greatly. Thanks for all of your time & work.

  3. Wonderful post! We are linking to this great content on our site. Keep up the good writing.

  4. Major thanks for the article. Really looking forward to reading more. Much obliged. Molli

  5. Really appreciate you sharing this blog article. Really looking forward to read more. Great. Nickie

  6. I cannot thank you enough for the blog article. Much thanks again. Cool. Lucille Anatollo Bail

Leave a Comment

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email