I'm adding reviews functionality to a website. Currently, the form where users can enter a review and/or rating looks like this;
When the user clicks one of the rating stars, the page makes an ajax request in the background that submits this rating, then pops up with an alert box informing the user that "Your rating was saved successfully!" and the "Rate Now:" message changes to "Your Rating:" after the alert has been exited. This happens nearly instantly.
However, some of my test users have been submitting the whole form needlessly and causing blank reviews to show up in the site (I'm guessing because they think they need to click "submit" for the rating to count as well). While obviously I'll fix the backend so that it will reject blank review submissions, I'd like a way to make it clearer to new users that these are two separate entities and they can exist without each other (reviews without a rating are fine, and you don't have to write an essay to vote).
My first thought was to move the rating stars away from the reviews box, into the box where the item and its details appear. However, if a user submits a review, their rating is shown alongside it, so they do need to look like they're connected, while still making it clear that both are optional.
Thanks in advance for any suggestions you might have.