Posts Tagged ‘widget’

How to Customize the Look of Your Forms with CSS

The online form builder allows you to easily change the layout and colors of your forms when these are embedded into your website. This article discusses how to further customize the look of your online forms by providing your own CSS stylesheet. You can create one (or more) CSS stylesheet for each form.

Disclaimer

The feature discussed in this article is UNOFFICIAL. It is NOT PART OF ANY FORMSMARTS COMMERCIAL OFFERS and we do not provide direct support for it. Feel free to post questions at the bottom of this page. Changing the layout of a form may prevent it to display consistently across browsers.

Verify Your Site & Upload a Logo

To be able to use your own CSS stylesheet, your first need to verify your site and upload a site logo. Uploading a logo creates a website profile on FormSmarts and will allow you to provide your own CSS stylesheet. The logo will be shown on the standalone version of your forms and also on PayPal if you’re using Advanced Payment Integration.

Create a CSS Stylesheet

The CSS code in your stylesheet will be loaded after the default FormSmarts CSS, so any instructions specified in it will override the default. We give a few examples of customizations in the Example section below. More will follow.

Update the Embed Code on Your Site

In the HTML snippet given in the Form Publishing Info screen of the form creator, change the query string portion of the URL from mode=embed&lay=1 to mode=embed&lay=1&style=form.css, where form.css is the path to the CSS file relative to the root of your website. For example, if your website’s URL is http://www.example.com, the CSS file should be at http://www.example.com/form.css.

CSS Styling Examples

Changing the Font and Color of Headings

h2{
font-family:serif;
font-size:14px;
color:orange;	
}

Changing the Layout of a Form to Multiple Columns

Logical sections defined by headings can be made into separate columns using the following CSS code and changing the iframe width accordingly.

#section_1{
width:350px;
float:left;
}
#section_2{
width:350px;
float:right;
}

Online form with multiple columns

Calling Embedded Form Users!

Form Widget Size Calculation Upgraded

To accommodate users who need to create forms with a large number of fields, we’ve recently introduced a much more sophisticated way to calculate form widget size. If forms on your site currently display a scrollbar, we strongly advise you to upgrade the form embedding code.

Refresh the Code on Your Website When You Add a Field

Once you have inserted the HTML code for the form widget on your site, we cannot resize it at our end. That means that whenever you add more input fields, you must refresh the code on your website. If you don’t do it, a scrollbar may show up, and some users may not be able to see the bottom of the form.

Space at the Bottom of Web Forms Is Normal

The spare space at the bottom of web forms is there for a reason: leaving enough space for error messages that may occur during form submission. Here again, if you remove that space, a scrollbar may show up, and some users may not see the bottom of the form.

Optimizing form widget size is not a simple issue because it depends on the rendering characteristics of the diverse web browsers, as well as on the different aspects of each form. If you believe the size of a form you’ve created is not optimal, let us know.

Introducing Form Layouts

We’re pleased to now support two form layouts.

Question (a.k.a. field name) and input field aligned horizontally (default):
Form layout: question and input field aligned
Question and input field aligned vertically:
Form layout: question above input field

Which Layout Should You Use?

Most people find web forms designed with the first layout clearer and easier to read. That’s why we use it by default whenever you create a form.

The best layout to use depends on the length of the questions asked on the form.

  • When a form is made of short questions like name or email address, prefer the first layout. This is what you should use, for example, for contact forms.
  • When the form contains longer questions like Why do you want to work for us?, you should rather use the second layout. It turns out that you should use the second layout for most complex forms like web surveys and job application forms.

How to Change the Layout of a Form

You can change the layout of a form in the form details page. Note that if you’re using a form widget embedded into your site, you must update the HTML code on your site whenever you switch layout.

This is simply because the layout affects the size of the form. Forms accessed by their FormSmarts.com URL don’t have this restriction.

Any Feedback About Form Layouts?

We welcome your feedback about this feature.

How to Redirect Form Respondents to Your Site

The form builder allows you to set up a Return URL for each of your forms and automatically redirect users to that URL after they've submitted a form.

To change the Return URL of a form, use the button showing a pen to edit the form and update its Return URL in the Submit Actions tab.

Redirect Form Users to Your Site

You can set up a form to skip the Confirmation page and instead automatically redirect the user to a Thank You page or download URL on your site.

