Pre-populate field with post value

  • Resolved jddouglas73

    (@jddouglas73)


    4 years, 4 months ago

    We want to have two mailing list subscribe forms. The first form in the site footer has an email address field only. When this form is submitted the user is taken to a second form where they have the opportunity to enter additional info about themselves. When the 2nd form is submitted, their profile is updated in MailChimp with the added data.
    QUESTION: Can the email field in the 2nd form be automatically pre-populated with the post value from the 1st form? I.e., So the user does not need to re-enter their email address.

    I think what we are looking for is a filter/hook to make this happen. Please advise. Any code examples would be helpful. Thx.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Freddie

    (@fmixell)

    Hey @jddouglas73,

    Do you have a link to where you’re doing this first implementation so I can subscribe and see what we’re working with? This seems possible because I think as long as you have the email the same it will update their profile like you’re describing.

    Cheers,
    Freddie

    Thread Starter jddouglas73

    (@jddouglas73)

    Sure.
    This is the first form: https://supernovacommencements.com/testpage/ (ignore the one in the footer). Submission will direct you to a “Thank You” page that has the second form. I would like for the email field of the second form to be pre-populated with the email address submitted from the first form. Doable?

    Btw, I have double opt-in turned off. Thanks for any assistance.

    Plugin Contributor Freddie

    (@fmixell)

    @jddouglas73,

    Its actually redirecting me back to the same page right now did you set the redirect up on that form?

    – Freddie

    Thread Starter jddouglas73

    (@jddouglas73)

    Oops. Sorry. It should direct to the TY page now.

    Hi @jddouglas73,

    This problem seems best tackled with JavaScript, by implementing your own redirect that includes the email as a query var. Then you can just pop that in the second form when the page loads.

    First, you’ll want to disable the built in redirect so it doesn’t interfere.

    
// Add to page /testpage
$('.yikes-easy-mc-form').on('yikes_clear_input_fields_after_successful_submission', function() {
    const email = $('#yikes-easy-mc-form-2-EMAIL')[0].value;

    window.location=<code>/thank-you?email=${email}</code>;
});

// Add to page /thank-you
const urlParams = new URLSearchParams(window.location.search);
const email = urlParams.get('email');

$('#yikes-easy-mc-form-1-EMAIL')[0].value = email;

    Each block of code should be wrapped in some sort of $( document ).ready.

    Please let me know if you have any issues.

    Thanks,
    Jon

    Thread Starter jddouglas73

    (@jddouglas73)

    Thank you! I was able to get it working with a few modifications to your sample code. Appreciate the help.

    Hi @jddouglas73,

    Excellent! Happy to help.

    Let us know if you need anything else.

    Jon

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Pre-populate field with post value’ is closed to new replies.