How do I change my eTrigue-enabled Form's submit button to an image? – eTrigue Support

NOTE - Changing the Form submit button to use an image, requires custom CSS to be added to the HTML of your landing page. You will need to edit the code in order to customize this aspect.

Go to Assets > Explore Landing Pages.
Create or Edit your Landing Page.
If your landing page does not already include an eTrigue-enabled Form, follow the steps to insert a Standard Form into the Landing Page.
Click on the HTML button, located in the top left corner of the WYSIWYG toolbars, to view your Landing Page Template in HTML mode.
If you have not already added a <style type="text/css"> tag to the <head> tag of your page, then review How do I add CSS to an eTrigue-hosted Landing Page?

Add the following CSS code after the <style type="text/css"> tag, but before the </style> tag, of your page.

form input#etrSubmit {
    background: url("/images/button.gif") no-repeat scroll 0 0 transparent;
    border: 0 none;
    cursor: pointer;
    display: block;
    height: 40px;
    width: 100px;
}

Note -

The "Background" attribute should be set to point to the actual URL of the image that is to be used as the button of your form
The "Height" and "Width" attributes should be adjusted to the same exact dimensions of the image to be used. If these dimensions are set to be different than the image, button alignment and spacing issues may result.

Locate the code that contains your form's button attributes-- it will look something like this:
```
<input value="submit" class="button" onclick="checkData();" id="etrSubmit" type="button">
```
Remove the word "submit" from the value attribute. The code should look like this after the change:
```
<input value="" class="button" onclick="checkData();" id="etrSubmit" type="button">
```
To retain your changes, click either:
- Save: Overwrite the preexisting Landing Page with which you started, with your changes.
- Save As: Create a NEW Landing Page that includes your changes.
After saving your work, you can review your changes on the LIVE web page by clicking on the View link, next to Landing Page URL, at the top of the screen. A new window in your browser will open, and you will be directed to the LIVE Landing Page.

To learn how to create a new Standard eTrigue-enabled web form, click here.

To learn how to add a Standard eTrigue-enabled web form to your DemandCenter Landing pages, click here.

To learn how to add CSS to your eTrigue hosted Landing Page, click here.

To learn how to create new DemandCenter-hosted Landing Pages, click here.

To learn how to view and edit your existing DemandCenter Landing Pages, click here.