Home | Forms | Responsive HTML Component Content in Forms and Surveys

Responsive HTML Component Content in Forms and Surveys

ClickDimensions forms and surveys can be set up to be web responsive so that your contacts and leads can interact with them on mobile devices. However, the HTML component is an exception to that responsive setting. Since any content (text and/or images) can be added there, the component isn’t able by default to automatically resize any possible content. But by adding a little bit of code to the code editor, you can quickly make the content in your HTML component responsive with the rest of your form or survey.

Method 1—Making Images Responsive

If you only have an image in your HTML component, you can simply target the <img> tag one of two ways in order for it to be responsive.

In the code editor, enter either of the following sections of CSS, and it will target any <img> tag in your form or survey, making the images there responsive.

Option 1

/*responsive image code*/

img {

width: 100%;

}

Option 2

/*responsive image code*/

img {

max-width: 100%;

}

Your code editor will look like the one below. The highlighted section of code shows the Option 1 code added in.

Survey - Code Editor - Option 1 (003)

Then, when your survey or form is opened in a web browser, the image will automatically resize as needed. Below is a screenshot of how the image resizes on a mobile device.

Survey - After

Either option will work just fine on a smaller screen so it’s up to you which you choose to use.

Method 2—Making Images and Text Responsive

Most text that you include in an HTML component should end up being responsive, but if you have text that isn’t responsive or that needs to be at a fixed width for larger screens, the following method will help make both text and image elements responsive together on a smaller screen.

An example is this form where I have set the text to a width of 800px. That’s fine for desktop viewing, but we will need to have it resize when it’s viewed on a smaller screen.

Here’s what it looks like on mobile when it doesn’t resize:

Form - Before

First step, in the code editor, we will place the following CSS in the CSS section.

/*html component class*/

@media only screen and (max-width: 400px) {

.html-component {

max-width: 200px !important ;}

}

An example of how that should look in your code editor, is below.

Form- Code Editor Responsive Class

This CSS tells the form or survey to display any content with the class html-component at a maximum width of 200px if it’s being displayed on a screen that is smaller than 400px (wide). The reason we’re telling it to use a width of 200px is because fields or questions on the form or survey are set to that 200px width on small screens. So we’re basically telling any content set with that class to follow the ClickDimensions settings for form fields or survey questions.

The next step is to assign the class to the content that will need to be resized. So, for this example, I have one image and a block of text. If I add the class html-component to their tags, as shown below, they will properly resize on a smaller screen.

Form - HTML Component - Class

Note that if you have inserted a block of text and there are no tags associated with it, you can just insert a <div> tag and add the class to that tag. Just be sure to properly close the <div> tag after the last bit of text. The example above shows text wrapped in a <div> tag.

And here’s what my form looks like on a mobile device after that class is added.

Form after

Happy Marketing!

2017-05-18T17:03:13+00:00 By |Forms, Surveys|0 Comments

About the Author:

mm
Carolynn Carriger is a ClickDimensions Marketing Success Manager.

Leave A Comment