One of my favorite parts of a marketing project is the design work. It’s so satisfying to prepare an email or form or landing page with just the right look for leads or customers. That’s why in this post I wanted to highlight some customizations that you can make to a ClickDimensions form so that it fits with your brand design seamlessly.
The design elements I’m showing here are intended to enhance a standalone form, a ClickDimensions form that is accessed via the Embed as Link URL. This would be a scenario of sharing a link to the form itself via email or call-to-action on your site. Embedded forms should be designed with your specific web page (and location on that page) in mind. So, in this post, we will just look at styling standalone forms so they can be viewed as a landing page.
This post provides custom code that you may use if you wish. ClickDimensions cannot support or troubleshoot use of this code. If you need assistance implementing it, you will need to work with a web developer/designer on your team.
The example I’m using here is a referral form that includes a 600px wide image and a ClickDimensions form. I recommend you set your form’s Web Responsive option to Yes. We will look at using web responsive design today, and having that field set to Yes is imperative. We’re also going to use Google Fonts on our form.
Step 1: Create the Form
Go into your form and add your form fields. Our referral form is shown below with the fields grouped together a certain way so our design will focus on how the fields are grouped.
I recommend not putting your fields side-by-side and instead laying them out vertically as I have done. Since we may have customers access this form from their mobile devices, we want to keep the layout simple and adaptable for mobile.
If you’re including a header image as I am, it would be best to put it in its own HTML component in the form builder and set that component to a width of three columns. This will allow the image to look like a true header.
Then we will put sections of text (that are acting as headers for our form’s sections of our form) in separate HTML components. Our form’s fields are set to two columns so we will also set our text HTML components to that width.
Also, in our text HTML components, we will add a class to the <div> that contains the text. This is so we can reference it later for styling. You can see in the example below what I called my class, but you can name yours whatever you like. More instructions on how/why to do that here.
After text is added to the HTML components and they are saved with a two-column width, we will want to update the rest of our form fields to be two columns as well. My form needs all fields to be required, so now would be a good time to add that setting to your fields that need it. You can also do your mapping set up before moving on to the next step.
With our fields set up, the form is starting to take shape and looks like this.
Not a bad start, but we can spruce it up even more.
Step 2: External Fonts
Part A: Adding the External Fonts
In a previous post, I covered how you can include Google Fonts (or other external fonts) in a ClickDimensions landing page. The good news is that you can add Google Fonts to forms (and other ClickDimensions web content) too! You just have to use a slightly different include method to pull the fonts in.
So, for our form, we’re using the Raleway and Sacramento fonts; those are the same fonts used in our header image. Google has both of them available, so once we select them, we can copy the @import include option to paste into our form’s Code Editor.
When you copy the @import code, you won’t copy the <style> and </style> tags; just copy/paste the @import line of code. You can see how that looks in the code editor snapshot below. The code editor does include default CSS in it which can be customized, so we will just place the @import code above all the CSS currently in there so it’s easy to find.
Now, we can go through the existing CSS and look for any mention of the font-family attribute. Remove the current font specified (it’s probably Verdana) and replace it with the font you want used for that type of content. Our form will use Raleway for the field labels, field text and submit button text.
When changing the CSS in the code editor, you can use the Refresh button at any time to see how your styles are being incorporated. Just keep in mind that this is a preview tool, so some of your styles may not look correct in that smaller preview window. And you still need to save the code editor in order for your CSS to be saved. Otherwise, if you close the code editor without saving, your changes will be lost.
Part B: Using External Fonts in the CSS
In the above screenshot, you saw an example of how to add an external font to the code editor. We will take this a step further so you can also target the field labels and HTML component text to use the fonts.
Back in Step 1, we added the class html-component to our HTML component text. We’re now going to add that class in to the code editor and set Sacramento
as the font-family.
Then below the html-component styles, we will target the field labels so they can use the Raleway font.
You will notice that instead of referencing a class, such as html-component, we’re actually referencing a few different classes/tags here. This is because of how the field label is included in the form’s HTML. There’s not a class assigned to it, but we can use a CSS selector which essentially draws a map to the portion of the code that we’re trying to target. (I’ll include a link to my entire CSS file at the end of this post so you can copy/paste that selector if you want.)
With just these font changes, you can see that our form is starting to look quite different.
Step 3: Font Size and Colors
Now that we have the framework for our form and have incorporated the fonts we want to use, we can style the content and other elements of the form to complement our header image.
Part A: Font Size
First up is font size. When designing digital content, I like to ensure that my text is legible on a desktop as well as mobile device. So, I recommend never letting your font-size attribute slip below 13px. Personally, I like to use 14px as my baseline, but 13px is fine to start with as well. As you can see below, our field inputs are using a 13px size so any text, text area, or select fields will display the text in them at 13px. Our fields are all text/email fields so we won’t see this style in use until we type a value into one of the fields.
Our submit button should be rather prominent, so it’s clear that customers should click on it. We can set its size at 14px.
The other portions of text on our form are the html-component items as well as the field labels. We will add their sizes as shown below. Our Sacramento font is a cursive font so we will need to set the size for it quite a bit larger than the rest of our content. Otherwise, the text using that font will appear to be about the same as our 13px and 14px content.
A quick check shows our form continuing to improve:
Part B: Colors
Next, we will want to add some color to our form. I’ve chosen two colors based on the header image—a dark purple and a light purple/pink—which we can use to style the HTML component text, the required asterisks and the submit button.
First, we will add the dark purple color to our html-component class and also make it bold. Our html-component text, shown in the preview below, has adopted those two added styles.
Next, we can edit the asterisks that appear for required fields so they use the light purple/pink instead of the default red. The class that styles the asterisk is called requiredStar, and as you can see below, adding our color changes it from the default. Adding !important to the color here is necessary since we’re targeting an existing ClickDimensions style and we want our color selection to take precedence.
Step 4: Fields and Submit Button
Part A: Field Styling
We can also give our fields a different look than the standard box format. How you design your form will depend on your end goal(s) as well as your branding. In this case, our form could certainly benefit from removing the standard box look for our fields and instead give it a softer look that fits with the rest of our form.
The first part of styling the fields is to remove the current border styling so we can then add our own. You can see the default border styling set on text, text area and select fields below.
We will remove the border-top, border-left and border-right styles, and change the border-bottom style to look like this:
And from the preview above, you can see how removing the top, right and left borders made quite a difference for our text fields. One optional change I included was setting the border-bottom style to use the color #ccc which is just a slightly darker shade of grey than the original #ddd that was used. You can leave it as is or use a different color if you like.
We can also change the text alignment for values entered into the fields to be center aligned, again adding that extra difference to set it off.
Then to make the fields a little more interactive, we can also use the :focus selector. This allows us to assign styles to the field when they are either clicked on or if a customer uses the tab button to access the field. You can see the :focus style reflected in the screenshot above and below as the grey background for the field that has been clicked in.
Part B: Submit Button
Now, we’re going to add some special styling to the submit button. The code editor by default will include styling for it, so as we did earlier, we can just go in and modify it.
The styles we used are described more in detail below.
- letter-spacing: 1px; Used to add some additional spacing (horizontally) between the letters in the word “Submit.”
- background: #6F4C88; Adds the purple background color to the button.
- border: #6F4C88; Adds a border with that same purple color to the button. The border has a size of 2px and is solid (so not dashed, dotted or otherwise displayed).
- color: #fff !important; Makes the text color for the button white. Because white’s hex code is #ffffff, we are able to abbreviate it to just #fff.
- font-weight: bold; Makes the text bolded.
- padding: 10px 20px; Adds 10px of padding to the top and bottom of the button, while 20px is added to the right and left sides. Padding happens within the element, so this keeps Submit from being flush against any of the button’s sides.
Next for the button is an optional element, a hover style. Personally, I like adding hover styles to links/buttons when possible because it changes the button’s appearance when a customer’s cursor is hovering over it, reminding them that this is a link they can click.
The hover styles are described in more detail below.
- #btnSubmit:hover This hover selector is used by identifying the link/button and following it with :hover. In this case, the submit button has an ID of #btnSubmit so it precedes the hover selector.
- background: #fff; Makes the button’s background white when hovered over.
- color: #6F4C88 !important; Changes the font color to white.
- font-size: 16px; Makes the button text change to a 16px size.
With all the changes we’ve made our form is looking very sharp. There are some more styles that could be added to align the form and its fields better. Stay tuned to the ClickDimensions blog for part 2 of this post where we talk about implementing those additional styles.
P.S. You can copy any of the code we looked at today here.