Docs & Support

Learn about all the Formidable features and get support from our amazing customer success team.

ViewsView Examples
How to Create a Word Cloud

How to Create a Word Cloud

— Premium Feature —

Follow the directions below to create a word cloud on a page. Check out our own Word Cloud page.

Add word cloud shortcode

You can either insert this in the WPCode plugin (recommended), a child theme's functions.php, or your own custom plugin.

add_shortcode( 'word-cloud', 's11_word_cloud' );
function s11_word_cloud( $atts ) {
$atts = shortcode_atts( array(
'words' => 'Awesome, Fabulous',
'colors' => '#21759b, #d54e21, #464646',
), $atts );
$colors = explode( ',', $atts['colors'] );
$words = array_filter( explode( ',', $atts['words'] ) );
$words = array_map( 'strtolower', array_map( 'trim', $words ) );
$words = array_map( 'ucwords', $words );
$word_counts = array_count_values( $words );
$sorted = $word_counts;
arsort( $sorted );
$highest_count = reset( $sorted );
$max_size = 75;
$min_size = 10;
$step = absint( ( $max_size - $min_size ) / $highest_count );
$weighted = array();
foreach( $word_counts as $word => $count ) {
$weighted[ $word ] = $min_size + ( $step * $count );
}
$color_pointer = 0;
$all_words = array();
$cloud = '<ul class="s11cloud">';
foreach ( $weighted as $word => $size ) {
$all_words[] = '<li style="font-size:' . absint( $size ) .'px;color:' . esc_attr( $colors[ $color_pointer ] ) .'">' . trim( $word ) . '</li>';
$color_pointer++;
if ( ! isset( $colors[ $color_pointer ] ) ) {
$color_pointer = 0;
}
}
shuffle( $all_words );
$cloud .= implode( ' ', $all_words );
$cloud .= '</ul>';
s11_add_cloud_style( $cloud );
return $cloud;
}
function s11_add_cloud_style( &$cloud ) {
$cloud .= '<style>ul.s11cloud {
max-width: 500px;
padding: 30px 10px;
text-align:center;
margin:0 auto;
line-height: 1;
}
.s11cloud li{
display:inline-block;
list-style:none;
padding-right:3px;
}
</style>';
}

Formidable Forms makes advanced site building simple. Launch forms, directories, dashboards, and custom WordPress apps faster than ever before.

Create Form to collect words

  1. If you haven't yet, create a form with a field that will collect the entries that you want to be displayed in the word cloud.
  2. You can either have your users submit entries to your form or import your own entries via CSV. How to Create a Word Cloud Create Form

Create View to display the word cloud

  1. Now that you have a form set up, start with the instructions to create a view.
  2. Go to Formidable → Views. Click the Add New button at the top of the page. How to Create a Word Cloud Create View
  3. Select Grid for the View type. How to Create a Word Cloud Create View Format Grid
  4. In the Before Content box, add the following:
    [word-cloud words="

    How to Create a Word Cloud View Before Content

  5. In the Listing Page Content box, add the following:
    [125],

    How to Create a Word Cloud View Listing Page Content Replace 125 with the ID or key of your word

  6. In the After Content box, add the following:
    "]

    How to Create a Word Cloud View After Content

  7. Click Update to save your View and publish it on a page. When the page is visited, it should look something like this: How to Create a Word Cloud Example
Was this article helpful? *

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

In this article

    We have a small, but amazing team of dedicated people who are committed to helping you achieve your goals and project requirements.


    Copyright © 2025 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.

    Join 400,000+ using Formidable Forms to create form-focused solutions fast. Get Formidable Forms