Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
17 posts Page 1 of 2
Hi! I´m using repeatable regions for the first time, i´m trying to make an option for the clients to create contact form fields by their own, so far everythig works fine, I have this code:
Code: Select all
<!-- this code to set the editable regions -->
<cms:repeatable name="form" label="Form fields" group="formulario" order="1"> 
  <cms:editable name="title" label="Label for the input field" type="text"/>
  <cms:editable name="name" label="Name for the input field" desc="This text shouldn´t contain spaces or capital letters" type="text"/>
  <cms:editable name="required" label="Required field?" type="radio" opt_values='Si| No' />
  <cms:editable name="text" label="Display this text if a field have been left empty" type="text" />
</cms:repeatable>

<!-- This code to display the values -->
<cms:show_repeatable 'form' >
  <div class="col-sm-4">
    <div class="form-group">
    <cms:dump/>
      <label for="<cms:show name/>"><cms:show label/></label>
      <cms:input type="text" name="<cms:show name/>" id="<cms:show name/>" class="form-control" required="1"/>
      <cms:if k_error_<cms:show name/>>
        <div class="alert alert-danger">
          <p id="<cms:show name/>_error" class="error"><cms:show text/></p>
        </div>
      </cms:if>
    </div>
  </div>
</cms:show_repeatable>

But there are a few details:
1. Is there any way i can get the value of the "title" editable region but with all letters lowercase and without spaces (something like the name of a cloned page that is automatically created from its title) so i can use this for the value of the "name" attribute of the input? this is trying to reduce the number of editable regions (for better display in the admin since the repeatable regions display in tables and to many regions doesn´t look fine).

2. When trying to use this <cms:if k_error_<cms:show name/>> i get an error, how could i put this value there?

thanks
hi, after a little bit of research i resolved the first point of my previous request, this is the case:
I need to output in the template a value entered by the client in the admin area but this value needs to be in lowercase and without spaces betwen words (in my case i need it for the value of the "name" attribute in a form input) so this is the code if anybody needs something similar:

Defining the editable area:
Code: Select all
<cms:editable name="title" label="Title for the form field" type="text"/>


Converting the value:
Code: Select all
<cms:set var_1="<cms:php>echo(str_replace( ' ', '_', \"<cms:show label/>\" ));</cms:php>" />

the previos code converts whitespaces to "_" so supose the client typed "Phone Number" in the admin now i have "var_1" set to "Phone_Number".

Next i need it lowercase:
Code: Select all
<cms:set var_2="<cms:php>echo(strtolower(<cms:show var_1/>));</cms:php>" />

so now i cant get the value i need (phone_number) from "var_2".

Don´t know if it´s the best way to achieve it i think there most be a way to achive it with a single line of code without setting two separate variables but this works for me
Hello ar2ro,

The simple solution for your 2 questions is like follow:

Code: Select all
First question

<cms:set label="Phone Number" />
<cms:set label_lowered="<cms:php>echo(strtolower(str_replace( ' ', '_', \"<cms:show label/>\" )));</cms:php>" />
<cms:show label_lowered />

Second question

<cms:set error_variable="k_error_<cms:show label_lowered />" />
<cms:show error_variable />

The variable "label" can be lowered "on fly", but it will be less responsive solution, so I suggest using this
@ar2ro, you said this is your first time with repeatable regions and you are actually using them to 'generate' forms dynamically. Amazing!

@cheesypoof, I think this idea can be worked on a bit to create a full-fledged form generator. What do you say?

