Changing the position of the Feedback button

Hello JotForm Support,

I would like to "ping" this question again: there has been no change to the form template as pictured above, however,  is there a way to implement a finer control through css over the position of the feedback button?

My website is somewhat narrow - I would like to position the button on the side of the website - not at the rim of the screen. How could that be achieved?

Any hint is highly appreciated. Website is: www.freiburgerleben.de

Thanks

Cris

Hello Cris,

Yes it is possible to achieve your requirement by adding custom css code in your web page (NOT in form). Please add the following custom css code in your web page to change the position of your feedback form button:

a#jotform-feedback-50244440559352 {

top: 0px !important;

margin-left: -96px !important;

}

Please change the value of "top" & "margin-left" px value to change the button position.

Hope this helps.

Do get back to us if you have any questions.

Thank you!

Hi Ashwin,

(late) thank you for your solution that works fine!

However, the margins are calculated off the screen borders.
So, depending on screen resolution the feedback button is placed in different positions in relation to the website that has a static width.

Do you think you could help me out again with a hint on how to define the margins perhaps in relation to the horizontal and vertical centerline or otherwise a way how to position the button in absolute coordinates?

Thanks again!

Kind regards,

Cris

I'm sorry, I'm not sure I understand your concern completely. 

I have checked your website and the feedback button (Anfrage) remains at the topmost center of the page even I resize the page or scroll it vertically or horizontally. I believe it is set to be fixed also.

Is this not what you would like to happen? If not, can you help us by elaborating your request more so we can further help you? 

We will wait for your response. Thank you.

Thanks you for your reply.

You are right, the "Anfrage" button works as expected.
It is placed at the top of the page simply because that is the only position where I managed to make it work.. and it is okay to leave it there.
But I would like to add another response button that should float at the right /left or bottom border of the website (not at the border of the screen). 
It it probably a trivial problem... yet I kindly need to ask for help.

Following works in terms of getting the button to the right position (independent of the scree width), but unfortunately the button fills out the entire height of the screen:

<style type="text/css">
a#jotform-feedback-50244440559352 {
position: absolute;
right: 590px;
}
</style>

<script src="https://form.jotformeu.com/

... 
buttonSide: "left", 
buttonAlign: "top", 
...
}); </script>

Thanks again.

Could be possible to have the URL where the form is embedded? 

So we can make some tests and provide an accurate answer.

You may try using this CSS code:

a#jotform-feedback-50244440559352 {
position: absolute;
right: 590px;

height: 200px;

}

Replace the highlighted value with one that adjust to your website.

Hope this helps.

Thanks Kevin,

height: 200px; works but  what needs to be reduced is width.

width: 200px; also works - but if applied then

 right: 590px; gets overwritten - that 's somehow the problem

website is updated now to illustrate the problem

Could you try with this CSS code? 

a#jotform-feedback-50244440559352 {

    left: 180px !important;

    height: 200px;

    width: 200px;

    top: -150px !important;

}

You may play with the values and see how it changes the position of the button.

Hope this helps.

Thanks, but unfortunately above settings don't change anything (see stretched button on website).
Any other ideas perhaps?

Hello nH,

Where have you added the custom css code in your webpage? I did check the source code of your webpage where you have the feedback form ut could not trace the css code which my colleague shared.  

The custom css code needs to be injected in your webpage (not in form). Please add the custom css code in your webpage and see if that solves your problem.

Thank you!

Hello again,

sorry as the website is "live" I didn't want to leave it too messed up at daytime.

I have now included the css code as mentioned above.

However, I had to take out:

top: -150px !important;  (otherwise the button would not appear)

and also: height: 200px; (not needed; makes button too wide)

So, with:

<style>

a#jotform-feedback-50244440559352 

{

    left: 250px !important;

    width: 200px;

}

</style>

the button looks good - albeit the initial problem still persists:
The button is positioned relative to the width of the browser window, hence the button appears somewhere between the left side of the webpage and the left border of the browser.
Changing the value width:  ... px; moves the button but the position remains relative to the browser width.

I would like the button to always appear on the left rim of the webpage (no matter what the width of the browser window is set to).
Is there any way to achieve that with the jotform button?

Thanks again for your time!

This is quite odd, the button is changing its position based on the screen width, it should stay always on the left side of the screen.

I think that this is happening because the feedback button is being placed based on the position of the element where it is being added. 

I'm not sure how are you adding the button to your website, but could you please add it once again, but removing all the code that you have added before, so we will check it and will try to make further tests.

Well the positioning of the button actually acts as expected; 250px off the left border.
The question is how to define an absolute (or call it static) position instead of a relative position.
Is that possible?

I'm not sure if I understood your question. The button currently has a fixed position, if you change the fixed position to absolute, this will be the result.

It is currently working like this.

So it is 250px off the left, if you remove that value it will be 0px off, something like this.

I tested it and it is fixed on the left side of the screen so does not matter the width, the button is always there.