Add a Logo and basic formatting to a Nintex Forms

Document created by emily.billing@nintex.com Champion on May 11, 2014Last modified by frank.field@nintex.com on Jul 11, 2016
Version 5Show Document
  • View in full screen mode

This applies to Nintex Forms 2016,  Nintex Forms 2013 and Nintex Forms  2010 and is suitable for new and beginner users of Nintex Forms.

 

 

In this tutorial we’re going to explore some basic formatting you can do to change the look and feel of your Nintex Form.

 

To start with, you will need a form. In this example I am using a Job Application Form. If you want to use a form you already have, head down directly to Change the Logo. Or you can create a new custom SharePoint list with the columns listed below:

 

Click on the Settings icon and then Add an App. Select Custom List and call it “Online Job Application”.

Open your new list and add in the following columns.

  • First Name: Single line of text
  • Last Name: Single line of text
  • Contact Phone Number: Number
  • Email Address: Single line of text
  • Position Applied for: Choice (enter a few options)
  • Position ID: Number
  • Location: Choice (enter a few places, e.g. Melbourne, Seattle, New York, Tokyo)
  • Where did you see the job advert?: Choice (enter a few options, e.g. online, referred from friend)
  • Additional Information: Multiple lines of text

online job.png

Click on the List Tab, and select Nintex Forms in the Ribbon.

nintex_forms.png

When you open the Nintex Forms designer, you will find that the form has automatically been populated with the SharePoint List columns. However, you may need to tweak the form and move controls around to get the look you want or add additional label controls onto the form. The form below is how I have organized this Online Job Application form.

 

Change the Logo

To change the logo of your form, select the Image control at the top of the form and enter the URL of the image you want to add in. If you are creating a form to sit outside your firewall, the URL will need to be publicly accessible. For example; the image I am using sits in Dropbox, and I use a public link from there.

 

In the Image URL field, enter the URL to the image.

image.png

Hit Enter.

image2.png

Now that you have changed the logo, the next step is to make some basic formatting changes to tie in with the Logo image.

Change the Background color

  1. Click on the Settings button in the Ribbon, and expand the Appearance section.
  2. In the Background color field, enter the HEX code “#5f9ea0”. This will change the form to a teal green, otherwise, enter any color you wish.
  3. Click Save. Your form will change color.

color.pngChange the font of the Label controls

For the font color and size, change the label controls to white and bold. Click on the first label control, “First Name”, and in the formatting fields at the top of the page, change the font to white and bold.

font.png

Use the Format Painter to copy the formatting to all the other label controls on the form.

Select the First Name label, and click on Format Painter in the Ribbon, then select the label controls you want to apply the formatting to.

format_painter.png

Final Form

final.pngCreate a Smart Phone Form Layout

Click the Smart Phone button in the Layouts section of the Ribbon. Nintex Forms will create a Smart Phone layout version of the form, meaning that one published, this form will render on all mobile devices, e.g. iPhones, Blackberries etc.

smart phonr.png

Again you may have to tweak this form, so that controls are in the right place, or to add background color to the Smart Phone layout, i.e. click Settings in the Ribbon, add the HEX code in the Background color field.

smart phonr.png

Attachments

    Outcomes