I am trying to embed a Contact Form 7 form in a custom theme page in Wordpress.
My custom theme page is located in /wordpress/wp-content/themes/theme-name/.
All of the HTML markup in the Contact Form 7 form is outputting correctly, including the form tag and all of the hidden inputs generated by CF7. The only elements that are not displaying are the form fields themselves. Is there some setting or something else I need to do to get this to work?
PHP code in theme file:
<?php echo do_shortcode( '[contact-form-7 id="503" title="landing-page-1"]' ); ?>
Contact Form 7 form template:
<div class="container">
<h5 class="modal-title text-white">Get your free quote</h5>
<div class="form-group">
[text* requester-name placeholder "Your name" class:form-control class:form-control-lg class:py-3]
</div>
<div class="form-group">
[email* requester-email placeholder "Your email" class:form-control class:form-control-lg class:py-3]
</div>
<div class="form-group">
[tel requester-phone placeholder "Phone (optional but helpful)" class:form-control class:form-control-lg class:py-3]
</div>
<div class="form-group">
[text* property-address placeholder "Property address + zip code" class:form-control class:form-control-lg class:py-3]
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">
[submit class:btn class:btn-primary class:green-btn class:py-3 "Click here"]
</div>
</div>
</div>
</div>
Here is the resulting output (note that the inputs are missing):
<div role="form" class="wpcf7" id="wpcf7-f503-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/493-2#wpcf7-f503-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="503" />
<input type="hidden" name="_wpcf7_version" value="5.1" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f503-o1" />
<input type="hidden" name="_wpcf7_container_post" value="0" />
<input type="hidden" name="g-recaptcha-response" value="" />
</div>
<div class="container">
<h5 class="modal-title text-white">Get your free lawn care quote</h5>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<input type="submit" value="Click here" class="wpcf7-form-control wpcf7-submit btn btn-primary green-btn py-3" />
</div>
</div>
</div>
</div><div class="wpcf7-response-output wpcf7-display-none"></div></form>
