Search code examples
jqueryhtmlformsmodx-revolutionformit

How do I get FormIt with ModX Revolution to redirect to a web page id (ie. www.myurl.com/index.php#contact)?


Okay, so the issue is that I created a one page html website with multiple sections that represent all the pages. The problem that I am having is that the FormIt contact form works, but I can't get it to redirect to the right id. So, once I submit the form, it takes me back to the top of the page. Any ideas? Check out my FormIt call below:

[[!FormIt?
    &hooks=`email`
    &emailFrom=`[email protected]`
    &emailTpl=`emailChunk`
    &emailTo=`[[+email]]`
    &redirectTo=`http://myurl/index.php#contact`
    &emailSubject=`BHT Website Inquiry`
    &validate=`name:required,
    email:email:required,
    comment:required:stripTags`
    &successMessage=`
    <div class="alert alert-success marginTop25">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h4>Thank you! Your inquiry has been submitted successfully.</h4>
    </div>
    `
    &validationErrorMessage=`
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <ul>
            [[!+fi.error.name:!empty=`
            <li><a href="[[~[[*id]]]]#name">Name is a required field</a></li>
            `]]
            [[!+fi.error.email:!empty=`
            <li><a href="[[~[[*id]]]]#email">Email is a required field</a></li>
            `]]
            [[!+fi.error.comment:!empty=`
            <li><a href="[[~[[*id]]]]#comment">Comment is a required field</a></li>
            `]]
        </ul>
    </div>
    `
]]

[[!+fi.validation_error_message:!empty=`
    <div class="alert alert-error marginTop25">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <ul>
            [[!+fi.error.name:!empty=`
            <li><a href="[[~[[*id]]]]#name">Name is a required field</a></li>
            `]]
            [[!+fi.error.email:!empty=`
            <li><a href="[[~[[*id]]]]#email">Email is a required field</a></li>
            `]]
            [[!+fi.error.comment:!empty=`
            <li><a href="[[~[[*id]]]]#comment">Comment is a required field</a></li>
            `]]
        </ul>
    </div>
`]]

[[!+fi.successMessage]]
<form action="[[~[[*id]]]]" method="post">
    <div class="[[!+fi.error.name:notempty=`control-group error`]]" id="name">
        <label for="name">Name:

            <div class="controls">
                <input type="text" name="name" value="[[!+fi.name]]" class="input-block-level">
            </div>
        </label>
    </div>

    <div class="[[!+fi.error.email:notempty=`control-group error`]]" id="email">
        <label for="email">Email:

            <div class="controls">
                <input type="text" name="email" value="[[!+fi.email]]" class="input-block-level">
            </div>
        </label>
    </div>

    <div class="[[!+fi.error.comment:notempty=`control-group error`]]" id="comment">
        <label for="comment">Comment: </label>

        <div class="controls">
            <textarea name="comment" cols="30" rows="10" value="[[!+fi.comment]]" class="input-block-level"></textarea>
        </div>
    </div>

    <input type="submit" value="Submit" class="btn btn-primary">
</form>

Solution

  • Found the answer. In order to get the FormIT plugin to return to a specific id on a page we just have to include the # tag in the form action call like this:

    @Sean Kimball: Thanks for you help yesterday.