“Say Hello to Symphony” – Tutorials – Learn

Step 6. Enable Front-End Submission

Front-end submission is a common requirement for websites small and large, from simple contact forms to blog comments. With Symphony, you can use events to allow visitors to submit to any section. What we want to do here is enable the submission of new greetings from our "Add a Greeting" page.

6.1. Create Your Greeting Submission Event

Go to Blueprints > Events and click the green Create New button. You'll be taken to Symphony's event editor. Let's Name our event Submit Greeting, and select "Greetings" as the source. We don't need to bother with filters right now, but you can learn more about event filters if you're interested. Click Create Event.

Once your new event is created, Symphony outputs a whole bunch of information intended to help you set up your event on the front end (Figure 9). It shows you what XML the event will output (whether it executes successfully or results in failure), and even provides example front-end form markup. We'll use this information to craft our greeting submission form.

6.2. Add Submission Form Markup to your Page Template

Go to Blueprints > Pages and in the Template column, click "add.xsl". Replace the existing Body content with this stylesheet:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:include href="../utilities/master.xsl" />

<xsl:template match="data">
    <form method="post" action="" enctype="multipart/form-data">
        <input name="MAX_FILE_SIZE" type="hidden" value="5242880" />

        <h2>Leave Your Greeting Here</h2>
        <xsl:apply-templates select="events/submit-greeting"/>

        <label>Greeting Title</label>
        <input name="fields[greeting-title]" type="text" />

        <label>Language</label>
        <select name="fields[language]">
            <option value="Chinese">Chinese</option>
            <option value="Spanish">Spanish</option>
            <option value="English">English</option>
            <option value="Arabic">Arabic</option>
            <option value="Hindi">Hindi</option>
            <option value="Bengali">Bengali</option>
            <option value="Portuguese">Portuguese</option>
            <option value="Russian">Russian</option>
            <option value="Japanese">Japanese</option>
            <option value="German">German</option>
            <option value="Javanese">Javanese</option>
            <option value="Punjabi">Punjabi</option>
            <option value="Wu">Wu</option>
            <option value="Telugu">Telugu</option>
            <option value="Vietnamese">Vietnamese</option>
            <option value="Marathi">Marathi</option>
            <option value="French">French</option>
            <option value="Korean">Korean</option>
            <option value="Tamil">Tamil</option>
            <option value="Italian">Italian</option>
        </select>

        <label>Greeting Content</label>
        <textarea name="fields[greeting-content]" rows="15" cols="50"></textarea>

        <input name="fields[date]" type="hidden" value="{$today} {$current-time}" />

        <input name="action[submit-greeting]" type="submit" id="submit" value="Submit" />
    </form>
</xsl:template>

<xsl:template match="events/submit-greeting">
    <p>
        <xsl:attribute name="class"><xsl:value-of select="@result"/></xsl:attribute>
        <xsl:value-of select="message"/>
    </p>
</xsl:template>

</xsl:stylesheet>

We're using a slightly modified version of the form markup Symphony suggested for us. One thing we've added here is:

<xsl:apply-templates select="events/submit-greeting"/>

This, along with the corresponding <xsl:template> at the bottom, will take the event XML returned by Symphony when our form is submitted and format the result message as a paragraph, giving users some indication of how their submission went. The other thing we've done is hidden the date field, and used some of Symphony's internal system parameters to autopopulate it (value="{$today} {$current-time}"). This will save our users the extra step of entering a date.

Save your changes and visit http://your-site.com/add. You should see our simple form. Before we can test it, though, we'll just have to attach the "Submit Greeting" event we created above to our page. Back in the template editor, click the blue Edit Configuration button at the top right. In the Events multiselect, select our "Submit Greeting" event and save your changes.

6.3. Test by Adding a New Greeting from the Front End

Now we can test our form out. Go to your "Add a Greeting" page (http://your-site.com/add). In the form, enter the Title Salut le Monde!, choose "French" from the language dropdown, and paste the following into the Greeting Content textarea:

Je vous présente Eduoard, qui à l'instant descend les escaliers, tac, tac, tac, sur sa tête, derrière Jean-Christophe. C'est, d'autant qu'il s'en souvienne, la seule manière de descendre les escaliers, bien qu'il ait parfois l'impression qu'il y a une autre manière, si il pouvait arrêter de faire tacoter pour bien y réfléchir.

Click "Submit". You should see a paragraph telling you that your entry has been created successfully:

Click "View Greetings" and you should see your new greeting on the home page. You're now able to accept entry submissions from your front end!

Step 7. Create an RSS Feed →

Symphony.