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 ?

 

[AI Helper]

Clickable images that scroll + preselect a dropdown

Elementor Free doesn’t include the Elementor Form widget (that’s Pro),so if you’ve built the “form” from basic elements (HTML widget, inputs, etc.),there’s no built-in form state management. Your current script sets a hidden input, which won’t update a visible select UI unless you also set the actual <select> value (and sometimes trigger a change event). If your “select” is not a real <select> (some widgets render a styled div),setting a hidden field won’t ever make it look selected.

Try this approach: pass the topic in the URL, scroll to the form, then set the real select value and trigger change. Put this in an HTML widget near the footer, or enqueue via your child theme. Backup first, and test on a staging copy.

<script>
document.addEventListener('DOMContentLoaded', function (){const offset = 120;
  const params = new URLSearchParams(window.location.search);
  const topic  = params.get('topic'); // e.g. "Legal Support"
  const formSection = document.getElementById('contact-form');
  if (formSection && topic){const top = formSection.getBoundingClientRect().top + window.pageYOffset - offset;
    window.scrollTo({ top, behavior: 'smooth' });
  }
  // set select (update selector + option values to match your markup)
  const trySet = setInterval(() => {
    const select = document.querySelector('select[name="topic"]');
    if (!select) return;
    // match by option text (or switch to matching by value)
    const opt = [...select.options].find(o => o.text.trim() === topic);
    if (opt){select.value = opt.value;
      select.dispatchEvent(new Event('change',{bubbles: true }));
    }
    clearInterval(trySet);
  }, 150);
  setTimeout(() => clearInterval(trySet),8000);
});
</script>

Then link your header images like:

<a href="/your-page/?topic=Legal%20Support#contact-form">...</a>

If you’re using a 3rd-party form plugin (Contact Form 7 / WPForms / Fluent Forms),tell me which one—each has its own “set default value” method, and a plugin-based solution is often cleaner than fighting a custom “fake select” UI.