Jak dodać formularz kontaktowy (stronę Kontakt) w Bloggerze?

Opublikowany: 2020-11-10

Dodanie formularza kontaktowego w Bloggerze jest żmudnym zadaniem, ponieważ nie obsługuje wtyczek, takich jak WordPress.

Większość blogerów Blogspot szuka pomocy w witrynach osób trzecich (foxyform, jotform, 123contactform itp.).

Strona formularza kontaktowego Bloggera Dziś jednak dowiesz się, jak dodać oficjalną stronę kontaktową do Bloggera.

Jak powiedziałem wcześniej, możliwe jest umieszczenie kodów stron trzecich na nowych stronach, takich jak spacer po parku. Jednak oficjalny formularz kontaktowy jest znacznie lepszy niż te.

Korzyści z oficjalnego formularza Bloggera

Otrzymasz wiadomość, gdy tylko ją wyślesz. Dostarczalność również wynosi 100%.
Prosty interfejs ułatwia odwiedzającym kontakt z Tobą.
Jeśli znasz język Cascade Style Sheet (CSS), łatwo będzie Ci dostosować formularz do własnych upodobań.
Cała strona nie zostanie ponownie załadowana w celu wysłania wiadomości.

Podzieliłem ten tutorial na trzy sekcje, dodając gadżet kontaktu, ukrywając go i implementując oficjalny kod na nowej stronie.

Część 1: Dodawanie gadżetu Kontakt

Wykonaj poniższe czynności, aby dodać gadżet kontaktowy na swoim blogu.

Krok 1 : Odwiedź blogger.com i zaloguj się na swoje konto. Jeśli prowadzisz wiele blogów, musisz wybrać żądany blog z listy.

Krok 2 : Kliknij Układ na lewym pasku bocznym, aby uzyskać opcję dodawania gadżetów.

Krok 3 : Możesz zobaczyć link Dodaj gadżet na głównym panelu po prawej stronie. Kliknięcie go spowoduje wyświetlenie listy gadżetów.

Krok 4 : Następnie wybierz Więcej gadżetów z lewej strony. Teraz zobaczysz Formularz kontaktowy . Po prostu dodaj to samo.

Część 2: Ukrywanie gadżetu

Teraz dowiesz się, jak ukryć gadżet kontaktów.

Krok 1 : Musimy pobawić się tutaj sekcją szablonów. Więc kliknij Szablony z menu po lewej stronie.

Krok 2 : Następnie kliknij Edytuj HTML, a otrzymasz cały kod swojego bloga w dużym polu.

Krok 3 : Wyszukaj ]]> </ b: skin> i umieść następujący kod tuż przed nim.

div # ContactForm1 {
wyświetlacz: brak! ważne;
}

Następnie kliknij Zapisz, aby zachować zmiany.

Po trzecim kroku nie zobaczysz widżetu Kontakt na swoim blogu.

Część - 3: Dodawanie formularza kontaktowego do strony

Otrzymasz tutaj dostosowany oficjalny kod formularza kontaktowego Bloggera, który należy dodać, aby był wyświetlany na osobnej stronie.

Krok 1 : Przejdź do stron i kliknij Nowa strona.

Krok 2 : Wklej następujący kod do edytora postów HTML po usunięciu wszystkiego z niego.

<div id = ”custom_ContactForm1 ″ class =” widget ContactForm ”>
<div class = ”contact-form-widget”>
<p> Skontaktuj się z nami, wypełniając poniższy formularz. </p>
<div class = ”form”>
<form name = ”contact-form”>
<p> </p>
Nazwa
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” name ”id =” ContactForm1_contact-form-name ”class =” contact-form-name ”>
<p> </p>
E-mail
<span style = ”font-weight: bolder;”> * </span>
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” email ”id =” ContactForm1_contact-form-email ”class =” contact-form-email ”>
<p> </p>
Wiadomość
<span style = ”font-weight: bolder;”> * </span>
<br>
<textarea rows = ”5 ″ name =” email-message ”id =” ContactForm1_contact-form-email-message ”cols =” 25 ″ class = ”contact-form-email-message”> </textarea>
<p> </p>
<input type = ”button” value = ”Send” id = ”ContactForm1_contact-form-submit” class = ”contact-form-button contact-form-button-submit”>
<p> </p>
<div style = ”text-align: center; max-width: 222px; szerokość: 100% ”>
<p id = ”ContactForm1_contact-form-error-message” class = ”contact-form-error-message”> </p>
<p id = ”ContactForm1_contact-form-success-message” class = ”contact-form-success-message”> </p>
</div>
</form>
</div>
</div>
<div class = ”clear”> </div>
<span class = ”widget-item-control”>
<span class = ”item-control blog-admin”>
<a title = ”Edit” target = ”configContactForm1 ″ onclick =” return _WidgetManager._PopupConfig (document.getElementById („ContactForm1 ″));” href = ”// www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =” quickedit ”>
<img width = ”18 ″ height =” 18 ″ src = ”// img1.blogblog.com/img/icon18_wrench_allbkg.png” alt = ””>
</a>
</span>
</span>
<div class = ”clear”> </div>
</div>

Krok 3: Dodaj tytuł (np. Skontaktuj się z nami), a następnie zmień ustawienia podane poniżej.

Krok 4: Na koniec kliknij przycisk Publikuj. To wszystko.

Wiadomości wysłane z tego formularza kontaktowego zostaną dostarczone na adres e-mail administratora. Jeśli blog ma więcej niż jednego administratora, otrzymają go wszyscy.

➜ Inne przydatne samouczki Blogspot:

Jak dodać niestandardowy plik Robots.txt w Bloggerze?
Jak przesłać mapę witryny Bloggera do Google Search Console?

Podsumowanie

Mam nadzieję, że wiesz już, jak dodać stronę kontaktową w Bloggerze. Jeśli napotkasz jakąkolwiek trudność, taką jak zerowa dostarczalność, nawet po komunikacie o powodzeniu, zalecam ponowne zainstalowanie widżetu Kontakt.

I tak, jeśli masz wystarczającą wiedzę na temat obsługi fragmentów CSS i javascript, możesz dostosować stronę, aby uzyskać lepszą atrakcyjność wizualną.

Nie zapomnij podzielić się tym postem ze znajomymi z Bloggera.