0

Две стилни контактни форми за Blogger

контактни форми за Blogger
Здравейте приятели. Днес ви предлагам две стилни форми за контакт за потребителите на Blogger. В предишни мои публикации вече сте се запознали с предложените от мен форми за контакт за вашия блог. Някои от вас предпочитат форма за контакт на статична страница, а други като притурка в страничната колона.



    Но нищо не е в повече, запознайте се и тези две стилни контактни форми. Добре е да имате по-голям избор.


    Първа контактна форма


    Описание

    Първата форма съдържа 3 реда, в които посетителят вписва име, имейл и текста на съобщението, както и бутони за изпращане и изчистване на формуляра.

    Инсталиране

    ➤От контролния панел на вашия блог изберете Оформление ➔ Притурки ➔ Други притурки ➔ изберете формата Контакт.

    ➤Сега създайте нова статична страница и в режим на редактиране на HTML код поставете следния код:


    <div id="twist_blogger_cntct_form">
    <div class="wrap-me">
    <form name="contact-form">
    <span class="name-bg">Вашето име</span><br />
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Вашето име..." size="30" type="text" value="" /><br />
    <br />
    <span class="email-bg">Вашият Email*</span><br />
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Вашият email..." size="30" type="text" value="" /><br />
    <br />
    <span class="message-bg">Вашето съобщение*</span><br />
    <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="съобщение..." rows="5"></textarea><br />
    <span class="send-bg"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Изпрати" /></span>
    <span class="clear-bg"><input class="contact-form-button contact-form-button-submit clear-button" type="reset" value="Изчисти" /></span>
    <br />
    <div style="max-width: 100%; text-align: center; width: 100%;">
    <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
    </div>
    <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
    </div>
    </div>
    </form>
    <br /></div>
    </div>
    <style>
    div#ContactForm1 {display: none !important;}
    /****** Contact Form Designed by www.TwistBlogger.com ******/
    div#twist_blogger_cntct_form {
    padding: 50px 0px;
    border-radius: 2px;
    color: #1D1D1D;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    background-color: #404040;
    font-family: sans-serif;
    }
    div#twist_blogger_cntct_form .wrap-me {
    margin: 0 auto;
    display: block;
    padding: 30px 20px;
    background-color: #F3F3F3;
    max-width: 440px;
    width: 100% !important;
    border-top: 65px solid #FF0000;
    box-sizing: border-box;
    }
    div#twist_blogger_cntct_form .wrap-me:before {
    content: '\f0e0';
    position: absolute;
    font-family: FontAwesome;
    font-weight: normal;
    margin-top: -88px;
    margin-left: -23px;
    left: 50%;
    display: inline-block;
    font-size: 28px;
    width: 53px;
    height: 53px;
    border-radius: 50px;
    text-align: center;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    line-height: 49px;
    }
    input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 300px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 31px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 15px;
    border-radius: 0px;
    }
    .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 400px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 80px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 10px;
    border-radius: 0px;
    }
    /***** Focus *****/
    #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    outline: none;
    background: #FFFFFF !important;
    color: #444;
    border-color: rgb(236, 235, 235) !important;
    box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
    transition: all 0.3s ease-in-out !important;
    }
    /**** Submit button style ****/
    .contact-form-button-submit:hover {
    color: #FFFFFF;
    background: #0083FF !important;
    }
    .contact-form-button-submit {
    background: #19B3EA;
    display: table;
    font-size: 17px;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    height: 32px;
    line-height: 0.5em;
    letter-spacing: 0.5px;
    font-family: sans-serif;
    font-weight: normal;
    cursor: pointer;
    outline: none!important;
    color: #FFFFFF;
    border: 1px solid #fff !important;
    text-align: center;
    padding: 0px 0px 0px 15px;
    text-transform: capitalize;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    }
    /**** Submit button on Focus ****/
    .contact-form-button-submit:focus, .contact-form-button-submit.focus {
    border-color: #FFFFFF;
    box-shadow: none !important;
    }
    /**** Error message ****/
    .contact-form-error-message-with-border .contact-form-success-message {
    background: #f9edbe;
    border: 1px solid #f0c36d;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    color: #666;
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 10px;
    line-height: 19px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    }
    /**** Submit Button On Success Message ****/
    .contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {
    opacity: 0.9;
    }
    /****** Success Message *****/
    .contact-form-error-message-with-border {
    background: #000000;
    border: 1px solid #5A5A5A;
    bottom: 0;
    box-shadow: none;
    color: #FDFDFD;
    font-size: 15px;
    font-weight: normal;
    line-height: 35px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
    }
    .contact-form-cross {
    height: 14px;
    margin: 5px;
    vertical-align: -8.5%;
    float: right;
    width: 14px;
    border-radius: 50px;
    border: 0 !important;
    cursor: pointer;
    }
    .contact-form-success-message-with-border {
    font-weight: normal;
    background-color: #000;
    border: 1px solid #FFF;
    color: #FFF;
    line-height: 35px;
    margin-left: 0;
    font-size: 13px;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
    }
    /* Extra Stuff */
    div#twist_blogger_cntct_form span.name-bg {
    background-color: #E8F2FF;
    }
    div#twist_blogger_cntct_form span.email-bg {
    background-color: #FFE8E8;
    }
    div#twist_blogger_cntct_form span.name-bg, div#twist_blogger_cntct_form span.email-bg {
    display: inline-block;
    max-width: 300px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    margin: 0px 0px 4px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
    }
    div#twist_blogger_cntct_form span.name-bg:before {
    content: '\f007';
    background-color: #60A2FF;
    }
    div#twist_blogger_cntct_form span.email-bg:before {
    content: '\f1fa ';
    background-color: #FF530B;
    }
    div#twist_blogger_cntct_form span.name-bg:before, div#twist_blogger_cntct_form span.email-bg:before, div#twist_blogger_cntct_form span.message-bg:before {
    font-family: FontAwesome;
    text-align: center;
    margin: -4px 0 0px 0px;
    font-weight: normal;
    padding: 0;
    line-height: 27px;
    width: 28px;
    height: 28px;
    display: table;
    position: absolute;
    margin-left: -40px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0 !important;
    color: #FFFFFF;
    }
    div#twist_blogger_cntct_form span.message-bg {
    background-color: #EBFFE8;
    display: inline-block;
    max-width: 400px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
    margin: 0px 0px 4px;
    }
    div#twist_blogger_cntct_form span.message-bg:before {
    content: '\f0e0';
    background-color: #20CC00;
    }
    div#twist_blogger_cntct_form span.send-bg {
    height: 32px;
    display: inline-block;
    float: left;
    max-width: 45%;
    width: 100%;
    margin-top: 15px;
    transition: all 0.4s ease-in-out !important;
    }
    div#twist_blogger_cntct_form span.send-bg:before {
    content: '\f1d8';
    }
    div#twist_blogger_cntct_form span.send-bg:before, div#twist_blogger_cntct_form span.clear-bg:before {
    font-family: FontAwesome;
    text-align: center;
    font-weight: normal;
    margin: 0;
    background-color: #000;
    padding: 0;
    line-height: 27px;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    border: 1px solid #fff;
    border-right: 0 !important;
    color: #FFFFFF;
    }
    div#twist_blogger_cntct_form span.clear-bg {
    display: inline-block;
    float: right;
    margin-top: 15px;
    max-width: 45%;
    width: 100%;
    }
    div#twist_blogger_cntct_form span.clear-bg:before {
    content: '\f021';
    }

    input.contact-form-button.contact-form-button-submit.clear-button:hover {
    background-color: #E83434 !important;
    }
    div#twist_blogger_cntct_form .clear-button {
    color: #FFFFFF;
    border: 1px solid #FFF !important;
    background-color: #FF2C2C;
    float: right;
    display: table;
    height: 32px;
    }

    </style>




    ➤Публикувайте страницата.

    ➤Отново се върнете в админ панела на вашия блог изберете Тема ➔ Редакция на HTML код ➔ в неговия край намирате  </body>Пред този таг впишете


    <style>div#ContactForm1 {display:none!important;}</style>




    ➤Запазете промените в кода на темата и проверете как работи новата ви контактна форма.

    Втора контактна форма


    Описание

    Втората контактна форма е по-нова, в стил Material Design. Има три реда за въвеждане на данни и бутон за изпращане.

    Инсталиране

    Използвайте начина за инсталиране на първата контактна форма, а кодът е:


    <style scoped="scoped">
    .ante{float:none;position:relative;margin-bottom:45px;margin-right:10px}.ante input,.ante textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.ante input:focus,.ante textarea:focus{outline:none}.ante label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.ante input:focus ~ label,.ante input:valid ~ label,.ante textarea:focus ~ label,.ante textarea:valid ~ label{top:-20px;font-size:14px;color:#1bbc9b}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#1bbc9b;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.ante input:focus ~ .bar:before,.ante input:focus ~ .bar:after,.ante textarea:focus ~ .bar:before,.ante textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.ante input:focus ~ .highlight,.ante textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.ante input:focus ~ label,.ante input:valid ~ label,.ante textarea:focus ~ label,.ante textarea:valid ~ label{top:-20px;font-size:13px;color:#1bbc9b}
    input#ContactForm1_contact-form-email-message{height:150px}
    input#ContactForm1_contact-form-submit{color:#fff!important;background:#1bbc9b;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
    input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
    #ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
    </style>

    <br />
    <br />
    <form name="contact-form">
    <div class="ante">
    <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
    </div>
    <div class="ante">
    <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
    </div>
    <div class="ante">
    <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Message</label>
    </div>
    <input id="ContactForm1_contact-form-submit" type="button" value="Send" />

    <br />
    <div id="ContactForm1_contact-form-error-message">
    </div>
    <div id="ContactForm1_contact-form-success-message">
    </div>
    </form>
    <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1958902922838602951';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1958902922838602951','//ВАШИЯТБЛОГ.blogspot.com/','1958902922838602951');
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '1958902922838602951', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    //]]>

    </script>



    Настройки

    ➤Участъците, оцветени в червено заменете с ID на вашия блог. Можете да го откриете в горния ред на браузъра си, когато сте в админ панела.

    ➤Оцветеното в синьо заменете с URL на вашия блог.

    ➤Публикувайте страницата и проверете работата на контактната форма.

    Ако се страхувате от експерименти, преди да започнете инсталирането сложете кода в този редактор, за да разгледате и оцените тези две контактни форми.

    Пожелавам ви успех! Доскоро!





    Няма коментари :

    Винаги се радвам на Вашето мнение


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | Всички права запазени |
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита