Contact form send button not showing in page using custom form.php

Mediahype · 2017-02-09 21:07:15

Hi,

I have created this as a new topic following on from the discusion in the returrn to gallery button query.

With the tabbed content I have created a new contact page and am testing using each tab to display a different contact form depending on what the client's query relates to. (This is to reduce effort on the clients part in downloading and completing forms and then having to email them back)

I have created 3 forms manually in a contact.php file and all the form entry areas exist when I view the page. However the send button is not displayed. I assume in the php file I need to create values for each field from all 3 contact forms which I have done at the bottom of the php file. But as the send button is not displayed I can't send the form info back via email.

What code do I need in the php file to capture the various inputs and pipe them to an email back to me? (The normal contact form that comes with Backlight works fine and sends an email back so the email side is fully functional, I just have the code stuffed in the custom php file.

Normal Contact Form inserted via Backlight:
https://www.overthetopimagery.com.au/Contact
Custom Page for multiple contact forms:
https://www.overthetopimagery.com.au/Contact3

function ttg_main_top( $style, $path ) { 
    echo '

<div class="radioTabs">

  <input type="radio" name="tabs" id="tab1" checked>
  <label for="tab1">Photographic Enquiries</label>

  <input type="radio" name="tabs" id="tab2">
  <label for="tab2">General Enquiries</label>

<section id="content1">
<p>Nothing in here yet</p>
</section>

  <section id="content2">
  <div class="content clearfix">
<div id="form" class="contact-form">
<form method="post" action="/Contact">

<p><label for="name">Name *</label><br><textarea rows="1" id="field_11" name="field_11"></textarea></p>
<p><label for="email">Email *</label><br><textarea rows="1" id="field_12" name="field_12"></textarea></p>
<p><label for="phone">Phone Number *</label><br><textarea rows="1" id="field_13" name="field_13"></textarea></p>
<input type="duff" name="spammy" style="display: none;">
<p>Type</p>
<select name="type" size="1">
<option value="Sokar">Sokar</option>
<option value="Reconn">Reconn</option>
<option value="Other">Other</option>
</select>
<br />
<p><label for="subject">Subject *</label><br><textarea rows="6" id="field_14" name="field_14"></textarea></p>
<p class="denotes-required-fields">* denotes required fields</p></div></form>
<div class="actions"><input name="submit" value="Send" type="submit"></div>
</div>
  </section>

</div>
    ';
    return true;
} // END

function( $style, $path ) {
$name = $_post['name']; 
$email = $_post['email']; 
$phone = $_post['phone']; 
$type = $_post['type'];
$subject = $_post['subject'];
} // END

?>

Matthew · 2017-02-09 22:01:51

To begin with, I'd forget the tabs. For now. Just put the forms together and get those working first, without tabs. Once you're confident you have the forms working, then you can embed them into tabs.

rod barbee · 2017-02-09 23:25:52

looking at the source code of the actual page where the Send button is not appearing, I don't see the code: type="submit" where it should be in this line (from what you posted above):

<div class="actions"><input name="submit" value="Send" type="submit"></div>

Mediahype · 2017-02-10 16:23:30

Hi guys,

If I put the html code straight into a page copy area it works and I can click on the send button and the form content are emailled out OK. If I put that very same code into the tabbed section of a php file, the send button doesn't show. Despite the send code being there.

The line <div class="actions"><input name="submit" value="Send" type="submit"></div></form></div> is definitely in the code. As I said the send button doesn't appear when the code is in the tab, and a look at the page source through inspector doesn't show it, it's as if the tabs makes this line dissapear.

Contact3 page has the code in tab1 section which is identical to that in the body copy area of Content4 page:

https://www.overthetopimagery.com.au/Contact3

Contact4 - html code is in body copy area

https://www.overthetopimagery.com.au/Contact4

Code in my test today is the following:

  <section id="content1">
<div id="form" class="contact-form">
	<form method="post" action="https://www.overthetopimagery.com.au/?page=Contact2">
<p><label for="name">Name *</label><input id="name" name="name" value="" type="text"></p>
<p><label for="email">Email *</label><input id="email" name="email" value="" type="text"></p>
<p class="honey-pot"><label for="address">Address *</label><input id="address" name="address" value="" type="text"></p>
<p><label for="name">Phone Number *</label><input id="field_12" name="field_12" value="" type="text"></p>
<p><label for="name">Location Details and Address (Property Description, Buildings, Structures, vehicles/vessels) *</label><textarea rows="2" id="field_14" name="field_14"></textarea></p>
<p><label for="name">Property Owners / Residents  (Names &amp; Contact Details if different from above) *</label><textarea rows="2" id="field_15" name="field_15"></textarea></p>
<p><label for="name">Assignment Details (Purpose, Key points of interest, Video, Resolution) *</label><textarea rows="6" id="field_16" name="field_16"></textarea></p>
<p class="denotes-required-fields">* denotes required fields</p>
<div class="actions"><input name="submit" value="Send" type="submit"></div></form></div>
  </section>

As a note, I can use a hook to place a button outside of the tab section. This shows the send button but it loses the reference back to the form content and doesn't do anything, ie no email is sent. click on the send botton and literally nothing happens.

Cheers

Matthew · 2017-02-10 17:10:50

If I remember correctly, the div.actions element may be floated. I think you can unwrap the submit buttons, just:

<input name="submit" value="Send" type="submit"></form>

See whether that helps.

Mediahype · 2017-02-10 17:20:42

Hi Matthew,

Nup, no change with that either.

rod barbee · 2017-02-11 01:16:05

I just took a look at the Backlight css and I see this rule:

.radioTabs input {
	display: none;
}

so try rewriting the send button code to:

<div class="actions"><input name="submit" value="Send" type="submit" style="display:block;"></div>

Mediahype · 2017-02-11 10:39:37

Thanks Rod,

The send button is now displaying but when I complete the form and click send an email is not sent, the form field input areas are emptied so one needs to reenter details. It also doesn't recognise if required fields are entered so I guess I'm missing some code somewhere.

I have tried this same code in a page and not in a php file and it does the same.

<div class="the__copy">
  <div class="content clearfix">
<h1 style="color:#1a75bb;">Photographic Enquiries</h1> 
<div id="form" class="contact-form">
	<form method="post" action="https://www.overthetopimagery.com.au/Contact4">
	<p><label for="name">Name *</label><input id="name" name="name" value="" type="text"></p>
	<p><label for="email">Email *</label><input id="email" name="email" value="" type="text"></p>
	<p class="honey-pot"><label for="address">Address *</label><input id="address" name="address" value="" type="text"></p>
	<p><label for="name">Telephone</label><input id="field_8" name="field_8" value="" type="text"></p>
<p><label for="name">Location Details and Address (Property Description, Buildings, Structures, vehicles/vessels) *</label><textarea rows="2" id="field_9" name="field_9"></textarea></p>
<p><label for="name">Property Owners / Residents (Names & Contact Details if different from above) *</label><textarea rows="2" id="field_10" name="field_10"></textarea></p>
	<p><label for="name">Assignment Details (Purpose, Key points of interest, Video, Resolution) *</label><textarea rows="4" id="field_6" name="field_6"></textarea></p>
	<p class="denotes-required-fields">* denotes required fields</p>
<div class="actions"><input name="submit" value="Send" type="submit" style="display:block;"></div></form></div>	
 </div>
</div><!-- .the__copy -->

Community @ The Turning Gate

#1 2017-02-09 21:07:15

Contact form send button not showing in page using custom form.php

#2 2017-02-09 22:01:51

Re: Contact form send button not showing in page using custom form.php

#3 2017-02-09 23:25:52

Re: Contact form send button not showing in page using custom form.php

#4 2017-02-10 16:23:30

Re: Contact form send button not showing in page using custom form.php

#5 2017-02-10 17:10:50

Re: Contact form send button not showing in page using custom form.php

#6 2017-02-10 17:20:42

Re: Contact form send button not showing in page using custom form.php

#7 2017-02-11 01:16:05

Re: Contact form send button not showing in page using custom form.php

#8 2017-02-11 10:39:37

Re: Contact form send button not showing in page using custom form.php

Board footer