You are viewing limited content. For full access, please sign in.

Question

Question

Putting a Logo into my Form Footer

asked on November 20, 2015

I have been struggling to get the desired effect of having our company logo within the Form Header as it is a limiting format (left or right only etc).

 

I have decided that I would like our company logo to be centered and underneath the Submit button at the bottom/Footer of our forms. (see image attached)

 

If someone can best answer how to do the above, it would be greatly appreciated.

 

Thanks,

 

Christian

Capture.JPG
Capture.JPG (40.01 KB)
0 0

Answer

SELECTED ANSWER
replied on November 30, 2015

Absolutely! You can add the "width" attribute in your CSS or as an inline style to the <img> tag. The following code is for an inline style:

<img class="logo" src="[url to your logo]" style="margin-left: auto;margin-right: auto;display: block;width: 100px;">

or in your CSS file:

img.logo {width:100px;}

Now you can play around with that number to achieve the desired size you want.

1 0

Replies

replied on November 20, 2015 Show version history
$(document).ready(function() {
   $('div.btn-wrapper').css({width:'100%'}).append('<div><img class="logo" src="[url to your logo]" style="margin-left: auto;margin-right: auto;display: block;"></div>');
});

The above code will do exactly what you want. You may need to add a "width" attribute to the logo to get the right size you are after.

One more thing to mention, the above code works for a regular submission form. For a user task form/approval form, the code differs just a bit:

$(document).ready(function() {
   $('div.button-wrap').append('<div><img class="logo" src="[url to your logo]" style="margin-left: auto;margin-right: auto;display: block;"></div>');
});

 

2 0
replied on November 30, 2015 Show version history

Hi Chris,

 

Apologies for the late reply - but the code above worked great!

 

Within the code above however where exactly can I change the size of the logo once uploaded? Regardless of how small I have made it outside Laserfiche, it is always the same size within the Footer !?

 

Any advice on the specificc code to change the logo size would be great!

 

Thanks,

 

Christian

0 0
SELECTED ANSWER
replied on November 30, 2015

Absolutely! You can add the "width" attribute in your CSS or as an inline style to the <img> tag. The following code is for an inline style:

<img class="logo" src="[url to your logo]" style="margin-left: auto;margin-right: auto;display: block;width: 100px;">

or in your CSS file:

img.logo {width:100px;}

Now you can play around with that number to achieve the desired size you want.

1 0
replied on November 30, 2015

Thanks Chris!

0 0
replied on May 6, 2016

Chris,

 

I need to revisit this because although your code worked great, I was wondering if there was a way to keep the logo through the process?

When a form is submitted the logo inserted using your code is visible however when it reaches the next User Task the logo has been removed, is there a way for the logo to stay during the entire forms process?

 

Thanks!

0 0
replied on November 20, 2015

Hello Christian,

There's been a previous post in Answers to insert a footer. You can follow that method but instead insert an image tag with source your company logo, and for further formatting can assign a CSS class to the footer element to control with custom CSS.

Hope this helps!

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.