Beautiful buttons on landing pages


Wymaga aktualizacji!

A key element while creating landing pages is a button that submits data efficiently—the so‑called Call To Action Button.There is a lot of information out there about designing good buttons. Just a simple change of the label can go a long way, as evidenced here. Strong visual accents often emphasize the button leaving no room for users’ uncertainty. How do you make such a button in ActiveForms?

Standard ActiveForms buttons are rectangular and displayed at the bottom of forms. Administrators can use Form Settings and Edytora Tematów to set the labels, colours, fonts, backgrounds, borders and so on. Ambitious landing page projects usually have more stringent requirements. In such situations you can give up standard buttons and create your own button in HTML code.

First, embed a graphic that will act as a button in Layout Editor. Add the following code so that clicking the image will submit the entry:


Clicking the graphic will invoke the JavaScript send. action. Apart from send there are also next and backactions that take users of multipage forms to the previous and following pages. Second, hide the standard set of buttons. Add the relevant line to the layout CSS code according to the instructions:

.eforms_PageButtonsGrid {
  display: none;

Third, enjoy your beautiful, customised landing page and start competing for customers. Will a button next to the form work better? Are the fields unclear? Is the background too grey? Don’t be afraid to experiment!

recent posts
3rd Apr 2014
Faster than ever!
5th Dec 2013
Live validation!
2nd Dec 2013
Features distilled
12th Mar 2012
Flicking Channels
26th Jan 2012
Your Own Error Page
9th May 2011
Box Properties
15th Apr 2011
Grouping Fields
13th Apr 2011
Form Versioning
24th Feb 2011
Form Access Modes
22nd Feb 2011
Required Fields
4th Feb 2011