How to create an Onsite-Contact form.

[Dana Lee]

Do you want to have a contact form in your website so that the visitors directly can write you a message onsite? In order to stay in touch with your visitors, it can be a good idea.

First, create a text. Then on your right, you can write as below.

Copy this and paste in your text.

<form id="mailform">
  <label class="label" for="name">Your Name</label>
  <input class="input" type="text" name="name" data-name="Name" required="required">
  <label class="label" for="email">Your Email</label>
  <input class="input" type="text" name="email" data-name="Email" required="required">
  <input name="subject" type="hidden" value="Message from webpgr.com">

  <label class="label" for="email">Message</label>
  <textarea name="body" class="textarea" rows="6"></textarea><br>
  <input class="btn" type="submit" value="Submit" data-wait="Please wait...">

</form>

Then it will look this instantly.

Then go on the Hacker shell by Ctrl + m, then on the JS tap, insert as below.

$('#view').on('submit', '#mailform', function(e) {
 e.preventDefault();
 $.ajax({ url: localconfig.baseurl + "/email/send/" + app.this_page.id,
 data: $(this).serialize(),
 type: 'POST',
 success: function(e) {
  $.jGrowl('Mail successfully sent!');
   ga('send', 'event', 'conversion', 'submit', 'mail');
  },
  error: function(jqXHR, textStatus, errorThrown) {
   if (app.this_user.id !== app.this_page.ownr) {
    $.jGrowl('Failed sending mail :\'(', {
     theme: 'jGrowlError'
    });
   } else {
    $.jGrowl('Failed sending mail: ' + jqXHR.responseText, {
     theme: 'jGrowlError'
    });
   }
  }
 });
});

Finally go to Page configuration then fill in your email. Save and exit. Done.

Now you will get emails to your email address.  

[Julie Berg]

Thank you for this very useful post! How can I make the text boxes wider?

[Falko]

Good to know that this helps :) 

To make the text boxes wider change the input form to

<form id="mailform">
  <label class="label" for="name">Your Name</label>

  <input class="input wp-textinput" type="text" name="name" data-name="Name" required="required">

  <label class="label" for="email">Your Email</label>

  <input class="input wp-textinput" type="text" name="email" data-name="Email" required="required">

  <input name="subject" type="hidden" value="Message from webpgr.com">
  <label class="label" for="email">Message</label>

  <textarea name="body" class="textarea wp-textinput" rows="6"></textarea><br>

  <input class="btn" type="submit" value="Submit" data-wait="Please wait...">
</form>

Now go to the Styles section and create a new style class "textinput". Just type "textinput" in the box where it says ...add/filter and press enter. A new class box should appear in blue color and a text input field. In the big input field enter something like

width: 250px;

when you fished typing the text boxes should resize.