Give More Style to Your Comment Form in WordPress

One of the most exciting things that may happen when you have a blog and write on it regularly is to receive comments from readers. But for this to happen the content you write must be interesting and the form for submitting comments must be visible and attractive enough for the visitor to fill it in and submit it.

In this post that belongs to the series of the test of the month we are going to try to highlight the comment form of our blog by giving it a little redesign to see if it works better than the current version.

As always, we will test the changes using the A/B testing technique. It is the best way to see with real data from the visitors of your website if the changes you make work or not.

Improving the design of the WordPress comment form

Our comment form is pretty simple. By default WordPress adds a field to input the website of the visitor who comments, but we believe that this field does not add any value. On the contrary, the only thing that attracts is spam comments from bots who want to get a link at all costs. For this reason we have removed it from our original form.

In the following comparison you can see the original version of our blog comment form and the variant with the changes we have made. Remember to slide the handle that appears in the center from one side to the other to see the two versions:

We have basically made three changes to the comment form:

1. We’ve added a couple of emojis to the title to highlight the comment area and encourage visitors to write. It now seems we are waving and encouraging them to write with the emoji of the greeting and the hand writing. People like emojis. We will see if this helps to have more comments.
2. The legal text in which we explain where the comments are stored when filling in the information uses a smaller font. It has to be there for legal reasons, but we don’t want to give it so much relevance.
3. We turn the submit button of the form to an orange color that stands out. As we saw earlier, colors are important.

Now that we have the new design ready, what we have to do is test it.

Creating an A/B test of CSS styles

To test this design change in the comment form of our blog in WordPress, the simplest thing is to use an A/B test of CSS rules. Version A of our website is the one with the original form, while version B will contain the additional CSS rules to achieve the three changes in the form design that we have anticipated before.

With Nelio A/B Testing, we create a new A/B test of CSS. The next image shows the edit screen of such test:

We name the test (“Highlight comments form”, in our case) and the variant (“Redesigned comment form”). We can also add a description to the test in the corresponding field on the right sidebar. In the previous screenshot you can see the description we added, which serves as a reference for any user who is going to see the test in the future.

We have also reduced the scope of the test to URLs that contain https://neliosoftware.com/blog/, so that the test only applies to posts in our blog.

As a conversion action we have established the click on the submit button of the form. Every time a visitor clicks that button, we will count a conversion in the test for the variant that visitor is viewing.

Before finishing, we have to go to edit variant B of the test. We hover the mouse over this variant and the option to edit it will appear. Once we click it, a CSS editor with a preview opens, as you can see in the following screenshot:

As you can see, in the left sidebar we have the CSS editor in which you can write the specific rules that make the changes in the design that we saw before. In addition, on the right side you can browse your website to preview the result of these changes. With only need six simple CSS rules to redesign our comment form.

When we finish, we save and go back to the A/B test editor to start it. Now we only wait for visitors to visit our posts. Each visitor will either see the original version of the form or the version with the redesign. This is done by Nelio A/B Testing by itself, without you having to do anything.

Nelio A/B Testing

I was very impressed by the quality of this plugin, how easy it was to set up, and the outstanding support Nelio provides. I highly recommend Nelio A/B Testing.

Josette Millar

WordPress.org

View Plans

Analyzing the A/B testing results

We have had the test running for about six weeks, analyzing almost 20,000 visitors to our blog (a nice sample of the population). You can see the full results of the A/B test in the following screenshot:

The total number of conversions the test has received is not spectacular. In that time our blog has received 27 comments (that’s why there are 27 conversions in the test results).

But what should be noted is that the variant with the redesign of the comment form has managed to double the number of conversions of the original version. Therefore, it is the winning option of the A/B test, with a high statistical confidence value.

As you see, small changes in the designs, which can be achieved with few CSS rules, can have a direct impact on the results of your website. We have applied this variant on our website by adding the additional CSS rules in our theme.

A more elaborate design encourages interaction

Design is key to modify the behavior of our website visitors. Getting a design that works better than the current one does not have to be resource intensive. Here we have seen that with a few simple CSS rules we can make changes that give us results quickly.

Applying changes in the design of our website is something we should do with care. That is why we have used an A/B test. Thanks to this technique, we can check with real data from our visitors if the changes work or not. Otherwise, we will not know if we have chosen a correct path of improvement or we are going backwards.

Featured image by Jason Leung on Unsplash.