InMotion Hosting Support Center

field-widths-are-not-the-sameIn our last aiContactSafe tutorial we created a new field, Website URL. After testing the form, we noticed that the width of the textbox for the user's web address is not as long as the other fields (such as Name, Email, and Phone). To make the form look more professional, we would like the text fields to all have the same width. You can do this by changing the width of the fields within the form.


How are aiContactSafe field width's set by default?

The default width for fields in aiContactSafe are set in a CSS file:


The width is set to 240px, as you can see in the following section of code:

div#aiContactSafe_mainbody_1 input#aics_name {
div#aiContactSafe_mainbody_1 input#aics_email {
div#aiContactSafe_mainbody_1 input#aics_phone {
div#aiContactSafe_mainbody_1 input#aics_subject {


Modifying field widths within the profiles CSS

Each profile in aiContactSafe can have its own CSS file to help you style each form uniquely. We can use this CSS to make the fields look more uniform.

  1. Find the ID of the Input

    View the page source of your form and find the code for the field you would like to change. The important thing to note is the ID of the text input (which we've highlighted in red below):

    <div class="aiContactSafe_row" id="aiContactSafe_row_aics_websiteurl"><div class="aiContactSafe_contact_form_field_label_left"><span class="aiContactSafe_label" id="aiContactSafe_label_aics_websiteurl" ><label for="aics_websiteurl" >Website URL</label></span> </div><div class="aiContactSafe_contact_form_field_right"><input type="text" name="aics_websiteurl" id="aics_websiteurl" value="http://" /></div>

  2. Edit the CSS of the Profile

    Within your Joomla 2.5 dashboard, hover over Components in the top menu, then hover over aiContactSafe and click Profiles. Click the Profile you would like to edit, and then click the Edit CSS button.

    Based upon the ID of your field, add the following CSS code and then click Save in the top right menu.

    div#aiContactSafe_mainbody_1 input#aics_websiteurl {

    After saving the change, test your form. As you can see in our screenshot below, we were able to get the Website URL field to have the same width as the other fields!

Was this article helpful?
Continued Education in Course 214: Joomla 2.5 Contact Form
You are viewing Section 7: Changing the width of fields in aiContactSafe forms
Section 6: How to change the order of fields in aiContactSafe forms

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Forum Login

You are NOT logged in. You can still browse our Support Center.

To participate within our Community Support Forum:

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!