To activate redirect:

  • Navigate to the Form Details screen of the form builder and set a form return URL in the Submit Actions tab
  • Select Redirect to Return URL in the On Submission drop-down menu

Browsers won’t redirect from a secure HTTPS page (the form) to non-secure content for security reasons. Please make sure the Return URL starts with https://. If your site still doesn't support TLS/HTTPS, FormSmarts won't be able to redirect form respondents.

Note that form users will not get a FormSmarts Reference Number for their form submission if you redirect them to your site unless you also set up the form to send an automatic form confirmation email.

Redirect With Embedded Forms

If you have embedded a form onto your site and set it to redirect to its Return URL, some browsers may load the URL in the iframe that contains the form. Follow these instructions to ensure the Thank You page consistently loads in the top browser window or tab.

Return URL & Site Ownership Verification

Although the redirect option is only available with paid accounts, members with a Free account can still provide a button on the form confirmation page to allow respondents to navigate to a Thank You page or other URL.

To prevent abuse, FormSmarts only provides a link to the Return URL for Free accounts if you have verified your site.

To verify your site, visit the Settings tab of the form builder.

We use the return URLs of your forms to compute the list of websites in Settings > Websites, so make sure those are correct before you attempt to verify.

PayPal Landing Page for Payment Forms

If you use our PayPal form feature to collect dues, fees or donations on your form, the Return URL will be used as the PayPal landing page. Users will be redirected to that page by PayPal after the payment has been completed.

Form Color Settings

Like many FormSmarts users, you may sometimes want to customize the style of your web forms. This may be because you want the forms to match the rest of your website, or because you want a form to stand out on a web page.

The form builder allows you to easily change the text and background color of your forms. Visit the Form Details screen in the Forms tab to set color preferences for a particular form.

Web Form Color Selection

Things to note:

  • color settings only affect embedded forms, not forms access by their FormSmarts URL
  • because your color settings are stored in our servers, you can change settings and see the result immediately. You don’t need to update the form embed code on your website.

How to Change Form Colors

  1. By default, form text is black, and form background is transparent. This should fit the needs of most users, and if you’re happy with this, you don’t need to do anything.
  2. If you do want to change a color, the easiest way is to choose one of the popular colors we’ve preselected. Just click on the color you want.
  3. If you prefer to use your own colors, you may type any valid 6-digit HTML color code directly. For example, 808080 is a shade of gray.

Usability Note

It’s important to preserve the accessibility of your forms to visually impaired visitors, and their usability under poor reading conditions (e.g. bright sunshine). Always keep a high color contrast.

Advanced Form Customization

You may further customize many visual aspects of a form by providing your own CSS stylesheet. For usability reasons, we don’t recommend dramatically changing the form layout.

Form Owner Verification with Google Page Creator

To verify you own a website, we ask you to create a file with a specific name on your web host. If you use Google Page Creator, proceed as follows to verify your site:

  1. create a new page
  2. enter the verification file name (e.g. syronex8800…2523.html) as the page title
  3. publish the new page

Form ownership verification is optional but recommended to build trust with your visitors. It is required you intend to advertise a web form URL by email.

Recent Issues with Google Page Creator

Although hundreds of Google Page Creator users have successfully verified their site, we’ve had a few issues in the last few days. Google was redirecting some of the requests to googlepages.com to the same page on google.com, thus preventing us to check the verification file exists. We obviously have a limited scope for action, but we identified a likely cause and took technical measures that seem to have solved the problem. Leave a comment if you experience any more problems.

Text & Background Colors in Embedded Forms

As already mentioned in another post, we are soon going to allow FormSmarts users to customize the look of web forms. This applies in particular to embedded forms.

At this time, the form text color is black, and the form background is transparent. This leads to an issue when the page hosting the form has a black background. If you are affected by this problem, please contact us so we change the text color of your forms to white.

We welcome your suggestions about form look/style configuration options you would find useful, besides colors and border.

How to Embed a Form Into Your Site

FormSmarts supports two ways to integrate a form into your website or blog: linking and embedding. Embedding lets you place the form on your site alongside other content. Linking gives your form its own separate web page. Both have advantages and disadvantages. Many users think embedding the form into their site gives them more control. That’s far from always being the best option.

Embed Short Contact & Feedback Forms Onto your Site

You can embed a contact form, customer inquiry form or short feedback form onto your site without affecting user experience.

Embed a Form When…

  • The form is short — 10-15 input fields maximum
  • It is self comprehensible and form filling instructions are not needed

There is unfortunately no way to embed a larger registration form or survey onto your site without having a negative effect on user experience. For those forms, simply link to the FormSmarts URL of the form and share that URL (or the form’s shortened URL) on social media.

If you decide to embed a form onto your site, always use the embed code snippet provided by the form builder. Do not embed a form using the FormSmarts URL of the standalone form, even if that appears to work with your browser. This conflicts with security restrictions we’re putting in place and those forms will soon be blocked by modern browsers.

Link to Registration Forms and Other Large Forms

A standalone form almost invariably gives a better, frictionless user experience. In order to protect the security and privacy of their users, browsers impose a growing number of restrictions on embedded content. These restrictions affect a form’s usability when it is embedded on your site.

Link To a Form When…

  • The form is long or complex
  • The form is accessed both by web visitors and via social media or a mailing list
  • The form in intended for a large audience, that may be using a wide range of browsers and devices
  • Your audience is likely to fill out the form on mobile device
  • You expect a large number of form submissions
  • Event registration forms and surveys perform better when accessed by URL on their own page

A word of wisdom: Resist the temptation to systematically embed web forms on your site for irrational reasons “because it gives you more (apparent) control”. Some web forms perform better on their own page.

  • Standalone forms accessed by URL load faster and are more scalable
  • They are more reliable
  • They offer more flexibility
  • There are no sizing or other user experience issues

Placing the Embedding Code On Your Site

To embed a form into your website, visit the Forms tab, and click Embed to see the form code.

Embed Form

Copy the HTML code, then paste it somewhere in the HTML source of the
host page on your website or blog. If you’re using an online service like Blogger, that’s
all you have to do. Otherwise, you need to publish the page to your web server.

A word of warning: do not try to save the form as an HTML page, and publish that page. This will not work. You must paste the code exactly as given. Do not attempt to alter, remove, or hide the mention “web form by FormSmarts”, or the link to our Privacy Policy. This would be a breach of our Terms of Use, and your account would risk to be terminated without notice.

Changing a Form, Once the Code Is on Your Site

Any changes you make to a form using the form builder will show up straight away on your website. You do not need to update the embedding code. However, as a result of adding more fields, or changing a text box to a larger text area, the frame containing the form may no longer be high enough to fit the form. You will then need to re-publish the embedding code to your site. See the section about Form Sizing below.

Customizing Your Form

You can customize several aspects of your forms in the Form Details screen of your account.

Web Form Sizing

Why Is There Extra Space at the Bottom of the Form?

Forms are contained within an HTML frame (“iframe” for geeks). The frame has a fixed size, which is computed for each form, based on several factors, like the number and type of fields used, and the form layout chosen.
It is necessary to leave room at the bottom of the form for error messages that may need to be displayed during a form submission. That’s the reason for the extra space at the bottom of a form.

Manually Changing the Height or Width of a Form

You can change the size of a web form widget by editing the value of the height and width attributes in the HTML snippet (a.k.a. form embed code) given by the form builder.
We do not recommend changing the height of forms. If you do, remember to allow extra space at the bottom of the form, as discussed in the previous section.
The width of embedded web forms can be resized down to 360px without side-effects, and should degrade well beyond that.

How Do I Get Rid of the Vertical Scrollbar

With time, you may need to add more fields to your forms, but forget to refresh the form HTML code on your site. Since the frame height is hard-coded into the code on your website, the form may no longer fit into the frame, and a vertical scrollbar will then appear. That is not desirable on a usability standpoint, so you are advised to update the code on your site whenever you add new fields, or change a text box to a text area.

Only One Form Per Page

It is against our terms of service to embed more than one form in a single web page.

Embed a Form to a Facebook Fan Page

The easiest way to add a form to a Facebook page is to use the FormSmarts URL that comes with each form. Click on the URL link in the Forms Tab of the form builder to show form URLs instead of embedding code. You may also embed the form into your Facebook page using an FBML Box. See instructions to embed a form to Facebook. Feel free to post your questions in the relevant thread of our forum on FormSmarts’ Facebook page if you need help.

About the Form Builder Blog

The Online Form Builder Blog is published by FormSmarts, a web form service providing all you need to create a form and publish it online in minutes. FormSmarts makes it easy to build a form and embed it on your site. You can then get form submissions by email or store them on FormSmarts and download an Excel report. Learn more about the many other benefits of FormSmarts.