Changing the width of fields in aiContactSafe forms

In 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:

/media/aicontactsafe/cssprofiles/profile_css_1.css

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

div#aiContactSafe_mainbody_1 input#aics_name {     width:240px; } div#aiContactSafe_mainbody_1 input#aics_email {     width:240px; } div#aiContactSafe_mainbody_1 input#aics_phone {     width:240px; } div#aiContactSafe_mainbody_1 input#aics_subject {     width:240px; }

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=”https://” /></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 {     width:240px; }

   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!