Trying to create subscribtion form

Professional Joomla social template with metro design and JomSocial extension support.
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Sat Jun 14, 2014 4:15 pm
Reply with quote
Report this post
Hi, I have a code from mailing service:
Code: Select all
<p>&nbsp;</p>
<!-- SmartResponder.ru subscribe form code (begin) -->
<form style="margin: 0; padding: 0;" action="http://smartresponder.ru/subscribe.html" method="post" name="SR_form"><input type="hidden" value="1" name="version" /><input type="hidden" value="0" name="tid" /><input type="hidden" value="425518" name="uid" /><input type="hidden" value="ru" name="lang" />
   <table>
      <tbody>
         <tr>
            <td style="padding: 5px; border: 1px solid #ff0000; background-color: #eeeeee;">
               <table>
                  <tbody>
                     <tr>
                        <td><input type="hidden" value="677253" name="did[]" />
                        </td>
                     </tr>
                     <tr>
                        <td style="font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;">Ваше имя:&nbsp;<b>*</b>
                        </td>
                     </tr>
                     <tr>
                        <td><input style="font-family: Verdana; font-size: 8pt; color: #000000; background-color: #ffffff;" type="text" placeholder="ИМЯ" size="20" value="" name="field_name_first" />
                        </td>
                     </tr>
                     <tr>
                        <td style="font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;">Ваш e-mail:&nbsp;<b>*</b>
                        </td>
                     </tr>
                     <tr>
                        <td style="text-align: center;"><input style="font-family: Verdana; font-size: 8pt; color: #000000; background-color: #ffffff;" type="text" size="20" value="" name="field_email" />
                        </td>
                     </tr>
                     <tr>
                        <td><input style="font-family: Verdana; font-size: 8pt; color: #000000; background-color: #f0f0c0; font-weight: bold;" type="submit" value="Подписаться сейчас!" name="SR_submitButton" />
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
</form>
<!-- SmartResponder.ru subscribe form code (end) -->

I was trying to make the form in one row, but no matter what I do - it will make filed "field_name_first" smaller in hight compared to "email" field, and for some reason button "Submit" will always go to far left, even if I put everithing in table and the button will go to the third column, on page it will appear far left, like it's in the first column. I guess it is coded somewhere in the template. So, how do I override these settings without changing the filed name (to keep it in line with mailing service) and without changing the way buttons and fileds look everywhere else in the site?
Thanks.
The link is http://v-boge.org/menyu/o-sluzhenii/#gkBottom3
User avatar
Platinum Boarder

GK User
Sat Jun 14, 2014 6:08 pm
Reply with quote
Report this post
Took another code, more contemporary - stays in the center of page unless I try to make it behave on template's terms - then again the button will move to far left... I woul really like it to look and behave the way the whole template does, so what code in override.css woul make this form in one line, name first, email then, and submet button third? Thanks.
The code now is:
Code: Select all
<p>&nbsp;</p>
<!-- SmartResponder.ru subscribe form code (begin) -->
<link rel="stylesheet" href="https://imgs.smartresponder.ru/e1bbeb24091b44f1f4048bbc87edacd11278fd23/">
<script type="text/javascript" src="https://imgs.smartresponder.ru/52568378bec6f68117c48f2f786db466014ee5a0/"></script>
<script type="text/javascript">
    _sr(function() {
        _sr('form[name="SR_form_258438_71"]').find('div#sr-preload_').prop('id', 'sr-preload_258438_71');
        _sr('#sr-preload_258438_71').css({'width':parseInt(_sr('form[name="SR_form_258438_71"]').width() + 'px'), 'height':parseInt(_sr('form[name="SR_form_258438_71"]').height()) + 'px', 'line-height':parseInt(_sr('form[name="SR_form_258438_71"]').height()) + 'px'}).show();
        if(_sr('form[name="SR_form_258438_71"]').find('input[name="script_url_258438_71"]').length) {
            _sr.ajax({
                url: _sr('input[name="script_url_258438_71"]').val() + '/' + (typeof document.charset !== 'undefined' ? document.charset : document.characterSet),
                dataType: "script",
                success: function() {
                    _sr('#sr-preload_258438_71').hide();
                }
            });
        }
    });
</script>
<div id="outer_alignment" align="center">
    <form style="width: 299px; border: 1px dashed rgb(200, 200, 200); margin-left: ; border-radius: 0px;" class="sr-box" method="post" action="https://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_258438_71">
        <input name="field_name" class="sr-name" type="text">
        <div id="sr-preload_" style="display: none; background-color: #f6f6f6; opacity: 0.5; position: absolute; z-index: 100; text-align: center; font: bold 15px Arial;">Загрузка...</div>
        <ul class="sr-box-list"><li class="sr-258438_71" style="text-align: center; background-color: rgb(251, 251, 251); border: 0px solid rgb(0, 0, 0); border-radius: 0px; height: auto;"><label style="font-family: arial; color: rgb(84, 93, 103); font-size: 18px; font-weight: bold; height: auto; line-height: 25px;" class="">Подписка на рассылку</label><input style="font-family: Arial; color: rgb(0, 0, 0); font-size: 12px; font-style: normal; font-weight: normal; background-color: rgb(255, 255, 255); border: medium none; box-shadow: none;" value="" name="element_header" type="hidden"></li><li class="sr-258438_71" style="background: none repeat scroll 0% 0% rgb(251, 251, 251); text-align: center; border-radius: 0px; height: 50px;"><label class="remove_labels" style="font-weight: normal; font-family: arial; color: rgb(0, 0, 0); font-size: 12px; font-style: normal; display: none;"></label><input value="Ваше имя:" style="background-image: none; font-weight: normal; background-color: rgb(255, 255, 255); font-family: arial; color: rgb(200, 200, 200); font-size: 12px; font-style: normal; border: 1px solid rgb(200, 200, 200); border-radius: 0px; height: 35px; box-shadow: none; margin-top: 15px;" name="field_name_first" type="text"></li><li class="sr-258438_71" style="background: none repeat scroll 0% 0% rgb(251, 251, 251); text-align: center; border-radius: 0px; height: 50px;">
