edit: using wordpress:
I have a menu button called Contact me, that leads to a contact me page.
I also have 8 pages, with a contact me form at the very bottom.
Is there a way to change that menu button name contact me, to scroll down to the end of the page in use, no matter what that page is?!
the difference here is i dont have one constant jump to point, but the bottom of any page the user is currently using.
Set the link for the contact me menu to href="#contactmeform" or something similar, then wrap your entire contact form in a div with id="contactmeform"
This way the navigation link will take you to the element with that ID on the page you are on.
Make the href on the anchor text point to "/contact#contact"
Then add id="contact" on your contact form. This will the hash on the anchor will be used to scroll the page to that anchor point.
<body>
Contact Me
<a name="bottom">
<form id=contactMe>
</form>
</body>
Related
I followed the example here Yii2, feedback form in a modal window and I was able to create a contact widget that I added it above the footer of multiple pages on my website using the code <?= FBFWidget::widget([]) ?>.
I stripped the code of the modal box so I am not using that. The problem I am facing now is that whenever I opened a webpage, the page jumps straight to the contact form at the footer instead of showing the top of the page as a any normal browser should do.
I followed all the code as explained in the tutorial so I do not want to post all the codes here. Please see the tutorial
How can I stop this problem.
You are using autofocus property on the contact form field name which is forcing the page to go down as the cursor is focused inside the input field, you should remove that property or bind it only if the page url is /contact-us or whatever you are using for the contact form.
I am working on a website which is designed in wordpress. In my one page i have a form included which is
[contact-form-7 id="144" title="Contact Form"]
No from one page i want to redirect to this particular id, for which i am writing
<href="http:my_url/contact#144"> which is not working
i have also tried
<href="http:my_url/contact.php#144"> but giving me page not found 404 error.
So what i am doing wrong that i am not able to detect.
That ID is only the ID of the form you're pulling in, referenced internally by the plugin - it isn't output on the element itself. If you go into the inspector, it'll be something like wpcf7-f482-p481-o1, only with different letters/numbers after wpcf7. If you want to make a prettier link, just wrap the embed code in a div with an ID of your choosing and use that on the anchor.
You can't do this on a contact form 7 id.
Try:
<div id="cForm">
[contact-form-7 id="144" title="Contact Form"]
</div>
Then link to with Contact form
I am working with PHP codeIgniter currently.
In a webpage there is a footer which has got a subscription button with a text field. When the user clicks the subscription button with the text field empty the validations are initiated. However the redirection takes me to another part of the page and not to the footer.
I want to return to the footer on redirection. Can anybody suggest generally what needs to be done to get to the same part of the page from where something was initiated.
Any kind of help will be appreciated.
Yes you can do it by using id.
First add id in your footer div. I am using id name footerdiv in below example.
<div class="footer" id="footerdiv">
<!-- Your Subscription Form is here -->
</div>
Second when you are redirecting add #footerdiv with url
e.g. url#footerdiv
Use your footer id in your redirection address:
http://your_address#footer_id
This will scroll your page directly to your footer
I have created a single page portfolio template using Bootstrap framework from Twitter. I am having an issue that when I click on "Submit" button in the contact form, the page scrolls all the way to top. I have checked that I have not used any internal linking to top so I am not sure why this happening. My intention is to stay on the same page and show user some friendly message. Can anyone help me figure out the issue? Thanks in advance!
Template can be accessed at:
https://rawgit.com/gupta235/portfolio_template_bootstrap/master/index.html
I have made the template available on my github page: https://github.com/gupta235/portfolio_template_bootstrap
Forms typically send you to a new page. Since your form is all in one page, the "new page" its sending you to is the same one you were already on, and so it sends you to the first part of that page, which is the top.
You can prevent the page from scrolling to the top by giving the form an action ability that instead of sending you to a new page or the top of the current page, will take you to an id that you place somewhere on the page.
Same concept as putting an anchor point on your page and giving people an option to click a link that takes them to a certain part of the page.
For example if you change your form opening code from
<form method="post">
to this instead
<form method="post" action="#error-check" id="error-check">
This should take you to the form when you hit submit, instead of the top of the page.
A form without an action attribute is not a form, according to standards - and will actually cause a page reload in some browsers.. I've found that action="javascript:void(0);" works well.
FIXED, Wrapping the input tag with an anchor tag around it seemed to
have worked.
The question could sound a bit confusing, let me elaborate.
I have made a mail form with PHP. This form is all the way at the bottom of the page.
When I click send (this is an input tag), if there are errors, it will display them above the form.
But when you click on send the page will first go back to the top and you have to scroll all the way down to see if you have made any errors.
So is it possible to keep the page from jumping back the the start?
You could have a page anchor on the form and point at that anchor in the form action, something like this should do that for you.
<form action="someformaction.php#form-anchor" id="form-anchor">
</form>
Now when the form is submitted it should move the page down to where that anchor is.
By the sounds of it, you are submitting a normal form which in turn sends the email.
You can possibly put an anchor at the bottom of the page and have the action of the form point to it, so that your user will open up on that part of the page, or you could submit via a ajax instead which will not cause a page reload. Here are a bunch of tutorials you could adapt to your code.