Natural Language Forms / Story Forms

Hey there, @georgeatsc ??

We don’t do that anymore, sorry. That was back in our really early days. Since then we discovered that fill-in-the-blank forms are rubbish for accessibility. A regular looking form actually coverts better and is easier to use.

Out of interest, what did you have in mind? Share as much detail as you can. I ask, because we might still be able to help you put together something similar.

Let us know!

• This reply was modified 2 years, 2 months ago by Anonymous User 18525946.
• This reply was modified 2 years, 2 months ago by Anonymous User 18525946.

Hey @scotthappyforms

Bummer. We want it because it’s unique and would add a certain kind of look and feel on our website.

Something like this:
https://thethemefoundry.com/blog/create-natural-language-forms-in-wordpress/

Essentially, a paragraph of text with certain words swapped out for a text field or a multi-choice dropdown and the user fills in the gaps to complete the enquiry form, which in the end, reads as a complete sentence/statement.

Hey again @scotthappyforms

Some more examples
https://www.jroehm.com/2014/01/26/ui-pattern-natural-language-form/

I forgot to give an example of my form, it’d be something like this:

My name is First Name, I live in Suburb, Postcode, and I’m interested in Modern style kitchens. My budget is $10,000 and I’m looking at completion ASAP. My email is [email protected] and my phone number is 0000 000 000.
Send

Thanks Scott.

Got it, @georgeatsc!

That sounds definitely doable with Happyforms and a bit of custom CSS. Here’s how it works:

1. Alternate Paragraph fields (for the “fixed” parts of your form, like “My name is”) with other fields (for the dynamic parts, like “First Name”).
2. Set all your field’s Width option to Auto.
3. Set your field’s Label to Hide.
4. Pop this snippet in your Appearance → Customize → Additional CSS screen:

.happyforms-flex {
    align-items: center !important;
}

.happyforms-part--width-auto {
    align-self: center !important;
    flex-grow: 0 !important;
    margin-bottom: 0 !important;
}

That should push things in the right direction. To make the process easier, feel free to publish your draft form on a post, and share a link with us. That way we can follow along and provide spot-on suggestions.

Let us know how that goes!

Thanks guys! That did the trick.

Glad to hear we could help you out!

If anything else crops up, please just open a new topic.