<label class="remove_labels" style="font-weight: normal; font-family: arial; color: rgb(0, 0, 0); font-size: 12px; font-style: normal; display: none;"></label>
<input value="Ваш email-адрес:" style="background-image: none; font-weight: normal; background-color: rgb(255, 255, 255); font-family: arial; color: rgb(200, 200, 200); font-size: 12px; font-style: normal; border: 1px solid rgb(200, 200, 200); border-radius: 0px; height: 35px; box-shadow: none; margin-top: 15px;" name="field_email" class="sr-required" type="text">
            </li><li class="sr-258438_71" style="text-align: center; height: 50px; background-color: rgb(251, 251, 251); border-radius: 0px; border: 0px none;"><input style="font-family: Arial; color: rgb(0, 0, 0); font-size: 12px; font-style: normal; font-weight: normal; background-color: rgb(255, 255, 255); border: medium none; box-shadow: none;" value="" name="element_privacy" type="hidden"><table id="elem_table_element_privacy" style="display:inline-table; border-collapse: separate;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="background: url('https://imgs.smartresponder.ru/on/60085662f066f6eb63104ba44dbe21ec3df28f7b/') no-repeat scroll 0% 42% transparent; width: 14px; height: 16px;" id="elem_left_element_privacy" valign="middle"></td><td id="elem_container_element_privacy" style="vertical-align: middle;"><label style="font-family: arial; color: rgb(173, 173, 173); font-size: 11px; font-weight: bold; margin-left: 5px; text-align: left;" class="sr-element">Никакого спама, гарантируем!</label></td><td id="elem_right_element_privacy"></td></tr></tbody></table></li><li class="sr-258438_71" style="background: none repeat scroll 0% 0% rgb(251, 251, 251); text-align: center; border-radius: 0px; border: 0px none; height: 65px;"><table id="elem_table_subscribe" style="display: inline-table; border-collapse: separate; margin-top: 12px;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="background: url('https://imgs.smartresponder.ru/on/bb76f843df9be26bc9c673d51311b75f02a4a48d/') no-repeat scroll left center transparent; width: 17px; height: 35px;" id="elem_left_subscribe" valign="middle"></td><td id="elem_container_subscribe" style="vertical-align: middle;"><input style="font-family: arial; color: rgb(255, 255, 255); font-size: 14px; font-weight: bold; border: 0px solid rgb(240, 240, 240); background: url('https://imgs.smartresponder.ru/on/29cdddd2c7584ef90392a40e9f768a8629cd0337/') repeat scroll left center transparent; height: 35px; width: 100%; margin: 0px; padding: 0px 12px; box-shadow: none;" name="subscribe" value="Подписаться" type="submit"></td><td style="background: url('https://imgs.smartresponder.ru/on/246c141e33d5150d05cc1c6aaa8cf835f4387a36/') no-repeat scroll left center transparent; width: 17px; height: 35px;" id="elem_right_subscribe"></td></tr></tbody></table></li></ul>
        <input name="uid" value="425518" type="hidden">
    <input name="did[]" value="677253" type="hidden"><input name="tid" value="0" type="hidden"><input name="lang" value="ru" type="hidden"><input value="https://imgs.smartresponder.ru/on/6e7d54aeeac42d70e634c580f2d1395c1a8959f2/258438_71" name="script_url_258438_71" type="hidden"></form>
</div>
<!-- SmartResponder.ru subscribe form code (end) -->
User avatar
Platinum Boarder

GK User
Mon Jun 23, 2014 9:43 pm
Reply with quote
Report this post
Topic may me closed.
May be lots of unnecesary code, but looks the way I wanted it to:
Code: Select all
form[name="SR_form_3_90"] input[name="subscribe"] {
  display: inline;
  color: #fff !important;
  float: none;

}

form[name="SR_form_3_90"] input[name="subscribe"]:hover {
  color: #ceede9 !important;
  border-color: #ceede9 !important;
}

input[name="field_name_first"] {
  border: 1px solid #ddd;
  border-radius: 2px;
  box-sizing: border-box;
  color: #888;
  font-size: 14px;
  font-weight: 300;
  height: 41px;
  max-width: 100% !important;
  padding: 0 10px;
}

input[name="field_email"] {
  border: 1px solid #ddd;
  border-radius: 2px;
  box-sizing: border-box;
  color: #888;
  font-size: 14px;
  font-weight: 300;
  height: 41px;
  max-width: 100% !important;
  padding: 0 10px;
}

input[name="subscribe"] {
  border: 1px solid #ddd;
  border-radius: 2px;
  box-sizing: border-box;
  color: #888;
  font-size: 14px;
  font-weight: 300;
  height: 40px;
  max-width: 100% !important;
  padding: 0 10px;
}
User avatar
Platinum Boarder


cron