STEP 4: Buttons - XSitePro Website Design

Home Previous  Next


Brought to you by XSitePro Website Design Software

professional website design made easy      







In the buttons tab, Step 4 of the Forms Wizard, the first thing we need to specify is whether we want to use a “Text” button or an “Image” button. Let’s take a look at what we mean by these two options:



A normal “Text” button – a standard form submission button for which the text label can be edited. This gives us control over the button text very straightforwardly.


Standard text buttons look like the following examples:






An ‘Image’ button – a static graphical button for which the button text cannot be altered (without editing the actual graphic itself). If opting for the graphical button you may use one of the pre-supplied buttons within the wizard, or select your own graphical button as preferred. Image buttons can look exactly as you want them – here are a few examples of the image buttons within the Forms Wizard:





Depending on which option above has been selected, the settings below the button type selector will change appropriately.


The two screens below show the different options, depending on which button-type has been selected:






Text Button Options


With the “Use a normal text button” option selected, as detailed above, there are eight settings for us to adjust, each of which we will now examine, below:


Button Text – The actual text that the visitor will see displayed on the button face. This text should make it clear to the user that in clicking the button their information will be submitted.



Button Background Color – The button color can be set to any color you want, so that it ties in perfectly with your overall form design. Whatever color your choose, do bear in mind that it should contrast sufficiently with the button text so that visitors can read it without any difficulty. Select your color using the color-picker tool.



Button Border Color – The button has a thin border that you can change the color of, to suit your design. If you wish to effectively ‘remove’ the border, simply set the border to the same color as the button background itself. Again, set the color using the color-picker tool.



Button Text Font – Choose a font from the drop-down list for your button text. It is strongly recommended that you choose a font that is clear and easy to read, such as Arial, Verdana, Microsoft San Serif or similar.



Button Text Font Size – Your button text can be resized using this font size control. Pick a font size from the drop-down list. You can choose any size between 8pt and 28pt.



Button Text Font Style – If you would like to make your button text bold, italic or underlined simply press the appropriate button control.





Button Text Font Color – The text on the button itself can be any color. Choose your font color using the color-picker tool.



Button Text Alignment – With your button designed, you may choose whether you would like the button to be aligned left, centered or to the right of your form. Experiment with the position of your button until you achieve the desired effect. To adjust this setting, use the drop-down control.



Image Button Options


With the “Use an image for the submit button” option selected, as detailed earlier in this section, there are just four settings for us to adjust, these are explained below:


Button Style – To select your preferred form button, click the 'Select Image' button.


This will load the Image Library with the form buttons' directories listed on the left side of your screen, ready for browsing.


Click on the directory whose name best describes the type of form action you want. For example, if this is a general form, then you could just use a 'Submit' button, but if this is a Newsletter sign-up form, then a button such as 'Join' or 'Sign Me Up' might be more appropriate.





Make your selection from the available buttons. The background color should already be set to that of your form, but if you wish to change this you may do so using the background color selector, beneath the preview window.


Once you are happy with your choice of submit button, click the 'Insert' button to return to the forms wizard.





ALT Text – With your button image now chosen, you can specify the ALT text to be used for this button image by entering it into this text box. This is very important to remember to set, since people using screen-readers to navigate your site may rely on this ALT text to identify the submit button, and so submit their information to you.



Button Alignment - You may choose whether you would like the button to be aligned left, centered, or to the right of your form using this drop-down control. As suggested in the previous section, it’s a good idea to simply experiment with this setting until you achieve the preferred result.



Having adjusted the settings for your submit button, you may now click the button_application_next at the bottom of your screen. This will advance the Forms Wizard onto Step 6 of the form design process.

Home  Previous  Next