Best way to apply CSS to an InfoPath form?

Question

Hi all.

What's the best way to apply a css file to an InfoPath form? I have a form with textboxes that won't wrap words in Firefox or Chrome, and I wanted to apply a css file to it to deal with the issue.

I did try one method - I don't have Visual Studio, so I used SP Designer 2010 instead to make an aspx page called email.aspx, and in this page I added an InfoPath Form Web Part to input the form, and a Content Editor Web Part to connect to the css file.

The issues that came out of this is that the formatting on the aspx page is a bit wonky - across IE, Firefox, and Chrome, all the textboxes, spacing, and sizing seems inconsistent. Why is this? I also don't like that the email.aspx is visible under Site Pages.

Does anyone else have any other recommendations for how to deal with this problem? Any advice is appreciated!

Thanks.

Answer 1

Rather creating a new aspx page, you can use the customize list form
ListTools -> List -> Customize List ->Form Web Parts
Select from the drop down (New, Display, Edit)

Add CEWP in here and check, not sure if it makes any difference but plus point is you wont have this page under site pages

Answer 2

Hi, thanks for your reply!

I looked under Form Web Parts in the form library that I published my form to, and I'm only seeing the options to edit the default display and edit forms, no option to edit the new form.

Answer 3

Hi,

As we think the best way is to In the page where your InfoPath is shown, add a script editor web part and there add your code or the url of css files to apply the custom styling, there is some blogs written to change the InfoPath styling using custom css to manually apply the css to the view1.xsl file packed within an InfoPath form (a.k.a. internal stylesheets). Greg Collins has written a great article explaining how to achieve this.

 http://www.infopathdev.com/blogs/greg/archive/2005/06/07/Add-a-Custom-Style-Sheet-to-a-View.aspx

You can give a try 

---

KRISHANA KUMAR

SharePoint Architect

Mosstechnet-kk.com

 

Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

Answer 4

Hi,

If you view forms in form library in the browser, you will figure out that these forms are displayed in FormServer.aspx page. Thus, you can modify the FormServer page code to apply your CSS style by path: C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS.

If your CSS style doesn’t work fine in IE, Firefox and Chrome browsers, you need to debug your code in each browser till it’s compatible with all browsers.

Thanks,

Dean Wang

---

TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact [e-mail].

Answer 5

Hi Krishana,

I did as the article said and saved the source files, and edited the .xsl file to add css for text wrapping, but when I publish the form I see no difference - the words in the text box still don't wrap. 

Answer 6

Hi Dean,

Thanks for your reply. I'm not sure that I have access to the layouts folder; that path didn't take me anywhere. IS there another way I could edit the FormServer.aspx page?

Answer 7

Hi,

If you go to your 14 or 15 hive path on SharePoint server as given to below path.

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\14\TEMPLATE\XML

There is a XML file “serverfiles_FormServer.xml” that hold the reference of formServer.aspx page.

<Mapping FileExtension="xsn" RedirectUrlTemplate="/_layouts/FormServer.aspx?XsnLocation=|0" VersionRedirectUrlTemplate="/_layouts/FormServer.aspx?XsnLocation=|0" />

You can create your own one page and use this page but this will apply for all sites on your environment you can also create an HTTP handler to change your default FormServer.aspx to custom one.

https://social.msdn.microsoft.com/Forums/en-US/25233f5b-cd5a-47e6-bb37-0e2f92988a4a/sharepoint-is-it-possible-to-override-formserveraspx-andor-printformserveraspx?forum=sharepointcustomizationlegacy

http://johnliu.net/blog/2012/4/27/infopath-creating-a-custom-formserver-page-to-embed-your-own.html

---

KRISHANA KUMAR

SharePoint Architect

Mosstechnet-kk.com

 

Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

Answer 8

Hi,

You need to access the path in SharePoint sever.

And in SharePoint 2010, C:\Program Files\Common Files\microsoft shared\Web Server Extensions\14\TEMPLATE\LAYOUTS is the right path. (sorry for the mistake)

Now, are you able to access the path to edit the FormServer.aspx page? Is there any update?

Thanks,

Dean Wang

---

TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact [e-mail].