How to set up Contact Page in Median UI

Sinan Tektaş
How to set up our contact page
Source: jagodesain.com

Follow the guide below to easily add our contact page to the Median UI template.

Preparation

The first thing you have to do is get your blog ID code, it's very easy on the blogger page, look at the address bar, then you will find an example link like the one below;

https://www.blogger.com/blog/themes/1234567890000000000

the marked part is your blog id code, please copy it because this code will be needed when creating our contact page

Tutorial

  1. Please create a new page, don't forget to fill in the search description on your new page
  2. Switch to HTML mode then copy and paste the code below into the content of your page:
    <div class='ContactForm' id='ContactForm1'>
    <form name='contact-form'>
    <div class='input-area'>
    <label for='ContactForm1_contact-form-name'>Nama Anda</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div>
    <div class='input-area'>
    <label for='ContactForm1_contact-form-email'>Email<span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' /></div>
    <div class='input-area'>
    <label for='ContactForm1_contact-form-email-message'>Pesan<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
    <div class='input-area'>
    <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Kirim' /></div>
    <div class='notif-area'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>
    </div>
    <script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
    <script>//<![CDATA[
    if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1234567890000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1234567890000000000','//www.namablog.com/','1234567890000000000');
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '1234567890000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

    Change the part marked in the code above with your blog id, there are at least three of the same codes that you must change to your blog id

    Information:

    • [1234567890000000000] : Your blog id, there are 4 times writing in the code above
    • [www.namablog.com] : Your blog address (without http / https)
    • [Your Name, Email, Message] : Input title in the contact form
    • [Submit] : Text on submit button
    • [Sending ...] : Text when sending messages
    • [Your message has been sent. ] : Message notification text sent
    • [Message could not be sent. Please try again later. ] : The message notification text was not sent
    • [A valid email address is required. ] : Invalid email notification text
    • [A Message field cannot be empty. ] : Text notification when message body is blank
  3. Publish your page and please test whether the contact widget is successful or not

If implemented correctly, such as adding your blog id to all the marked sections, there should be no errors.

Submit button not working issue

We were not aware of this issue until a user reported this problem, after we checked it turned out that the cause of the malfunctioning submit button on the ContactForm widget was the ToC script on a static page:

<script>medianTOC();</script>

So to solve this problem you only need to hide the Table of Contents on a static page, the complete tutorial, please go to the page below:

Read: How to Hide ToC on static pages

Yorumlar
Uyarı:
1.Yorum yaparken saygı çerçevesin'den çıkmayın
2.Küfür Hakaret Siyasi propaganda içerikli yorum yapmak yasaktır.
3. Her ne şekilde olursa olsun, özel iletişim bilgilerinizi paylaşmayın, fark edildiğinde kesinlikte silinecektir.