Creating an error reporting popup with Wordpress Flatsome and Contact Form 7
Tags: wordpress, flatsome, popup, ux
Published: 2023-08-31 03:08:08

My website [Model Prices](https://www.modelprices.com/) index model train prices from 1,200+ shops from all over the world.

All the indexing is done by some big algorithms and just like any other code, things might go wrong once in a while.

For example, a price might be indexed under the wrong model train model or I might index the wrong price amount.

Most things that go wrong are caught by my algorithm and fixed automatically, but sometimes errors pass through without me noticing it.

Not so good if you want to make a useful website 😅

## Why an error reporting popup?
To take care of the errors that pass through, I decided to make an error reporting popup. That is a link that the users can click, so a popup appears with room for describing the error and clicking submit to send me the report by email.

First I started coding the popup myself, but then I realized that Flatsome, fantastic Wordpress theme I'm using, have a lot of built-in functionality. Including a simple way to make a popup.

## Show the popup
First, I added the popup code to my product page code. That is the code to pages like [this one](https://www.modelprices.com/p/roco-71976/).

The notoriously thin Flatsome documentation shows the basic version of the lightbox code [here](https://docs.uxthemes.com/article/229-lightbox-shortcode), so I just modified that a bit:

```
[lightbox id="lightbox_price_error" width="600px" padding="20px"]
	<h4>Found an error 😮</h4>
[/lightbox]

```
Since I added it to my product page code, I wrapped it in `do_shortcode()` like this:

```
function fh_get_product_page_error_popup() {
    $popup_code = '[lightbox id="lightbox_price_error" width="600px" padding="20px"]
            <h4>Found an error 😮</h4>
        [/lightbox]';

    return do_shortcode($popup_code);
}
```

## Click to show the popup
Now I had a first version of the popup that I could use to test things, i.e. see if the popup would actually appear or not.

It was now time to make a link that my users could click on to show the popup. Again, easy to do thanks to Flatsome:

```
<b style='color:#000;'>Found an error? 😮</b> <a href='#lightbox_price_error' class='fh-underline-link'>Please tell me</a>
```

I added this to link to the product page code too, so users now would see this when they clicked the "See Deal" buttons (or actually they would if I uploaded the code. My development if of course done locally, so I don't mess up the code my users are seeing).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gxd3j0danfiejaj58ka.png)

And when they clicked the link, the popup would appear:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dniuga29b7z25b6ich56.png)

Great stuff.

## Adding the contact form
The purpose of creating the popup is to allow my users to report errors, so now it was time to add a small contact form. Create the form with Contact Form 7 like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2roe5ju5mbfjpv4ylur.png)

And added the contact form to the popup by modifying the shortcode in my product page code like this:

```
function fh_get_product_page_error_popup() {
    $popup_code = '[lightbox id="lightbox_price_error" width="600px" padding="20px"]
            <h4>Found an error 😮</h4>
            [contact-form-7 id="***" title="Price Error"]
        [/lightbox]';

    return do_shortcode($popup_code);
}
```

Testing again and now a nice form with two fields and a button appears when users click the link from above:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r9wrttjqquedng5k9fl.png)

## Sending data to the popup
For the error reports to be useful, I needed to know which products and prices they belong too. Luckily Contact Form 7 forms can have hidden fields, so I added two of those. One for the product id and one for the price id, like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71aekh08d2dloinm67qe.png)

Also edited the shortcode a bit, so it now had the two extra fields:

```
function fh_get_product_page_error_popup() {
    $popup_code = '[lightbox id="lightbox_price_error" width="600px" padding="20px"]
            <h4>Found an error 😮</h4>
            [contact-form-7 id="8edf729" title="Price Error" product_id="-" price_id="-"]
        [/lightbox]';

    return do_shortcode($popup_code);
}
```

Final step is to send the ids to the form when the popup is opened. This could be done by following [the instructions here](https://contactform7.com/getting-default-values-from-shortcode-attributes/) - and when doing so, remembering to tag the fields in the contact form with `default:shortcode_attr` (my hidden fields weren't filled out to begin with because I forgot this).

Also remember to implement the `shortcode_atts_wpcf7` filter as described in the Contact Form 7 instructions 🙂

## Testing it all
That's it. Uploaded to production and now my users can (and do) report errors, so I get emails like this one I just submitted myself.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0390m2lpcdqv7zy49lg.png)

The from field at the top would be filled out if I had writing anything in the form's email field. Since I did not, the field is empty.

Notice the link directly to the product from where the form was submitted. Easy to add to the email with the '[_url]' parameter in Contact Form 7. Like this on the form's mail tab:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7wp2wo2p2s22k54zev6.png)