Blog About Blogs

За блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

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

by on in
контактни форми за 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 на вашия блог.

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

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

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

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop



    Related Posts:
    Posted By Публикувано на
    Етикети

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

    Публикуване на коментар

    Абонамент за: Коментари за публикацията (Atom)