> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.stylishcostcalculator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Frontend Problems: Issues with the calculator loading on the website


# ${color}[#314AF3](Does your calculator work in the backend (dashboard preview)? )

If the calculator form looks good inside the calculator editing screen but has issues on your website's front end, these problem is almost always a conflict from your **theme** or **other plugins**. Or, you did not **embed the shortcode properly**.

By comparing the form's backend and front-end appearances and functionality, you can identify theme-related issues and take appropriate steps to resolve them.

The backend preview exclusively loads the CSS and JavaScript resources associated with our plugin. If the calculator form functions properly in the backend, this suggests that there are no bugs in our plugin.
---

### a. No - the calculator form has errors in the backend preview

Sorry that you're experiencing some difficulties. Can you please send us a **video** showing the problem?

1. You can **record** your screen here - [screenapp.io](https://screenapp.io/)
2. You can **upload and send** the file here [streamable.com](https://streamable.com/) (alternatively, [file.io](https://www.file.io/))
3. Send the file through our [support ticket form](https://stylishcostcalculator.com/support).
---

### b. Yes, it looks good in backend, but it doesn't look good on the front end

If your calculator works in the backend preview but not the front end, then the problem is with your theme, plugins, server-level cache, or plugin-level cache, or you didn't embed the shortcode properly.

**Please proceed to troubleshoot.**
---

# ${color}[#314AF3](Troubleshooting)

### Step 1
Turn off plugin-level cache plugins. (WP Rocket, Autoptmize, WP Fastest Cache, etc.)  
Does this fix it?

* If yes, then create an [exception for your cache plugin](https://designful.freshdesk.com/a/solutions/articles/48000950262).
* If no, proceed to **step 2**.

### Step 2
Turn off or flush the server-level cache.  
Does this fix it?

* If yes, then talk to your hosting company about how to flush this or turn it off.
* If no, proceed to **step 3**.

### Step 3
Turn off your other plugins in groups of three at a time.  
Does this fix it?

* If yes, then [report to us](https://stylishcostcalculator.com/support) which plugin has the conflict.
* If no, proceed to **step 4**.

### Step 4
Temporarily switch your theme to [Twenty-Twenty](https://en-ca.wordpress.org/themes/twentytwenty/).  
Does this fix it?

* If yes, then talk to your hosting company about how to flush this or turn it off.
* If no, proceed to **step 5**.

### Step 5
Sorry that you're still experiencing some difficulties. Can you please send us a **video** showing the problem?

1. You can **record** your screen here - [screenapp.io](https://screenapp.io/)
2. You can **upload and send** the file here [streamable.com](https://streamable.com/) (alternatively, [file.io](https://www.file.io/))
3. Send the file through our [support ticket form](https://stylishcostcalculator.com/support).
---

## ${color}[#314AF3](Notes)

1. Don't embed the shortcode in any pop-up modal plugins.
2. [Embed the shortcode](https://designful.freshdesk.com/a/solutions/articles/48000945180) using the proper widget of your page builder.
---

## ${color}[#314AF3](Additional Information)

### All Elements & Features

Learn more about [All Elements](https://designful.freshdesk.com/a/solutions/categories/48000446985/folders/48000683568)  
Learn more about [All Features](https://designful.freshdesk.com/a/solutions/categories/48000446985/folders/48000658562)

### Need Support?

Ask a [question or request support](https://stylishcostcalculator.com/support)  
Request [a feature or give feedback](https://stylishcostcalculator.com/how-can-we-be-better/)

[![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48333468568/original/bTbdA5Q8kUQHZGvqUMYpK6RM6XpRRQItkQ.png?1712885072)](https://stylishcostcalculator.com/features/)

[![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48333468566/original/UgSPRZYVb9rL_mLMxmdxozDNuUTsZebfyw.png?1712885072)](https://stylishcostcalculator.com/use-case/lead-generation-software-wordpress/)