Apply css to form only in one domain

Question

Good morning.

I have a website that is available in en and en. On this site I have a contact form:

<div class="form_cotation">
<header>
    <p><?php echo lang('request_cotation'); ?></p>
    <a href="javascript:void(0)" class="toggle"><span class="icon_arrow_dw"></span></a>
</header>
<form name="cotation" class="form cotation" action="contact/send" method="post">
    <input type="hidden" name="form_input" value="FORM_COTACAO" />
    <div class="grid_1">
        <input type="text" name="name" placeholder="<?php echo lang('name') ;?>*" value="<?php echo lang('name') ;?>*" data-value="<?php echo lang('name') ;?>*" class="input watermark" />
    </div>
    <div class="grid_1">
        <input type="text" name="email" placeholder="<?php echo lang('email') ;?>*" value="<?php echo lang('email') ;?>*" data-value="<?php echo lang('email') ;?>*" class="input watermark" />
    </div>
    <div class="grid_1">
        <div class="grid_1_1">
            <select id="country" name="country_code" data-size="10">
                <?php foreach($list_countries as $key => $value): ?>
                    <?php if($value->sPhoneCode != '0'): ?>
                        <option data-ddi="<?php echo $value->sPhoneCode; ?>" <?php echo lang('country_code') == $value->sISOCode ? 'selected="selected"' : ''; ?> data-iconurl="<?php echo base_url().'/upload/flags/'.$value->sISOCode; ?>.jpg" value="<?php echo $value->sISOCode; ?>"><?php echo $value->sName; ?> - <?php echo $value->sPhoneCode; ?></option>
                    <?php endif; ?>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="grid_1_2">
            <input type="text" name="phone" placeholder="<?php echo lang('phone'); ?>" data-value="<?php echo lang('phone'); ?>" value="<?php echo lang('phone'); ?>" class="input watermark" />
        </div>
        <div class="grid_1_2" style="padding-top:10px;">
            <?php if(lang('abbr') == 'pt'): ?>
            <input type="text" name="locality" placeholder="Localidade*" data-value="locality" value="Localidade*" class="input watermark" style="width: 239px !important; " />
        <?php endif; ?>
        </div>
    </div>
    <?php if(lang('abbr') == 'pt'): ?>
        <input type="hidden" name="state" value="pt" />
        <input type="hidden" name="city" value="pt" />
    <?php else: ?>
        <div class="grid_1">
            <div class="grid_1_1">
                <select name="state" class="custom" data-width="76" data-value="UF*">
                    <option value="">UF*</option>
                    <option value="AC">AC</option>
                    <option value="AL">AL</option>
                    <option value="AP">AP</option>
                    <option value="AM">AM</option>
                    <option value="BA">BA</option>
                    <option value="CE">CE</option>
                    <option value="DF">DF</option>
                    <option value="ES">ES</option>
                    <option value="GO">GO</option>
                    <option value="MA">MA</option>
                    <option value="MT">MT</option>
                    <option value="MS">MS</option>
                    <option value="MG">MG</option>
                    <option value="PA">PA</option>
                    <option value="PB">PB</option>
                    <option value="PR">PR</option>
                    <option value="PE">PE</option>
                    <option value="PI">PI</option>
                    <option value="RJ">RJ</option>
                    <option value="RN">RN</option>
                    <option value="RS">RS</option>
                    <option value="RO">RO</option>
                    <option value="RR">RR</option>
                    <option value="SC">SC</option>
                    <option value="SP">SP</option>
                    <option value="SE">SE</option>
                    <option value="TO">TO</option>
                </select>
            </div>
            <div class="grid_1_2<?php echo lang('abbr') == 'pt' ? '_pt' : '' ?>">
                <input type="text" name="city" placeholder="<?php echo lang('city') ;?>*" value="<?php echo lang('city') ;?>*" data-value="<?php echo lang('city') ;?>*" class="input watermark" />
            </div>
        </div>
    <?php endif; ?>

    <div class="grid_1">
        <div class="grid_1_<?php echo lang('abbr') == 'pt' ? '2_pt' : '3' ?>">
        <!--div class="grid_1_2"-->
            <input type="text" name="company" placeholder="<?php echo lang('company') ;?>*" value="<?php echo lang('company') ;?>*" data-value="<?php echo lang('company') ;?>*" class="input watermark" />
        </div>
        <?php
        if(lang('abbr') == 'pt'){
            ?>
            <input type="hidden" name="employers" value="" />
            <?php
        }else{
        ?>
        <div class="grid_1_4">
            <select id="employers" name="employers" class="custom" data-width="125" data-value="<?php echo lang('employers'); ?>*">
                <option value=""><?php echo lang('employers'); ?>*</option>
                <option value="0-10">0 - 10</option>
                <option value="11-25">11 - 25</option>
                <option value="26-80">26 - 80</option>
                <option value="81-150">81 - 150</option>
                <option value="150+">150+</option>
            </select>
        </div>
        <?php 
        }
        ?>

    </div>

    <div class="grid_1">
        <textarea name="description" data-value="<?php echo lang('description'); ?>*" placeholder="<?php echo lang('description'); ?>*" class="watermark"><?php echo lang('description'); ?>*</textarea>
    </div>
    <div class="grid_1">
        <div class="right">*<?php echo lang('required_fields'); ?></div>
        <input type="submit" title="<?php echo lang('send');?>" class="btn" value="<?php echo lang('send');?>" />
    </div>
</form>

As you can see in the code, according to the domain (pt or br) the form receives some different fields. However, I need to make some css modifications in fields that appear in both, only in pt.

How can I do this to apply the styles?

Answer 1

You can write your own css and check when it is pt, if it is you can add the class of css that you created, example:

var isPt = true; 

if(isPt){ 
   $('#nome').addClass('nomePt');
}else{ 
   $('#nome').addClass('nomeBr');
}

.nomePt{
    background:red;
}
.nomeBr{
    background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" name="nome" value="" id='nome'/>

you can include css direct from js example:

$('#nome').css( 'background', 'black' );

both using jQuery

Answer 2

Skyirn, just do the same way they are today, using if where you want to insert the CSS:

<textarea (...) <?php if(lang('abbr') == 'pt'){ echo 'style="font-size: 10px;"'; } ?> >textarea</textarea>