Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments

Make fillable fields not blue

Avatar

Level 1

Hello, I created a fillable form from a .pdf file..  Certain fields on the original form were color coded for the user to know what fields are required to be filled in.  The color coded fields are a light blue color though.  When I place fillable fields on the form this makes all the fields blue which I can have. Is there a way to not have the fields blue? Can I somehow make them clear instead?

1 Reply

Avatar

Level 3

The user has the option to highlight fields or not, but that is user by user preference.  If they choose to highlight fields they will be light blue.  You can denote certain fields to be required and they will be outlined in red, with the light blue highlight.

So it sounds like you just need to make a simple change to show certain fields as required so you get the red outline.

I do have some code that I got from this or another forum that demonstrates how to highlight the current field that a form filler is working with, highlight fields that a form filler is required to fill, and use message boxes to provide feedback to a form filler.  I've pasted it below.

// This script performs a series of checks to verify that any required fields

// contain data. In this case, each field is individually checked to verify

// that the value of the field is non-null or an empty string. If the value

// of the field is null or an empty string, an alert message is displayed

// indicating that data must be input into the field and the background color

// of the fillable area is changed to red.

// Use this variable to indicate if a field does not contain data.

form1.#subform[0].Name::enter - (JavaScript, client)

Name.border.edge.color.value

= "0,0,255";

form1.#subform[0].Name::exit - (JavaScript, client)

Name.border.edge.color.value

= "255,255,255";

form1.#subform[0].Name::mouseEnter - (JavaScript, client)

Name.border.edge.color.value

= "0,0,255";

form1.#subform[0].Name::mouseExit - (JavaScript, client)

Name.border.edge.color.value

= "255,255,255";

form1.#subform[0].Address::enter - (FormCalc, client)

Address.border.edge.color.value

= "0,0,255";

form1.#subform[0].Address::exit - (JavaScript, client)

Address.border.edge.color.value

= "255,255,255";

form1.#subform[0].Address::mouseEnter - (FormCalc, client)

Address.border.edge.color.value

= "0,0,255";

form1.#subform[0].Address::mouseExit - (JavaScript, client)

Address.border.edge.color.value

= "255,255,255";

form1.#subform[0].City::enter - (JavaScript, client)

City.border.edge.color.value

= "0,0,255";

form1.#subform[0].City::exit - (JavaScript, client)

City.border.edge.color.value

= "255,255,255";

form1.#subform[0].City::mouseEnter - (JavaScript, client)

City.border.edge.color.value

= "0,0,255";

form1.#subform[0].City::mouseExit - (JavaScript, client)

City.border.edge.color.value

= "255,255,255";

form1.#subform[0].State::enter - (JavaScript, client)

State.border.edge.color.value

= "0,0,255";

form1.#subform[0].State::exit - (JavaScript, client)

State.border.edge.color.value

= "255,255,255";

form1.#subform[0].State::mouseEnter - (JavaScript, client)

State.border.edge.color.value

= "0,0,255";

form1.#subform[0].State::mouseExit - (JavaScript, client)

State.border.edge.color.value

= "255,255,255";

form1.#subform[0].ZipCode::enter - (JavaScript, client)

ZipCode.border.edge.color.value

= "0,0,255";

form1.#subform[0].ZipCode::exit - (JavaScript, client)

ZipCode.border.edge.color.value

= "255,255,255";

form1.#subform[0].ZipCode::mouseEnter - (JavaScript, client)

ZipCode.border.edge.color.value

= "0,0,255";

form1.#subform[0].ZipCode::mouseExit - (JavaScript, client)

ZipCode.border.edge.color.value

= "255,255,255";

form1.#subform[0].Country::enter - (JavaScript, client)

Country.border.edge.color.value

= "0,0,255";

form1.#subform[0].Country::exit - (JavaScript, client)

Country.border.edge.color.value

= "255,255,255";

form1.#subform[0].Country::mouseEnter - (JavaScript, client)

Country.border.edge.color.value

= "0,0,255";

form1.#subform[0].Country::mouseExit - (JavaScript, client)

Country.border.edge.color.value

= "255,255,255";

form1.#subform[0].Telephone::enter - (JavaScript, client)

Telephone.border.edge.color.value = "0,0,255";

form1.#subform[0].Telephone::exit - (JavaScript, client)

Telephone.border.edge.color.value

= "255,255,255";

form1.#subform[0].Telephone::mouseEnter - (JavaScript, client)

Telephone.border.edge.color.value

= "0,0,255";

form1.#subform[0].Telephone::mouseExit - (JavaScript, client)

Telephone.border.edge.color.value

= "255,255,255";

form1.#subform[0].Email::enter - (JavaScript, client)

Email.border.edge.color.value = "0,0,255";

form1.#subform[0].Email::exit - (JavaScript, client)

Email.border.edge.color.value

= "255,255,255";

form1.#subform[0].Email::mouseEnter - (JavaScript, client)

Email.border.edge.color.value

= "0,0,255";

form1.#subform[0].Email::mouseExit - (JavaScript, client)

Email.border.edge.color.value

= "255,255,255";

form1.#subform[0].Button::click - (JavaScript, client)

// This script performs a series of checks to verify that any required fields

// contain data. In this case, each field is individually checked to verify

// that the value of the field is non-null or an empty string. If the value

// of the field is null or an empty string, an alert message is displayed

// indicating that data must be input into the field and the background color

// of the fillable area is changed to red.

// Use this variable to indicate if a field does not contain data.

var

iVar = 0;

if ((Name.rawValue == null) || (Name.rawValue == "")) {

app.alert("Please enter a value in the Name field.");

// Change the color of the fillable area of the text field.

xfa.resolveNode("Name.ui.#textEdit.border.edge").stroke

= "solid";

xfa.resolveNode("Name.ui.#textEdit.border.fill.color").value

= "255,100,50";

// Set the variable to indicate that this field does not contain data.

iVar = 1;

}

else {

// Reset the fillable area of the text field.

xfa.resolveNode("Name.ui.#textEdit.border.edge").stroke

= "lowered";

xfa.resolveNode("Name.ui.#textEdit.border.fill.color").value

= "255,255,255";

}

if

((Address.rawValue == null) || (Address.rawValue == "")) {

app.alert("Please enter a value in the Address field.");

// Change the color of the fillable area of the text field.

xfa.resolveNode("Address.ui.#textEdit.border.edge").stroke

= "solid";

xfa.resolveNode("Address.ui.#textEdit.border.fill.color").value

= "255,100,50";

// Set the variable to indicate that this field does not contain data.

iVar

= 1;

}

else {

// Reset the fillable area of the text field.

xfa.resolveNode("Address.ui.#textEdit.border.edge").stroke = "lowered";

xfa.resolveNode("Address.ui.#textEdit.border.fill.color").value

= "255,255,255";

}

if

((City.rawValue == null) || (City.rawValue == "")) {

app.alert("Please enter a value in the City field.");

// Change the color of the fillable area of the text field.

xfa.resolveNode("City.ui.#textEdit.border.edge").stroke = "solid";

xfa.resolveNode("City.ui.#textEdit.border.fill.color").value = "255,100,50";

// Set the variable to indicate that this field does not contain data.

iVar

= 1;

}

else

{

// Reset the fillable area of the text field.

xfa.resolveNode("City.ui.#textEdit.border.edge").stroke = "lowered";

xfa.resolveNode("City.ui.#textEdit.border.fill.color").value = "255,255,255";

}

if

((State.rawValue == null) || (State.rawValue == "")) {

app.alert("Please enter a value in the State field.");

// Change the color of the fillable area of the text field.

xfa.resolveNode("State.ui.#textEdit.border.edge").stroke

= "solid";

xfa.resolveNode("State.ui.#textEdit.border.fill.color").value

= "255,100,50";

// Set the variable to indicate that this field does not contain data.

iVar = 1;

}

else

{

// Reset the fillable area of the text field.

xfa.resolveNode("State.ui.#textEdit.border.edge").stroke

= "lowered";

xfa.resolveNode("State.ui.#textEdit.border.fill.color").value

= "255,255,255";

}

if ((ZipCode.rawValue == null) || (ZipCode.rawValue == "")) {

app.alert("Please enter a value in the Zip Code field.");

// Change the color of the fillable area of the text field.

xfa.resolveNode("ZipCode.ui.#textEdit.border.edge").stroke

= "solid";

xfa.resolveNode("ZipCode.ui.#textEdit.border.fill.color").value

= "255,100,50";

// Set the variable to indicate that this field does not contain data.

iVar = 1;

}

else {

// Reset the fillable area of the text field.

xfa.resolveNode("ZipCode.ui.#textEdit.border.edge").stroke

= "lowered";

xfa.resolveNode("ZipCode.ui.#textEdit.border.fill.color").value

= "255,255,255";

}

if

((Country.rawValue == null) || (Country.rawValue == "")) {

app.alert("Please enter a value in the Country field.");

// Change the color of the fillable area of the text field.

xfa.resolveNode("Country.ui.#textEdit.border.edge").stroke = "solid";

xfa.resolveNode("Country.ui.#textEdit.border.fill.color").value

= "255,100,50";

// Set the variable to indicate that this field does not contain data.

iVar

= 1;

}

else

{

// Reset the fillable area of the text field.

xfa.resolveNode("Country.ui.#textEdit.border.edge").stroke = "lowered";

xfa.resolveNode("Country.ui.#textEdit.border.fill.color").value = "255,255,255";

}

// If all of the required fields contain data, then the iVar variable is set to

// zero, and a confirmation message is displayed.

if

(iVar == 0) {

app.alert("Thank you for inputting your information.");

}