XF 2.0 Modify the register_form template

AndreaMarucci

Well-known member
Hello, I'd need to modify this template to include a text message at the top before the first field of the form but I've looked at the template and really don't know where to put the text.

This is the template. The first field is USERNAME and I'd like to put the text before in evidence so something like <h1>

Thanks
Code:
<xf:js src="xf/login_signup.js" min="1" />
<xf:page option="uix_hideExtendedFooter" value="1" />
<xf:page option="uix_hideNotices" value="1" />
<xf:page option="uix_hideBreadcrumb" value="1" />
<xf:comment><xf:page option="uix_hideNavigation" value="1" /></xf:comment>

<xf:title>{{ phrase('register') }}</xf:title>

<xf:if is="$providers is not empty">
    <div class="block">
        <div class="block-container">
            <div class="block-body">
                <xf:formrow rowtype="button"
                    label="{{ phrase('register_faster_using') }}">

                    <ul class="listHeap">
                        <xf:foreach loop="$providers" value="$provider">
                            <li>
                                <xf:button href="{{ link('register/connected-accounts', $provider, {'setup': true}) }}"
                                    class="button--provider button--provider--{$provider.provider_id}">
                                    {$provider.title}
                                </xf:button>
                            </li>
                        </xf:foreach>
                    </ul>
                </xf:formrow>
            </div>
        </div>
    </div>
</xf:if>

<xf:form action="{{ link('register/register') }}" ajax="true" class="block"
    data-xf-init="reg-form" data-timer="{$xf.options.registrationTimer}">

    <div class="block-container">
        <div class="block-body">
            <xf:comment>Spam catcher field</xf:comment>

            <xf:macro template="register_macros" name="username_row"
                arg-fieldName="{{ $regForm.getFieldName('username') }}"
                arg-value="{$fields.username}" />
            
            <xf:textboxrow name="username" value="" autocomplete="off" rowclass="formRow--limited"
                maxlength="{{ max_length($xf.visitor, 'username') }}"
                label="{{ phrase('user_name') }}"
                explain="{{ phrase('please_leave_this_field_blank') }}" />

            <xf:comment>Spam catcher field</xf:comment>
            <xf:if is="{{ rand(0, 2) == 1 }}">
                <xf:textboxrow name="{{ $regForm.getFieldName('email_hp') }}" value="" type="email" autocomplete="off"
                    rowclass="formRow--limited"
                    maxlength="{{ max_length($xf.visitor, 'email') }}"
                    label="{{ phrase('email') }}"
                    explain="{{ phrase('please_leave_this_field_blank') }}" />
            </xf:if>

            <xf:macro template="register_macros" name="email_row"
                arg-fieldName="{{ $regForm.getFieldName('email') }}"
                arg-value="{$fields.email}" />

            <xf:comment>Spam catcher field</xf:comment>
            <xf:if is="{{ rand(0, 2) == 1 }}">
                <xf:textboxrow name="email" value="" type="email" autocomplete="off" rowclass="formRow--limited"
                    maxlength="{{ max_length($xf.visitor, 'email') }}"
                    label="{{ phrase('email') }}"
                    explain="{{ phrase('please_leave_this_field_blank') }}" />
            </xf:if>

            <xf:comment>Spam catcher field</xf:comment>
            <xf:if is="{{ rand(0, 2) == 1 }}">
                <xf:textboxrow name="password" type="password" autocomplete="off" rowclass="formRow--limited"
                    label="{{ phrase('password') }}"
                    explain="{{ phrase('please_leave_this_field_blank') }}" />
            </xf:if>

            <xf:textboxrow name="{{ $regForm.getFieldName('password') }}" type="password" autocomplete="off"
                label="{{ phrase('password') }}"
                hint="{{ phrase('required') }}"
                required="required" />

            <xf:macro template="register_macros" name="dob_row" />

            <xf:macro template="register_macros" name="location_row"
                arg-value="{$fields.location}" />

            <xf:macro template="register_macros" name="custom_fields" />

            <xf:captcharow label="{{ phrase('verification') }}" hint="{{ phrase('required') }}" />

            <xf:macro template="register_macros" name="email_choice_row" />

            <xf:macro template="register_macros" name="tos_row" />
        </div>
        <xf:macro template="register_macros" name="submit_row" />
    </div>

    <xf:hiddenval name="reg_key">{{ $regForm.getUniqueKey() }}</xf:hiddenval>
    <xf:hiddenval name="{{ $regForm.getFieldName('timezone') }}" value="" data-xf-init="auto-timezone" />
</xf:form>
 
Hello,

Something like this :
190945

In your register_form template, find this :
Code:
<xf:form action="{{ link('register/register') }}" ajax="true" class="block"

Add this before :
Code:
<div class="blockMessage blockMessage--important blockMessage--iconic">
    Hello, some text blabla !
</div>

If you want the notice at the bottom :
190946

In your register_form template, find this :
Code:
</xf:form>

Add this after :
Code:
<div class="blockMessage blockMessage--important blockMessage--iconic">
    Hello, some text blabla !
</div>

Regards, SyTry
 
I've put a link in the text
Code:
<div class="blockMessage blockMessage--important blockMessage--iconic">
    Per effettuare la registrazione è necessario avere il codice di registrazione fornito nell'email di avvenuta iscrizione al KOG ed avere già versato la quota.<br>Se non sei ancora iscritto al KOG <a href="https://www.kog.it/sito/iscrizione-al-kog/"><b>puoi farlo cliccando qui</b></a>.
</div>
and this is the result

 
I've put a link in the text
Code:
<div class="blockMessage blockMessage--important blockMessage--iconic">
    Per effettuare la registrazione è necessario avere il codice di registrazione fornito nell'email di avvenuta iscrizione al KOG ed avere già versato la quota.<br>Se non sei ancora iscritto al KOG <a href="https://www.kog.it/sito/iscrizione-al-kog/"><b>puoi farlo cliccando qui</b></a>.
</div>
and this is the result

UI.X problem, you may ask @ThemeHouse :
190947

display: flex;
190948
 
Top Bottom