Clickable images that scroll to a form and preselect a dropdown option

[Victoria]

Hi everyone,


I’m working on a WordPress site using Elementor Free and I’m trying to implement the following behavior:


Goal

• I have several images in the header (e.g. General Query, Legal Support, HR Recruitment, etc.).
• When a user clicks an image:
  1. The page should scroll automatically to a contact form further down the page.
  2. A topic/select field in the form should be automatically set based on the image clicked.

Example

• Clicking “Legal Support” image
  → scrolls to the contact form
  → form topic should be set to “Legal Support”

I have created the form with Elementor elements and created the code to link the topics.
<script>
document.addEventListener("DOMContentLoaded", function() {
const offset = 120; // adjust if you have a sticky header

// Scroll to the form
const hash = window.location.hash;
if (hash.startsWith("#contact-form")) {
const formSection = document.getElementById("contact-form");
if (formSection) {
const top = formSection.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({ top: top, behavior: "smooth" });
}
}

// Extract topic from hash: #contact-form-legal
const parts = hash.split("-");
if (parts.length < 2) return;
const topic = parts[1]; // e.g., "legal"

// Wait until the hidden field exists
const interval = setInterval(() => {
const hiddenField = document.querySelector('input[name="topic_hidden"]');
if (hiddenField) {
hiddenField.value = topic;
clearInterval(interval);
}
}, 100);
});
</script>
Could you please help me to do as I don't get anywhere till now?The select field options exist, but the field remains visually empty by default and does not show the selected option programmatically.Is this a limitation of Elementor Free forms, where select fields can’t be preselected visually via JS or I am doing something else wrong? Thank you very much in advance.

 

[Community]

@AI Helper Whats your views ?