Anyways, here is your modified code that should handle both the questions you posed (the repeatable region will not require the 'name' field anymore so I've removed that)

Code: Select all
<cms:repeatable name="form" label="Form fields" group="formulario" order="1"> 
    <cms:editable name="title" label="Label for the input field" type="text"/>
    <cms:editable name="required" label="Required field?" type="radio" opt_values='Si=1| No=0' />
    <cms:editable name="text" label="Display this text if a field have been left empty" type="text" />
</cms:repeatable>

Code: Select all
<cms:form anchor='0' method="post">

    <cms:if k_success>
        <cms:show k_success />
    </cms:if>
   
    <cms:show_repeatable 'form' >
      <div class="col-sm-4">
        <div class="form-group">
         
          <cms:php>
            global $FUNCS, $CTX;
            $name = $FUNCS->get_clean_url( $CTX->get('title') );
            $CTX->set( 'name', $name );
          </cms:php>

          <label for="<cms:show title />"><cms:show title /></label>
          <cms:input type="text" name="<cms:show name/>" id="<cms:show name/>" class="form-control" required="<cms:show required />" validator_msg="required=<cms:show text />"/>
         
          <cms:set my_error="<cms:get "k_error_<cms:show name/>" />" />
          <cms:if my_error>
            <div class="alert alert-danger">
              <p id="<cms:show name/>_error" class="error"><cms:show my_error /></p>
            </div>
          </cms:if>

        </div>
      </div>
    </cms:show_repeatable>
   
    <input type="submit" value="Submit" />
   
</cms:form>

Hope this helps.
1. Thanks Musman that shortened the code i was using

2. Thanks KK i was struggling with the code to display the form, basically when an input field was left empty the form displayed the error code of all the input fields instead of only the one that really have the error. Anyway this solves it and now works perfect, i think i´ll add some more options for the backend to allow more customization by the client, i´ll post the code when have it done
Ok so with the help of @Musman ang @KK i've come up with this code to allow clients to generate forms by themselves with all the fields they need. The client will be able to create form fields as needed, choose a type for the input (text, textarea, date and email), choose if the field is required, and set a text to show if the field fails validation.

I did think on adding dropdown, radio and checkboxes options for the type of the input but then i realized that this would lead to the need of letting the client to add n number of values for this options and can´t see a way to do it.

Anyway this code works perfect for what i need hope works for anyone else:

Set the editable regions
Code: Select all
<cms:repeatable name="form" label="Form fields">
      <cms:editable name="title" label="Label for the input field" type="text"/>
      <cms:editable name="type" type="dropdown" label="Select the type of data this field should contain" opt_values='Text=1 | Text Area=2 | Date=3 | E-mail=4'/>
      <cms:editable name="required" label="Required field?" type="radio" opt_values='Si=1| No=0' />
      <cms:editable name="text" label="Display this text if a field have been left empty" type="text" />
    </cms:repeatable>


Display the form:
Code: Select all
<cms:form anchor='0' method="post">
    <cms:show_repeatable 'form' >
      <div class="col-sm-4">
        <div class="form-group">

          <cms:php>
            global $FUNCS, $CTX;
            $name = $FUNCS->get_clean_url( $CTX->get('title') );
            $CTX->set( 'name', $name );
          </cms:php>

          <label for="<cms:show title />"><cms:show title /></label>
          <cms:input type="<cms:if (type='1') || (type='4')>text<cms:else /><cms:if type='2'>textarea<cms:else /><cms:if type='3'>datetime</cms:if></cms:if></cms:if>" name="<cms:show name/>" id="<cms:show name/>" required="<cms:show required />" validator="<cms:if type='4'>email</cms:if>" validator_msg="required=<cms:show text /><cms:if type='4'> | email=<cms:show text /></cms:if>"  />

          <cms:set my_error="<cms:get "k_error_<cms:show name/>" />" />
          <cms:if my_error>
            <div class="alert alert-danger">
              <p id="<cms:show name/>_error" class="error"><cms:show my_error /></p>
            </div>
          </cms:if>

        </div><!-- form-group -->
      </div><!-- col-sm-4 -->
    </cms:show_repeatable>
    <cms:popup_edit "form"/><!-- for on page editing -->
 
    <div class="col-sm-12">
      <input type="submit" value="Submit"/>
    </div>
     
    <cms:if k_success>
      <p>Thanks we´ll contact you soon</p>
      <cms:send_mail from=k_email_from to=k_email_to subject="Message from contact form">
        <cms:each k_success sep='\n'>
          <cms:show item /><br>
        </cms:each>
      </cms:send_mail>
    </cms:if>
 
  </cms:form>
Thank you ar2ro.

I think your solution would be even more useful if we add the missing 'radio', 'checkbox' and 'dropdown' types too.

I have modified your code a little to do just that (adding a 'message' above the repeatable regions explaining to the end-user how the options are to be inputted)
Untitled-1.png
Untitled-1.png (19 KiB) Viewed 10105 times

Code: Select all
<cms:template>
    <cms:editable name='form_msg' type='message' order='1'>
        <b>Form fields</b><br />
        The 'options' field applies only to 'radio', 'checkbox' and 'dropdown' types.<br />
        The options should separated by a pipe (|) character e.g. <br/>
        <i>Small | Medium |  Large</i>
    </cms:editable>
   
    <cms:repeatable name="form" label="." order='2'>
        <cms:editable name="title" label="Label" type="text"/>
        <cms:editable name="type" type="dropdown" label="Type" opt_values='Text=text | Text Area=textarea | Radio Buttons=radio | Checkbox=checkbox | Dropdown=dropdown |Date=datetime | E-mail=email'/>
        <cms:editable name="options" label="Options" type="text" />
        <cms:editable name="required" label="Required?" type="radio" opt_values='Yes=1| No=0' />
        <cms:editable name="text" label="Error message" type="text" />
    </cms:repeatable>
</cms:template>

Code: Select all
<cms:form anchor='0' method="post">

    <cms:if k_success>
        <!-- take action using the submitted data - like email -->
        <p>Thank you. We´ll get back to you soon.</p>
        <cms:each k_success sep='\n'>
            <cms:show item /><br>
        </cms:each>
    </cms:if>
   
    <cms:show_repeatable 'form' >

        <cms:php>
            global $FUNCS, $CTX;
            $name = $FUNCS->get_clean_url( $CTX->get('title') );
            $CTX->set( 'name', $name );
        </cms:php>

        <p>
        <label for="<cms:show title />"><cms:show title /></label>
        <cms:input
            type="<cms:if type='email'>text<cms:else /><cms:show type /></cms:if>"
            name="<cms:show name/>"
            id="<cms:show name/>"
            required="<cms:show required />"
            validator="<cms:if type='email'>email</cms:if>"
            validator_msg="<cms:if text>required=<cms:show text /><cms:if type='email'> | email=<cms:show text /></cms:if></cms:if>" 
            opt_values="<cms:show options />"
        />
        </p>
       
        <cms:set my_error="<cms:get "k_error_<cms:show name/>" />" />
        <cms:if my_error>
            <div class="alert">
            <p id="<cms:show name/>_error" class="error"><cms:show my_error /></p>
            </div>
        </cms:if>

    </cms:show_repeatable>

    <input type="submit" value="Submit"/>

</cms:form>

Hope this helps others too.
Great much cleaner and functional, already using it
This script is just wonderful.
It would be 100% complete if the was also an option to use a "are you human" question with validator.
What needs to be added to this script make this possible?
@gizmo
What needs to be added to this script make this possible?
I think that can be hardcoded in the form (e.g. placing the input outside the show_repeatable block just above the 'submit' button).
17 posts Page 1 of 2