Hyperlink in text component

[Vani1012]

Hi,

I have a text component on this page("/content/abc")  wherein I add link "contactus"(/content/abc/contact) using link option.

I opened the page(/content/abc) and clicked on contactus link then the page url changing from "content/abc" to configured page path that is /content/abc/contact.

Is this the expected behaviour.

I want the contactus form should open in the same path content/abc without changing path url

Can anyone help me

[Raja_Reddy]

Hi @Vani1012 

achieve the desired behavior of keeping the user on the same page while displaying the contact form, you can implement a method called "in-page navigation" or "modal window" approach.

JavaScript Modal Popup: You can use JavaScript to create a modal popup window that displays the contact form when the user clicks on the "contactus" link. This way, the user stays on the same page ("/content/abc"), and the contact form appears as an overlay on top of the existing content.

AJAX: You can use AJAX to dynamically load the contact form content into the existing page without reloading the entire page. When the user clicks on the "contactus" link, the contact form content is fetched from the server and injected into the current page, again without changing the URL.

Single Page Application (SPA): If your website is built as a single-page application, you can use client-side routing to handle navigation within the application without changing the URL. When the user clicks on the "contactus" link, the SPA framework (such as React Router for React.js applications) can render the contact form component within the same page without triggering a full page reload.

[Imran__Khan]

Yes this is expected as we provided the redirected link.

For SPA it will require changes for not to update the Url.

[Jvenkat · Accepted solution]

Hi @Vani1012 

If you want the contact us form to open on the same page without changing the URL, you may utilize some techniques such as modal pop-up windows or utilizing AJAX to load the form dynamically in-page.

HTML: <a href="#" id="contactLink">Contact Us</a>
<div id="contactForm" style="display:none;"> <!-- Your form goes here --> </div>

JS:

document.getElementById("contactLink").addEventListener("click", function(){
document.getElementById("contactForm").style.display="block";
});

AJAX:

$('#contactLink').on('click', function(e){
e.preventDefault();
$.ajax({
url: '/path-to-your-contact-form',
type: 'get',
success: function(data) {
$('#formContainer').html(data);
}
});
});

[kautuk_sahni]

@Vani1012 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.