Customize and Style a Google Form on Your WordPress Site

Embedding a Google Form as an <iframe> is the path of least resistance, but it means you have no control over the styling. The alternative is to recreate the form in HTML, map your fields to the Google Form entry IDs, and submit via jQuery AJAX. This way the form matches your site’s design exactly, while Google still receives and stores the responses.

Problem: Embedding a Google Form via <iframe> on a WordPress page adds a visually inconsistent widget that cannot be styled to match the site's branding.

Solution: Replicate the Google Form's internal field names in a custom HTML form, set its action to the Google Form submission URL, and post the data directly. You can style the form freely while Google still processes and stores the responses.

Step 1. Create your own HTML form. The action attribute will be filled in the next step:

<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="check">What is 21 minus 3? * (spam check)</label>
        <input id="check" class="form-control" required type="text" />
    </div>
    <div class="form-group">
        <input class="btn btn-primary" type="submit" value="Submit" />
    </div>
</form>

Step 2. Load the original Google Form in an <iframe> temporarily (or view the page source) to find two things:

1. The action URL from the <form> tag — it looks like https://docs.google.com/forms/d/e/XXXXXX/formResponse.

2. The name attributes on each input — they start with entry. followed by a long number (e.g. entry.273330035). The email field is usually named emailAddress.

Update your HTML form with these values:

<form id="google-form" class="info-form"
      action="https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse"
      method="post">
    <input id="email"  name="emailAddress"     … />
    <input id="fn"     name="entry.273330035"  … />
    <input id="check"  name="entry.2883762917" … />
    …
</form>

Step 3. Handle spam protection and AJAX submission with jQuery. The arithmetic check acts as a simple honeypot. On success the form resets; on failure a message is shown without a page reload:

function googleFormSubmit() {
    $( '#google-form' ).on( 'submit', function ( e ) {
        e.preventDefault();

        // Remove previous messages
        $( '#google-form .success, #google-form .error' ).remove();

        if ( $( '#check' ).val() !== '18' ) {
            $( '#check' ).after( '<span class="error">Incorrect answer, please try again.</span>' );
            return;
        }

        $.ajax( {
            url:     $( this ).attr( 'action' ),
            data:    $( this ).serialize(),
            type:    'POST',
            success: function () {
                // Optional redirect:
                // window.location.replace( '/thank-you/' );
                $( '#google-form' ).append( '<p class="success">Thank you! Your message has been sent.</p>' );
                $( '#google-form' )[0].reset();
            },
            error: function () {
                $( '#google-form' ).append( '<p class="error">Submission failed. Please try again or contact us directly.</p>' );
            },
        } );
    } );
}

If you store the form HTML in an ACF WYSIWYG field, strip auto-inserted <br> tags before outputting it:

<?php
$form = preg_replace( "/<br\W*?\/>/", "
", get_field( 'form' ) );

NOTE: Google Forms field IDs can change if you restructure the form. Any time you add, remove, or reorder fields in the Google Form editor, re-inspect the source to check whether the entry.* names have changed, then update your HTML form accordingly.