How to customize form inputs in Starter Theme?

[Jose J. Fernández]

Hi there.

I am trying to modify how input tags for the login form are rendered in file /templates/customer/_partials/login-form.tpl, and found this code that generates them:

{block name='form_fields'}
	{foreach from=$formFields item="field"}
		{block name='form_field'}
			{form_field field=$field}
		{/block}
	{/foreach}
{/block}

Now I want to change the HTML of these inputs, mostly to insert new attributes on them (classes, placeholders maybe... whatever). How can this be achieved?

[Jose J. Fernández]

I have managed to do this. The Starter Theme got it right, in my opinion. You just need to edit the file /templates/_partials/form-fields.tpl, where markup for every available form field type is waiting for you to edit them.

[Surffari]

Hi,

I'm trying to figure out where I need to define the placeholder text?

I have th below code that implements the attribute, but I have no clue where I would define the text for the placeholder so that it would exist in {$field.availableValues.placeholder} for the field I want?

 

      {else}
        {block name='form_field_item_other'}
          <input
            class="form-control"
            name="{$field.name}"
            type="{$field.type}"
            value="{$field.value}"
            {if isset($field.availableValues.placeholder)}placeholder="{$field.availableValues.placeholder}"{/if}
            {if $field.maxLength}maxlength="{$field.maxLength}"{/if}
            {if $field.required}required{/if}
          >
          {if isset($field.availableValues.comment)}
            <span class="form-control-comment">
              {$field.availableValues.comment}
            </span>
          {/if}
        {/block}
      {/if}