i need contact form like this | Coding help

TECRIDIBLE yes this style https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_input_contact i need a contact can any xtgem admin can do it???

# 2018-01-14 09:43 · (0)

VOLThor6

TECRIDIBLE If you just want to replicate the design of the contact form, It is possible. You just have to put the w3.ccs and font awesome libraries on your head tags and copy the form code to the page where you want the contact form.

To give functionality to the contact form you must do it with some external service because xtgem doesn't have variables to handle the input information.

# 2018-01-17 15:31 (edited 2018-01-17 15:31 by VOLThor6 ) · (0)

TECRIDIBLE

VOLThor6 thank you yeah i used bootstrap form comment box but didn't work can you help?

# 2018-01-18 12:51 · (0)

VOLThor6

TECRIDIBLE Tell me how can I help you exactly.

# 2018-01-18 21:02 · (0)

TECRIDIBLE

VOLThor6 by making a contact page code in the above design!

# 2018-01-19 10:06 · (0)

Graham

TECRIDIBLE Is this for a mailto: or xtgem contact/feedback enabled site ?

# 2018-01-19 12:46 · (0)

TECRIDIBLE

Graham for both i need coz yoy know bro i own many sites it will be helpfull if you give on both mail or guestbook & contact option of xtgem

# 2018-01-19 17:02 · (0)

VOLThor6

TECRIDIBLE I made a simple functional form with formspree.io service and with the design that you want.

You have to put this in your _headtags file first:

Copy code

After that go to the page where you want the contact form to appear and put this on a code block:

<div class="w3-content">
<form action="https://formspree.io/YOUR@EMAIL.COM" method="POST" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">
<h2 class="w3-center">Contact Us</h2>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="first" type="text" placeholder="First Name">
    </div>
</div>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="last" type="text" placeholder="Last Name">
    </div>
</div>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="_replyto" type="email" placeholder="Email">
    </div>
</div>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-phone"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="phone" type="text" placeholder="Phone">
    </div>
</div>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="message" type="text" placeholder="Message">
    </div>
</div>

<button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding" type="submit">Send</button>

</form>
</div>

Copy code

Replace the "YOUR@EMAIL.COM" address with your own email and that's it. Save the page and after saving it, open it in the browser. You will have to submit the form once with some random information to receive a confirmation email. After confirming your email you're done. Now all the information that your users submit will be sent to your email.

If you put the form on multiple pages or sites you will have to confirm the email each time for each page/site.

# 2018-01-19 17:53 (edited 2018-01-19 18:00 by VOLThor6 ) · (0)

TECRIDIBLE

VOLThor6 Thank you so much much brother i am eager to check it thank you so much bro,,,,

# 2018-01-19 18:00 · (0)

TECRIDIBLE

VOLThor6 this happened my bro

# 2018-01-19 18:05

Screenshot_20180119-233437.jpg · image/jpeg · 105.59KB

· (0)