In my last post, we looked at how to import external fonts and use different styles on ClickDimensions forms to give them the look of a standalone web page instead of a regular form. Today, we’re going to look at some additional modifications like making forms mobile and centering them using CSS.
Part one of this series contains steps one through three, so you may wish to start there so that steps four and five of this post make sense. You don’t have to implement the code from the first blog post to use the code we look at today; the code below can be used in your existing forms.
Please remember that this post provides custom code that you may use if you wish. ClickDimensions cannot support or troubleshoot use of this code, so if you need assistance implementing it, you will need to work with a web developer/designer on your team.
Step 4: Spacing and Alignment
Centering the Form
One of the main changes we can make to our form is to center it on the page so it’s the focal point when our customers visit it. By default, the entire form will be left-aligned, which is fine, but if you want to center it like I did, then you will need to add in a few CSS styles to do so.
First, we will need to target the <html> tag by adding some styles to the code editor. The <html> tag basically holds all the code for the page the form sits on, so when we add styles to it via CSS, it will affect the whole page.
background: #ddd; This gives the whole page a gray background so we can provide some contrast between it and the form. (We will build on this idea more in a moment.)
margin-top: 75px; By adding a margin for the top of the <html>, we’re just letting our form content have some space from the top of the page instead of being flush against it.
display: flex; This attribute, and the two that follow, are using Flexible Box Layout, or Flexbox. By setting the display attribute to “flex” we’re allowing for our form to be centered without using extensive margins or other spacing attributes.
align-items: center; This Flexbox attribute is vertically aligning the form.
justify-content: center; Centers content within the Flexbox.
If you would like to learn more about using Flexbox in your other web design projects, this site has additional tips.
You can see that the content of our form hasn’t changed but the overall look of the page has.
Now we need to target the <body>, which is the area of the form’s page that the form content is actually sitting in. Having the form’s page use the gray background we just added is fine, but by modifying the <body> tag, we can make just the area that the form sits in have some different styling. By default, the body has the CSS shown below.
To add the color and margins/padding that we want, we will need to modify a few of those options.
As you can see in the preview above, when we use those body area styles, the form has changed its background to white instead of gray.
max-width: 600px; Sets the maximum width of all content within the <body> tag to 600px. So, our form’s content will never try to be wider than 600px.
width: auto; The max-width attribute simply says that it shouldn’t be wider than 600px, so setting the width attribute to auto allows for the form to resize itself as needed on different screen sizes.
background: #fff; Since we set the <html> to use gray, we will want to set off the form content a bit by adding a different background color. This simply changes it to white.
padding: 0 !important; We don’t need any padding inside the <body> tag itself, so setting this to 0 and marking it as !important ensures that no padding will be applied here.
Centering the Fields
The first step to centering the form fields is to change the default margin.
It’s initially set to 0, but we will want to indent that some by changing it to the following:
margin: 0 0 0 100px; This sets the top, right and bottom margins to 0, but changes the left-margin to 100px. That will allow our fields to indent more towards the middle.
Along with setting the field’s left margin, we also want to set the margin for the field labels, allowing them to match. So, adding this margin will allow for that to happen.
margin: 10px 0 1px 100px; This sets the top to 10px, right to 0, bottom to 1px and the left to 100px. You don’t have to include a top or bottom margin if you prefer, but it does help create a little extra space for readability if you add top/bottom margins between repeating elements like form fields and labels.
A quick check-in shows our form looking like this.
To check the form on desktop, go to Embed > Embed as Link and click on the URL there to open the form in your desktop browser. Once changes in the Code Editor are saved and the Form is saved, you can refresh that browser tab where the form is and see the changes you just saved.
Finishing the Design
Now we just have the header image, header text and submit button to finalize.
The header image and text need to have some attributes added, as shown in the highlighted sections of code below, in order to center them and remove unnecessary padding.
img: Targets all instances of the <img> tag. We are only using one image here so it’s fine to leave this targeting the tag, but if we had multiple images that need variations of these attributes, then we would need to use classes specific to each image.
- max-width: 100%; Instructs the any <img> tag to allow its contents to take up the width based on the current screen size. This attribute does allow for the image to resize more simply when we address mobile code.
- margin: auto; You will typically set the margin’s value to auto when trying to center the content you’re targeting, so this is just working towards that. You can learn more about centering content here.
.html-component: Targets all instances of this class.
- margin: 8px 0 8px 100px; Any content using this class will have the top and bottom margins set to 8px, right margin to 0, and left margin to 100px. Our header text is using this class so therefore we will now see it indented to match the field and label indenting.
- text-align: center; Centers the content.
div.clickdform.mainDiv: Targets the area within the <body> tag.
- padding-left: 0 !important; Overrides any other inline or stylesheet code that may try to set a left padding value of anything other than 0.
- padding-top: 0 !important; Same as the padding-left attribute, this makes sure that the top of the form’s area doesn’t allow for other styles to add padding in.
With these styles added, our form now looks like this:
The last change we can make is to move the button so it’s more on the right side of the form than on the left. This is probably the easiest change you will make. Just be sure that all your code changes are saved in the code editor and then in your form’s designer window, drag the Submit button to be in the middle column.
And with that final change saved, our form is ready for desktop use!
Congrats! You have now finished your form design so it looks like a standalone page. The form will display well if your email recipients are viewing it on a desktop screen, but if you want to allow this same form to display well on mobile screens too, keep reading for some tips.
Step 5: Mobile Responsive Code
This section is optional as it shows some additional code I included for my form to display well on mobile. I explain briefly below why I used the code that I did, and you can certainly use it too. Just keep in mind that when working with code and implementing it with different content/layouts you may need to make some changes so it fits your design.
Here’s how our form looks with the current code when viewed on mobile:
Mobile code is written in CSS using what’s called an @media query. There are more details here on how it works and the possible variations that can be used. We’re going to use one that alters certain attributes of our form when the screen size the form is being viewed on is 450px or smaller.
All our mobile code will be placed between the open and close braces shown above. I’ll explain the different styles we’re including below, but you can view all of them here.
- margin-top: -8px; The desktop version of our form has a different margin setting to have extra space between the top of the page and the form’s content. For mobile, we need to eliminate that extra space. Using a negative number here helps the form content to sit flush at the top of the page.
- background: #fff; This removes the gray background for mobile viewing and changes it to white.
- width: 100%; Allows the body—our form content—to take up the full space on the page.
- max-width: 450px; Sets a limit on how wide the body content can be; in this case no wider than 450px.
- height: auto; This allows the height to automatically generate the value it needs based on where it’s being viewed. For example, a 300px wide screen will need a greater height for the form content than a 400px wide screen.
- margin: auto; Helps keep our content better aligned and is typically used to help with keeping content more centered.
- text-align: center; Instead of leaving the content left-aligned, we are just defaulting it all to use center alignment.
.responsiveCellSize1, .minSize1: These are two existing CSS classes that we can modify to make one slight change for our design.
- width: 100% !important; This overrides the width those classes are already using, so when viewed on mobile, all our content is able to display at a good width.
- max-width: 400px !important; Our header text can take up to 400px of width.
- margin: 0; This allows for headers to have different margin settings—essentially none—on mobile screens as opposed to the desktop CSS we previously wrote.
.mainDiv: This is another existing class that we’re targeting for more responsive CSS.
- padding: 0 0 !important; Removes the current padding for this section of the body and sets all sides to have 0 padding.
- width: auto; Again, we’re using this to help our width dynamically configure based on screen size.
.clickdform input[type=’text’], .clickdform textarea, .clickdform select: Targets any text, text area or select (list) fields on our form.
- margin: 4px 29% !important; This setting was a bit of personal preference as I used 4px to set the top and bottom margin for the fields. The 29% will allow the right and left margin to dynamically use 29% of the available space. This way the fields aren’t flush to the left or right of the form page.
And now our form displays like this on mobile:
All the code we looked at today is in this file along with the code from Part 1 in this series. You can use it on your forms and customize it as needed.