Customize Google Form for your website
I got to be honest, I’ve never really faced Google Forms 🙂 Just there was no need their use. Usually similar task can be resolved use Contact Form 7 and something plugin that save data from form to database e.g. CFDB7. But it turns out that in some cases using Google forms was preferable for a customer. So, let’s go!
Problem: We have Google Form and we need stylished it according site styles.
Solution: So, as always we have 2 ways resolve this problem — use plugin or coding. I chose coding, because plugin at the time of write code is outdated (about one year without updates and it's bad). Usually integration Google Form it's simple copy-paste iframe to need place of the page, but change styles in this case won't be able. For resolve this trouble we need make own form who has necessary us structure, classes and IDs, etc. Also, if it need we can put our form to default WordPress editor or WYSIWYG field of the Advanced Custom Field Plugin.
I can offer a little bonus if you decided to use WYSIWYG field for your form. Next code allow sanitize HTML code from tags.
<?php
$form = preg_replace( "/<br\W*?\/>/", "\n", get_field( 'form' ) ); // ACF WYSIWYG field
$form = preg_replace( "/<br\W*?\/>/", "\n", get_the_content() ); // default WordPress editorStep 1: Create form and put it on the page:
<form id="google-form" class="info-form" action="#" method="post">
<div class="form-group">
<label for="email">Email Address*</label>
<input id="email" class="form-control" required="" type="email" />
</div>
<div class="form-group">
<label for="fn">First Name*</label>
<input id="fn" class="form-control" required="" type="text" />
</div>
<div class="form-group">
<label for="ln">Last Name*</label>
<input id="ln" class="form-control" required="" type="text" />
</div>
<div class="form-group">
<label for="check">What is 21 minus 3?* (Making sure you’re human)</label>
<input id="check" class="form-control" required="" type="text" />
</div>
<span class="note">* Required</span>
<div class="form-group">
<input class="btn btn-orange" type="submit" value="SUBMIT" />
</div>
</form>Step 2: We need to output our google form use iframe tag. After download page open page source or browser console and copy contain of the attribute "action" from iframe form to our custom form. Also, we need to copy contain of names attributes from iframe form to our custom form. As rule, they names starts with the word "entry", for example name="entry.275621039", but there are exceptions look at e-mail field:
<form id="google-form" class="info-form" action="https://docs.google.com/forms/d/e/2EAIpWLSdPT54FhF1BxkBSCjlSrCbNmAL_Hq1tFLvB5lxvcA9lXLGF1w/formResponse" method="post">
<div class="form-group">
<label for="email">Email Address*</label>
<input id="email" class="form-control" name="emailAddress" required="" type="email" />
</div>
<div class="form-group">
<label for="fn">First Name*</label>
<input id="fn" class="form-control" name="entry.273330035" required="" type="text" />
</div>
<div class="form-group">
<label for="ln">Last Name*</label>
<input id="ln" class="form-control" name="entry.837780272" required="" type="text" />
</div>
<div class="form-group">
<label for="check">What is 21 minus 3?* (Making sure you’re human)</label>
<input id="check" class="form-control" name="entry.2883762917" required="" type="text" />
</div>
<span class="note">* Required</span>
<div class="form-group">
<input class="btn btn-orange" type="submit" value="SUBMIT" />
</div>
</form> If we everything has been done right on the previous step our custom form must work fine. But we have 2 problems:
- Spam. Unfortunately, Google Forms doesn't support Google Captcha, at the moment, and our honeypot, namely arithmetical checking to avoid spam doesn't work at the moment.
- Redirecting to thank you page of Google Form after submit form. In most cases, better way it's redirect visitor to "thank you" page on our site (it gives more opportunities for stylished) or use AJAX and don't use redirect at all.
All these issues we'll resolve use jQuery.
function googleFormSubmit() {
$( '#google-form' ).submit( function ( e ) {
e.preventDefault();
// Clean Previous Messages
$( '#google-form .success' ).remove();
$( '#google-form .error' ).remove();
// Check our honeypot value
if ( $( '#google-form #check' ).val() === '18' ) {
$.ajax( {
url: window.location.href,
data: $( this ).serialize(),
type: $( this ).attr( 'method' ),
success: function ( data ) {
// window.location.replace( 'http://yoursitename/thank-you-page/' ); uncomment this string and replace URL if you want use redirect after success send form.
// Show message about success send
$( '<p class="success">Submission successful</p>' ).appendTo( '#google-form' );
// Reset form
$( '#google-form' )[0].reset();
},
error: function ( xhr, status, error ) {
// Show message about error send
$( '<p class="error">Submission failed. Please, try again or contact to administrator.</p>' ).appendTo( '#google-form' );
}
} );
} else {
// Show message about error honeypot value
$( '#google-form #check' ).after( '<span class="error">This value is incorrect. Please, check it and try again.</span>' );
}
} );
}That's all! Remains only stylished our form and messages.
Summarize:
Using Google Form in WordPress without plugin it's really, plus enough simple and fast. Nevertheless sake of objectivity It is also worth noting about few disadvantages:
- If you changed or added some field to Google Form, it need also add on the site by manual.
- By default missing verification for the form fields. Sure, it can be resolved using HTML attributes or custom verification use JavaScript or jQuery.
Sources: