HOWTO: Add Rounded Corners to an InfoPath 2007 Form

InfoPath forms, to me, always look “blocky”.  You add square design elements.  Square tables.  Square text boxes.  Square sections.  Square square square!  That isn’t cool.  Or funky.  Or… well anything nice-looking anyway. 

I recently did an InfoPath form for a client that hadn’t seen InfoPath before.  Everything worked, the form uploaded, it was usable, business logic correct, accurate, etc. etc.  Their main gripe?  “It doesn’t look very nice”.  *sigh*  Normally, I would say “sorry, that’s just the way it looks.  We could do some design work on it if you want, but it will require the skills of a graphic designer to fix it up and create some nice eye-candy”.  Surely there is a better way!  I did some research, and while there is plenty of people talking about it, I couldn’t find any articles on how to create a form with rounded corners.  So, I decided to have a go myself.

I had the following requirements for my rounded corners InfoPath experiment:

  1. The solution must use InfoPath for all the layout and design – no hacking of the XSN file!
  2. The solution must use as few images as possible (I have next-to-zero graphics skills)
  3. The solution must support resizing content while still maintaining rounded corners

There are a couple of different options for creating “traditional” rounded corners:

  1. Use embedded DIVs – not an option, because we don’t have direct access to HTML without hacking the XSN file;
  2. Use CSS files – again, not an option as above;
  3. Use JavaScript – as above, no hacking!
  4. Use images for corners and/or lines, and tables for layout.  This is the method I chose to use as it offers the best InfoPath application support without resorting to manual XSN file editing.

So, here is the process I used.

  1. Create corner images.  I used Paint.NET to create a rounded rectangle, then trimmed one of the corners into a 12×12 pixel image.  This was my “master” corner image.
  2. Using the “Magic Wand” selection tool with a Tolerance of “0%”, I selected the “outside” of the curve and pressed the Delete key – this makes the area outside the curve transparent (important later on for background colours)
  3. Save the image as a GIF file “top-right-corner.gif”
  4. Rotate the image 90 degrees and save as the other corners, top-left, bottom-left and bottom-right.  This gives you the four corners you need.
  5. Using InfoPath, create a 3×3 table.  In each of the corners, insert the appropriate image.
  6. Set the first and last row, first and last column to 12 pixels width (the width of your image)
  7. Select the entire table, right-click to get Table Properties, change to the “Cell” tab, and set all Cell padding to zero.  This will help your graphics and lines to match up and give the “seamless” appearance we are after.
  8. In the top/bottom middle and left/right middle, add an outer border of 1.5 pts size matching the colour of the corner images.  This should complete the table.

Even though it doesn’t look very nice in Design view, in Preview mode it should all match up fine.  Here are some common problems I came across while creating the tables.

Extra White Space

Extra white space is the hardest thing to fix in InfoPath form design when trying to nicely layout your form.  If you get extra “space” in your table layout, it could be one of several things:

  1. Font size in your table cell.  Check the size, and change to the Font design tab to make it “normal”
  2. Spaces/carriage returns – delete these.  Sometimes it’s tough to “pick” the white space, so you arrow-keys to move around your table and click “Delete” to get rid of them
  3. Fixed size of height/width in cells.  Change to “Auto” for the row heights in particular, especially for the first and last rows.

Copy Tables into Another Table

Sometimes, InfoPath tries to be a bit too clever.  If you copy one table inside another, InfoPath can try to merge the tables together.  To solve this, make sure you add a couple of carriage returns into your “outer” table, select one of the middle carriage returns (i.e. not the top or bottom) and then paste your table.  This should make sure InfoPath doesn’t try to mash the two tables together, ruining your lovely layout.

Example Screenshot

Following is a tiny form I created using the Rounded Corners as an example implementation:

InfoPath Rounded Corners Screenshot

InfoPath Rounded Corners Screenshot

Final Comments

I hope this helps people and gives them ideas for different things to try out.  I know there is an issue with some table rendering in non-IE browsers – I haven’t got any plans to fix this as I’m not 100% sure it can be… I’ll keep playing around with it though and see what happens.

Download the Rounded Corners.XSN File

Advertisements

Tags:

4 Responses to “HOWTO: Add Rounded Corners to an InfoPath 2007 Form”

  1. Rounded corners in Infopath « All right stop! Collaborate and listen (Sharing Points) Says:

    […] https://gavinmckay.wordpress.com/2008/09/24/howto-add-rounded-corners-to-an-infopath-2007-form/ […]

  2. Jorbidok Says:

    interesting, i’ll be back later

  3. Another day in the Office : Adding Rounded Corners to an InfoPath 2007 Form Says:

    […] HOWTO: Add Rounded Corners to an InfoPath 2007 Form « Back in Hack Posted: Friday, October 31, 2008 4:29 AM by alspeirs Filed under: InfoPath […]

  4. SharePoint Designer Tutorials Says:

    SharePoint Designer Tutorials…

    […]HOWTO: Add Rounded Corners to an InfoPath 2007 Form « Back in Hack[…]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: