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
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 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.
On my current project, the user clicks on "Save Changes" on what they are editing, and it is further down the page where the edit box, saved text, etc... pops up. Is there a way I can have the site retain its page location in order to auto-scroll them back down to where they clicked edit?
Ideally I'd have some type of solution where the page wouldn't have to reload but I don't know how to do that, lol.
My site is coded in PHP.
Thanks
There is one functionality in Html to position your page with the help of using (#).
For example considering the following scenario where your Edit button resides
<div id="editButton">
<input type="button" name="Edit" value ="Edit"/>
</div>
If your page name is "index.php" and you redirect with url : "index.php#editButton"
Your page will automatically scroll to that section without much efforts.
It identifies the id of the element and put the scroll up to that position.
Cheers
You might want to have a look at some tutorials on how to save a form via AJAX. This will mean you aren't POSTing the page, and therefore it won't refresh and the user won't lose their position on the page.
http://www.jstiles.com/Blog/How-To-Submit-a-Form-with-jQuery-and-AJAX
http://www.devblog.co/easy-jquery-ajax-php-contact-form/
I have simply put name of ID selector in form action:
<form class="form-horizontal" method="post" action="#regform">
And it works for me.
Yes, it is good to have that approach.
Rather than complete redirection, only a chunk of data should be sent over and uploaded accordingly.
For this, you need http://www.w3schools.com/ajax/default.ASP
then, learn jQuery (hope you familiar with what is an id and class in CSS)...
http://api.jquery.com/jQuery.ajax/
Cool?
If you have multiple forms on one page, you could add name attribute of that form to link. e.g.
<form name="my-form1" action="form.php#my-form1">
I guess this should work.
Another way is to consider using Ajax, so you dont have to reload page at all, or you can create javasscript function that will be called on form submit and will add current page position in hidden input. After page reload, you can scroll to original position using value from that hidden input.
Yes, use Ajax to update the page partially. This is the way to do it in any web technology.
I am trying to get people that are not logged in to log in by linking them to the log in fields in the sidebar.
So far I managed to accomplish this:
<?php comment_form(array(must_log_in => sprintf(__('You must be logged in to comment.')))); ?>
So I am using the Login with AJAX widget, or I could just place the plugin's template tag in there which is <?php login_with_ajax() ?>. Right before the widget I have placed <a name="reg"></a>, so when they click the link to log in they get to where the log in form is, but they are not placed in the username field. Is there a way (I doubt it) where I can place the focus in the username field? That is to have a blinking cursor in there?
"It is not possible" is also an acceptable answer, so I can move onto my next problem.
Assuming something like <input type="text" id="username">, you could use
document.getElementById("username").focus();
in JavaScript.