Pandaform Blog

Everything about Forms!

Make Your Web Forms Compatible With Your Branding

When using an online form service like PandaForm, the typical user usually doesn’t have the web development skills or an in-house web developer to fully customize it for them. But even without these resources, you can find simple ways to change the look and feel of your form and integrate it with the rest of your website.

Modifying Graphics and Layout

Add your logo. When you’re creating your form, go to the “Add Field” sidebar. You’ll see an “Image” button under “Layout Elements”.

When you click the “Image” button, you can paste the URL of your logo under “Image Address”, as shown below. It’s best to put it at the top of the form so that users can easily identify the company they are sending information to.

Tweak the text styles. You can also make some slight changes to the font colors and sizes in your form. When you’ve added a new field, you can simply include short lines of HTML code to make these changes. Click the screenshot below to load an example in a new window:

If you look at the sidebar in the screenshot, you’ll see that the following code appears around the text:

<font size=”5px” color=”#463E41″>Type your example text here</font>

The number following “size” indicates the size of your text. You can make it larger or smaller, depending on what your readers need. You’ll also notice that for “color”, there’s a 6-digit code that follows. This code identifies the color of your text. Each color has its own code. The code for white is “#FFFFFF”, for black it’s “#000000”, and for red it’s “#FF0000”. Click here for a complete list of these color codes.

If you don’t want to create this HTML code yourself, you can click here for a generator which will create the code for you.

Change the color template. Color is another important aspect of branding, so it’s important that you change the color scheme of your form to display the colors representing your business – especially if they are found in your logo. PandaForm allows you to do this easily. Visit the “Settings” area of your form, and under “General” you’ll find the theme selector. Pick the color scheme you want from the options in the drop down menu.

Click on the image above to view a larger image in a new window

Include a signature. Though it’s not an absolute necessity, adding a handwritten signature to the form can improve branding, especially when accompanied by a short introductory message such as in the example we’ve created. In the example, we’ve used a sample signature from former US President Theodore Roosevelt, but the signature of your business representative is enough. This gives a personal touch to your form and it reminds your audience of the people they are doing business with.

Integration With Your Website

If you did the above steps right, your form should look like your website – at least in color, logos, and other graphics. Apart from making these cosmetic changes to your form, it needs to blend with the rest of your company website. Here’s how:

Add links to and from your website. By adding a hyperlink to the form from your website, as well as linking back to your website from the form itself, you can make it seem as if the form is a page within your site.

Redirect to your site after submission. An easy way to implement this would be to automatically direct your user back to your website after filling up your form. When editing your form settings, under the “General” tab you’ll find a section labeled “After the form is submitted” (see below). Select “Redirect to Website” and then add the URL of your website or “Thank You” page.

Below is a screenshot of the final form we created using these tips:

If you want to check out the form in action, click here.

Advanced Techniques

If the above methods don’t offer enough customization for you, there are more advanced ways to do this if you have experience in web development or have access to a professional web developer. PandaForm allows you to download the HTML and CSS source code of your form and integrate it within your site. You can access these files after clicking “Publish” and selecting the “Embedded” tag (see below). Feel free to contact us and we can have our team work on this with you. With advanced customization, your web form can be just as creative as the ones featured here.

How about you, what steps have you taken to customize your form?


Be the first to leave a comment. Don’t be shy.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>